第一篇html&css详细讲解-EW帮帮网

第一章 HTML标签介绍

第一节 HTML基本结构

<!DOCTYPE html>  

<html>

<head>

<title>标题</title>

</head>

<body>

文档主体

</body>

</html>

HTML 标签是由<>包围的关键词，例：<html>
HTML 标签通常成对出现，分为标签开头和标签结尾，例：<html> </html>
有部分标签是没有结束标签，成为单标签，单标签内必须用 / 结尾，例：<br/><hr/>
页面中所有的内容，都要放在HTML标签中
HTML标签主体分为三个部分
- 标签名称
- 标签内容
- 标签属性
HTML 标签具有语义化
- 语义化：就是仅通过标签名就能判断出该标签的内容。
- 语义化的作用
  - 网页结构层次更清晰。
  - 更容易被搜索引擎收录。
  - 更容易让屏幕阅读器读出网页内容。
标签的内容就是在一对标签内部的内容
标签的内容可以是其他标签

第二节标签（元素）全局标准属性

在HTML规范中，规定了全局标准属性：

class属性

用于定义元素的类名。

id属性

用于指定元素的唯一id
要注意该属性的值在整个HTML文档中要具有唯一性

注意：

属性和属性值，尽量小写，本来这样做也方便些。
class 属性可以多用 class=" " （引号里面可以填入多个class属性）
id 属性只能单独设置 id=" "（只能填写一个，多个无效）

style属性

用于指定元素的行内样式
使用该属性后将会覆盖任何全局的样式设定

title属性

用于指定元素的额外信息

dir属性

用于指定元素中内容的文本方向
属性值只有ltr或rtl两种，含义分别是left to right和right to left。

lang属性

用于指定元素内容的语言

第三节 HTML的全局事件属性

Window窗口事件

onload：在页面加载结束之后触发。
onunload：在用户从页面离开时发生，例如点击跳转，页面重载，关闭浏览器窗口等。

Form表单事件

onblur：当元素失去焦点时触发。
onchange：在元素的元素值被改变时触发。
onfocus：当元素获得焦点时触发。
onreset：当表单中的重置按钮被点击时触发。
onselect：在元素中文本被选中后触发。
onsubmit：在提交表单时触发。

Keyboard键盘事件

onkeydown：在用户按下按键时触发。
onkeypress：在用户按下按键后，按着按键时触发。该属性不会对所有按键生效，不生效的有：ALT、CTRL、SHIFT、ESC
onkeyup：当用户释放按键时触发。

Mouse鼠标事件

onclick：当在元素上发生鼠标点击时触发。
onblclick：当在元素上发生鼠标双击时触发。
onmousedown：当在元素上按下鼠标按钮时触发。
onmousemove：当鼠标指针移动到元素上时触发。
onmouseout：当鼠标指针移出元素时触发。
onmouseover：当鼠标指针移动到元素上时触发。
onmouseup：当在元素上释放鼠标按钮时触发。
Media媒体事件
onabort：当退出时触发。
onwaiting：当媒体已停止播放但打算继续播放时触发。

第二章 HTML的标签（元素）

第一节文本标签

段落标签 <p></p>

段落标签用来描述一段文字

标题标签 <hx></hx>

标题标签用来描述一个标题
标题标签总共有六个级别，由高到低分别是h1,h2,h3,h4,h5,h6

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>

<h1></h1>标签在每个页面中通常只出现一次

强调语句标签<em></em>

用于强调某些文字的重要性

更加强调标签<strong></strong>

和 <em>标签一样，用于强调文本，但它强调的程度更强一些

无语义标签<span></span>

<span>标签是没有语义。

短文本引用标签<q></q>

简短文字的引用。

长文本引用标签<blockquote></blockquote>

定义长的文本引用

换行标签<br/>

<br/>标签作用相当于word文档中的回车,起到文字换行的作用

第二节多媒体标签

链接标签 <a></a>

图片标签 <img/>

视频标签<video></video>

<video src="mov.mp4" controls="controls">
目前video支持三种视频格式
- Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
- MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
- WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

音频标签<audio></audio>

<audio src="a01.mp3"></audio>

第三节列表

无序列表标签<ul><li><li/></ul>

ul-li是没有前后顺序的信息列表
<ul><ul/>列表定义一个无序列表
<li><li/>代表无需列表中的每一个元素

<ul>
  <li>HTML<li/>
  <li>CSS<li/>
  <li>JavaScript<li/>
</ul>

有序列表<ol><li><li/></ol>

ol-li列表默认情况下，每个li在浏览器中都会显示一个数字，代表自己的序号

定义列表<dl></dl>

定义列表通常和<dt></dt>和<dd></dd>标签一起使用
<dt></dt>定义列表中的项目
<dd></dd>描述列表中的项目

<dl>
   <dt>学习WEB前段需要掌握哪三种语言</dt>
   <dd>需要掌握HTML，搭建网页结构</dd>
   <dd>需要掌握CSS，用于修改网页结构的样式</dd>
   <dd>需要掌握JavaScript，用于用户和计算机交互</dd>
</dl>

第四节表格

表格标签<table></table>

表格的一行<tr></tr>

有几对tr, 表格就有几行。

表格的表头<th></th>

表格的头部的一个单元格，表格表头。

单元格<td></td>

表格的一个单元格，一行中包含几对<td><td/>，说明一行中就有几列。

<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>25</td>
</tr>
<tr>
<td>小花</td>
<td>女</td>
<td>23</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>28</td>
</tr>
</table>

表格合并

同一行内，合并几列colspan=“2”
同一列内，合并几行rowspan="3"

第五节表单标签系列

表单标签<form>

<form></form>表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
<form method="传送方式" action="服务器文件">
action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)
method ：数据传送的方式（get/post）

第一篇html&css详细讲解