HTML元素-基本内容概要
一. 网页的基本元素
完整的HTML结构：
- 文档声明
- html元素
- head元素
- body元素
1.1 文档声明
- 不能省略
- 放在页面的最前面
<!DOCTYPE html>
1.2 html元素
- 根元素 - > 只存在一个
- lang=en
1.3 head元素
元数据 -> metadata
- 用来描述数据的数据 -> 字符编码
- 对网页来进行一些基本设置 -> 网页标题、网页图标
- title
- meta charset='utf-8'
- link -> 网站的图标
<link rel="icon" href="//www.jd.com/favicon.ico" mce_href="//www.jd.com/favicon.ico" type="image/x-icon"/>- link元素的rel属性不能省略，用来指定文档与链接资源的关系
- 一般rel若确定，相应的type也会默认确定，所以可以省略type
- 网页图标支持的图片格式是ico、png，常用大小是16x16、24x24、32x32 px
- style
以下列出的元素大多数情况下都是在head元素内部使用：
- meta
- title
- style
- link
- base
- script
- noscript
1.4 body
body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构
二. h元素/p元素/strong元素
- h元素 -> 标题
- p元素单标签，表示强制换行段落 （paragraph）
- strong加粗
三. br/hr/code（不常用）
- code -> 极少使用，一般用span替代
- br -> 单标签，表示强制换行（可以在p中使用，p会把换行和空格忽略）
- hr -> 分割线，极少使用，一般用div或者border
p元素中不要用div？
line-height小，字会重叠在一起
四. 字符实体
-
HTML中有一些字符是预留出来作特殊用途的，比如
- 小于号（<）
- 大于号（>）
-
要想在网页中正确地显示这些预留字符，必须使用字符实体，书写格式一般有2种
&entity_name;&#entity_number;
-
常用的字符实体
- 空格：
- 大于号：
> - 小于号：
< - &：
&
- 空格：
-
练习1
- html中如何直接显示<而不是显示<
- 替换
&为&就行了~ - 例如
&nbsp;
- 替换
- html中如何直接显示<而不是显示<
-
练习2
-
已知：当鼠标移动到元素上时， title属性的内容会自动显示出来。问题：如何设置title属性的内容为：
我是"特殊的"内容，非常'精彩' -
title=""外面是双引号，里面不能用双引号，可以用" -
title="我是"特殊的"内容，非常'精彩'"
五.div和span元素（重要）
-
span
- 默认情况下，跟普通文本几乎没差别
- 用于区分特殊文本和普通文本，比如用来显示一些关键字
-
div
- 一般作为其他元素的父容器，把其他元素包住，代表一个整体
- 用于把网页分割为多个独立的部分
六. img元素
-
单标签
-
src
- 本地路径
- 绝对路径
- 相对路径
- . 代表当前文件夹（1个
- .），可以省略
.. 代表上级文件夹（2个.）
- 远程路径
对于网页来说，不管什么操作系统（Windows、Mac、Linux），路径分隔符都是 /，而不是 \
- 本地路径
-
alt 占位文字（图片加载失败时显示）
- 注意
- img元素如果只设置了width（或height），浏览器会自动根据图片宽高比计算出height（或width）
- 在HTML5规范中，alt是img元素的必要属性
- width、height的默认单位是px，像素
- 一般都是用css，不会在标签的属性设置width和hieght
七. a元素
- href
- 记得要加上协议名（如http）
- target
- _self
- _blank
- _parent
- _top
- iframe的name
- iframe就是在一个网站里显示另一个网站
- base元素（用于抽取公共链接等）
- 可以利用base元素设置当前页面所有a元素的默认行为
- base元素写在head元素中
- 锚点链接
- 跳转到网页中的具体位置
-
<a href="#one">go</a>- 点击go会定位到
- id值为one的元素
- name值为one的a元素
- 如何跳转到其他页面的特定位置？
<a href="index.html#one">首页第一节</a>
- 伪链接
- 没有指明具体链接地址的链接，所以有时候可以把链接当作按钮来使用
<a href="javascript">伪链接</a>
四. URL/SEO优化
4.1. SEO优化
SEO: 搜索引擎优化
4.2. URL -> input
协议头://主机ip:端口号/路径/parameters?query#fragment
- port（端口号）
一台拥有IP地址的主机可以提供许多服务，比如Web服务、FTP服务、SMTP服务等
主机通过“IP地址 + 端口号”来区分不同的服务，端口号类似于营业厅的窗口
端口号的范围从0到65535，HTTP默认端口号是80，FTP默认端口号是21 - query
请求参数，提交给服务器的数据 - fragment
锚点位置
五.字符编码
- 作用：将文字存储到计算机中，之后解析出来显示
- 应用：所有的网页目前都需要采用UTF-8编码，所以浏览器在解析时我们也需要告诉浏览器当前我们使用的是UTF-8，浏览器才能正常的解析出来文字
lang -> language(语言)
char(字符) set(设置): 字符编码
字符编码
2 -> GBK
其他国家: 其他文字 -> 自己的编码规则 ->
Unicode -> 规则
utf-16/utf-32/utf-8
哈哈哈-> UTF-8 -> 0101 0101 0110 -> GBK -> 鍝
六. 快捷键
- ctrl+enter
- alt + shift + 向下
- ctrl + F 搜索
等宽字体 -> hl
.jpg -> jpeg
htm -> html
px -> pixel
网友评论