- 用什么标签,不是根据样子来决定,而是语义
- HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。但是,我们发现有良好的缩进,代码更易读。
- HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。
charset 字符集
<meta charset="UTF-8">
设置使用的是哪个字符集,UTF-8
,字符比较的齐全,每一个汉字3个字节,文件尺寸较大。gb2312
:字符少,一个汉字2个字节,文件尺寸较小。
字符实体
<
less than 对应着 <>
greater than 对应着 >©
版权符号©
空格
p 段落标签
- HTML标签是分等级的,HTML将所有的标签分为两种:容器级、文本级。
- 容器级的标签,里面可以放置任何东西;
- 文本级的标签里面,只能放置文字、图片、表单元素。
- p标签是一个文本级标签。记住:p里面只能放文字、图片、表单元素。其他的一律不能放。
img 图片
<img src="" alt="" />
属性src
:图片的路径(相对路径/绝对路径)。alt
:替代文本,当图片显示失败的时候显示的文字。
a 超链接
<a href="网址" title="悬停文本" target="_blank">链接文字</a>
- 如果不写target=”_blank”那么就是在相同的标签页打开,如果写了,就是在新的空白标签页中打开。
页面内的锚点:<a name="锚点name"></a>
,如果先跳转到这个锚点:<a href="#锚点name"></a>
ul 无序列表
语义:列表,清单等,列表中的每个项目都是都是并列的,同级别的,不分先后的。
<ul>
<li></li>
</ul>
- 组标签,
ul
和li
是同时出现的。 li
是不能单独出现的,同样ul
的儿子标签也只能是li
,不能是别的元素。- 但是
li
是一个容器级别的标签里面可以放置任何标签 - 常用在页面顶部的导航条
ol 有序列表
<ol>
<li></li>
</ol>
和ul
相比,除了语义是有序之外,用法一样。
但是ol
使用比较少,一般实际开发的时候,即使是有序的列表也会用ul
去实现。
dl 自定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
dl
表示definition list 定义列表
dt
表示definition title 定义标题
dd
表示definition description 定义表述词儿
dt
、dd
只能在dl
里面;d
l里面只能有dt
、dd
div span
div
的语义是division“分割”。div
在浏览器中,默认是不会增加任何的效果改变的,但是语义变了,div中的所有元素是一个小区域。div
标签是一个容器级标签,里面什么都能放,甚至可以放div
自己div
里面放置大东西的,span
里面是放置小元素的span
的语义就是span“范围、跨度”。span
也是表达“小区域、小跨度”的标签,但是是一个“文本级”的标签。span
里面只能放置文字、图片、表单元素。 在标签的可以将图片和表单直接看成文字。span
里面不能放p、h、ul、dl、ol、div。
表单
- 表单就是收集用户信息的,就是让用户填写的、选择的。
<form action="" method="post">
</form>
- action属性就是表示,表单将提交到哪里。
- method属性表示用什么HTTP方法提交,有get、post两种。
文本框
<input type="text" name="" id="" value="" />
- input表示“输入”,指的是这是一个“输入小部件”,
- type表示“类型”,
- text表示“文本”,指的是类型是一个文本框的输入小部件。
- value属性就是默认有的值,文本框中已经被填写好了
密码框
<input type="password" name="" id="" value="" />
- 也就是说,input标签很神奇,又是文本框,又是密码框。
- 到底是啥?看type属性的值是什么,来决定。
- 如果type=”text” 文本框
- 如果type=”password” 密码框
单选按钮
<input type="radio" name="sex" id="" value="" />男
<input type="radio" name="sex" id="" value="" />女
- 单选按钮,天生是不能互斥的,如果想互斥,必须要有相同的name属性。name就是“名字”
- 默认被选择,就应该书写checked=”checked”
<input type="radio" name="sex" id="" value="" checked="checked"/>男
复选框
<input type="checkbox" name="fav" id="" value="" />篮球
<input type="checkbox" name="fav" id="" value="" />乒乓桥
<input type="checkbox" name="fav" id="" value="" />台球
- 复选框,最好也是有相同的name(虽然他不需要互斥,但是也要有相同的name)
下拉列表
<select name="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">重庆</option>
</select>
- select标签和ul、ol、dl一样,都是组标签。
文本域
<textarea name="" rows="" cols=""></textarea>
- 这个标签,是个标签对儿。对儿里面不用写东西。如果写的话,就是这个框的默认文字。
- cols属性表示columns“列”,rows属性表示rows“行”。
值就是一个数,表示多少行,多少列。
按钮
普通按钮
<input type="button" name="" id="" value="" />
提交按钮
<input type="submit" value=""/>
- 这个按钮点击,表单真的能提交。这个表单就会被提交到,form标签的action属性中的那个页面中去。
重置按钮
<input type="reset" name="" id="" value="" />
label标签
<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女
本质上讲,“男”、“女”这两个汉字,和input元素没有关系。
<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv" /> <label for="nv">女</label>
input元素要有一个id,然后label标签就有一个for属性,和id相同,就表示绑定了,这个label和input就有绑定关系了。