一、元素
1、元素基础
元素Element=开始标签(属性Attribute:属性名="属性值"
)+内容+结束标签
标签内不区分大小写
空元素:无内容的元素,如img元素
2、块级元素和内联元素
- 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行,其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容,例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中,但可以嵌套在其它块级元素中。
- 内联元素通常出现在块级元素中并环绕文档内容的一小部分,而不是一整个段落或者一组内容。内联元素不会导致文本换行:它通常出现在一堆文字之间例如超链接元素或者强调元素和 。
3、属性
布尔属性可以没有值,比如<input disabled>
4、特殊字符
在HTML中,字符 <, >,",’ 和 & 是特殊字符,如须表示,需要用特殊的等价字符替换
5、注释
<!-- 需要被注释的内容 -->
6、<head>
中属性
1)CSS文件
该元素经常位于文档的头部(猜测是的意思?)。stylesheet表这是文档的样式表,href包含了文件路径
<link rel="stylesheet" href="my-css-file.css">
当也可以放在<head>
标签下的<style>
标签里,格式与放在.css里一模一样
样式style也可作为标签属性:<h1 style="color:blue; text-align:center">
2)JavaScript文件
没必要放在文档头部,放在文档尾部(之前)更好。将脚本放在
3)<title>
描述html网页属性
3)元数据<meta>
元数据:描述数据的数据
字符编码 / 作者 / 网页描述
4)页面图标<link>
7、无特殊语义的标签
1)<span>
和<div>
可以使用它来编组元素以达到某种样式意图(通过使用类或者Id属性),或者这些元素有着共同的属性,比如lang。应该在没有其他合适的语义元素时才使用它。区别是,span
是行内元素,div
是块元素
8、文本标签
1)超链接<a>
属性:
- href:可放绝对URL和相对URL,相对URL跟相对路径的使用其实是一样的
- mailto:…@…com:发送邮件
- title:超链接悬停时的提示语
2)上标<sup>
下标<sub>
3)页眉<header>
是<body>
子元素的话就是页眉,如果它是<article>
或<section>
的子元素,那么它是这些部分特有的页眉
4)导航栏<nav>
5)主内容<main>
举例中包括<article>
和<aside>
<main>
存放每个页面独有的内容。每个页面上只能用一次<main>
,且直接位于 中。
6)侧边栏<aside>
7)页脚<foooter>
8)换行<br>
空元素,不需要闭合标签,放在一行的最末尾
8)水平分割线<hr>
空元素
9)表格
所有内容用<table>
标签包围
<caption>
:放在table标签下,是对表格的描述。可以没有
<td>
:table data描述一个cell的数据
<tr>
:table row包含一行的所有数据
<th>
:table header标题,可以替代<td>
使用
用于样式的标签:
colgroup
:包含col标签
<col>
:在每个标签内定义每列的样式 属性:span=“3”:为3列添加同样的样式
<table>
<colgroup>
<col>
<col style="background-color: yellow">
</colgroup>
<tr>
<th>Data 1</th>
<th>Data 2</th>
</tr>
</table>
<thead>
:代替<tr>
表示标题行,放在头部,如果有就放在之下
<tfoot>
:代替<tr>
表示页脚行,可放在表格底部也可放在元素之下
<tbody>
:代替<tr>
表示内容行,可放在 的下面或者是 的下面
属性:
- colspan=“2”:占多列
- rowspan=“2”:占多行
表格嵌套:直接将完整的<table>
放置在应该在的位置即可
10)表单
还包括<input>
,<select>
等的使用
<!-- form 表单主体 | method 表单的 HTTP 请求方法 GET/POST | action 接收请求路径 -->
<form method="post" action="index.php" >
<!-- 表单控件 -->
<input type="text" /> <!-- 文本框 -->
<input type="password" /> <!-- 密码框 -->
<input type="hidden" /> <!-- 隐藏框 -->
<input type="number" /> <!-- 数字框 -->
<input type="date" /> <!-- 日期控件 -->
<!-- 多选框 | 相同 name 为一组 -->
牛奶 <input type="checkbox" name="food" /> 面包<input type="checkbox" name="food" />
<!-- 单选框 | 相同 name 为一组 -->
男 <input type="radio" name="sex" /> 女 <input type="radio" name="sex" />
<!-- 多行文本框 | cols 宽 rows 高 -->
<textarea rows="2" cols="20"></textarea>
<!-- 选择框 -->
<select name="num">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
<!-- 上传文件 | accept 文件类型限制 -->
<input type="file" accept="image/gif, image/jpeg, image/png" >
<!-- 范围控件 | min max 范围值 -->
<input type="range" min="1" max="100" />
<!-- 颜色控件 -->
<input type="color" />
<!-- 表单提交 -->
<input type="submit" value="提交" />
<!-- 表单重置 -->
<input type="reset" value="重置" />
<!-- 普通按钮 -->
<button type="button">按钮</button>
</form>
11)进度条
<progress>
:<progress value="30" max="100"></progress>
<meter>
:比progress定制性更强。根据 min low high max 4个刻度等级衡量 value 的值,optimum 用于标示每个等级相对应的显示颜色。<meter value="100" min="0" low="100" high="200" max="300" optimum="200"></meter>
9、多媒体标签
1)图片<img>
空元素,
属性:
- src
- alt:在图片不能被显示时,显示对图片的文字描述
- titile:悬停提示
- width
- height