共计 3768 个字符，预计需要花费 10 分钟才能阅读完成。
Web 规范
web 规范的形成：
构造（HTML)、体现(CSS)、行为(JavaScript）
HTML 标签
语法标准
<!DOCTYPE html> 意思是以后页面采纳的是 HTML5 版本来显示的，是文档类型申明标签<html lang="en"> 其中 lang 示意 language，en 示意英文网页，ah-CN 就是中文网页，次要是提醒作用<mate charset="UTF-8"> charset 示意字符集的意思，UTF- 8 示意万国码，GB2312 示意简体中文，BIG5 示意繁体中文，该句是十分重要的，否则可能呈现乱码
罕用标签
题目标签 <h1>-<h6>
重要性递加，一个题目独占一行
段落标签 p
换行标签 <br/>
单词 break 的缩写，能够强制换行
是一个单标签
文本格式化标签
加粗：<strong></strong>/<b></b>
歪斜：<em></em>/<i></i>
删除线：<del></del>/<s></s>
下划线:<ins></ins>/<u></u>
图像标签 <img>
是一个单标签 <img src="图像 URL"/>
插入图片之前须要先把图片放在 html 文件一起<img src="朝花夕誓 1.jfif" alt="找不到图片的门路"/>
alt 示意如果图片显示不进去就会用它的属性是来代替
title 属性的值会在鼠标移到图片上的时候显示进去
width 属性设置图像的宽度
height 属性设置图片的高度
<img src="朝花夕誓.jfif" alt="找不到图片的门路" title="这里是小仙女" width="700px" height = "500px"/>border 能够给图片加上边框
属性之间是不辨别程序的
文件夹和根目录
目录文件夹: 做网页所须要的相干素材，例如:html，图片等
根目录：关上目录文件夹的第一层就是根目录
相对路径和绝对路径
相对路径：图片绝对于 HTML 页面的地位
<img src ="../images/ 朝花夕誓.jfif"/>
绝对路径：通常是从盘符开始的例如 C:\ 或者 D:\ 或者是残缺的网址
留神绝对路径和相对路径的斜杠是相同的，然而当绝对路径是网址的时候斜杠和相对路径一样
链接标签
<a href="跳转地址" target="指标窗口的弹出形式" ><a/>
target 默认属性值为_self 此外还包含_blank
| 外部链接 | 内部链接 | 空链接 | 下载链接 |
|---|---|---|---|
| 网站外部页面之间互相链接，间接连贯外部网页名称即可 | 各种网址 | <a href="#"> 空链接 </a> |
下载链接地址链接的是文件.exe 或者是 .zip 等压缩包模式, 例如 <a href = "pic.zip"> 下载图片 </a> |
也能够为网页元素例如图片，网格，音频等都能够增加链接
锚点链接
当页面篇幅很长的时候则须要锚点链接来实现跳转
1、设置 href 的属性值为“# 名字”的模式，例如<a href="#one"> 第二季 </a>
2、找到指标地位标签，外面增加一个 id 属性 = 方才的名字, 例如<h3 id="one"> 第二季 </h3>
正文和特殊字符
正文标签：<!-- hhhhhhhhh -->
特殊字符：
表格标签
<table>
<tr>
<td> 单元格外面的文字 </td>
</tr>
</table>table 用于定义表格
tr 用于定义表格中的行
td 用于定义表格中的单元格
三者嵌套的程序不可变
例如：
<table>
<tr>
<td> 一行一列 </td>
<td> 一行二列 </td>
<td> 一行三列 </td>
</tr>
<tr>
<td> 二行一列 </td>
<td> 二行二列 </td>
<td> 二行三列 </td>
</tr>
<tr>
<td> 三行一列 </td>
<td> 三行二列 </td>
<td> 三行三列 </td>
</tr>
</table>表头单元格标签
表头单元格外面的文字会加粗，内容会居中显示
<table>
<tr>
<th> 第一列名字 </th>
<th> 第二列名字 </th>
<th> 第三列名字 </th>
</tr>
<tr>
<td> 二行一列 </td>
<td> 二行二列 </td>
<td> 二行三列 </td>
</tr>
<tr>
<td> 三行一列 </td>
<td> 三行二列 </td>
<td> 三行三列 </td>
</tr>
</table>表格属性
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500">
align 是文字在表格中的地位
cellpadding 是单元格与文字之间的间隔
cellspacing 是指单元格之间的间隔
表格构造标签
能够将表格宰割成表格头部和表格主体局部：<thead> 标签和 <tbody>
例如：
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500">
<thead>
<tr>
<th> 第一列名字 </th>
<th> 第二列名字 </th>
<th> 第三列名字 </th>
</tr>
</thead>
<tbody>
<tr>
<td> 二行一列 </td>
<td> 二行二列 </td>
<td> 二行三列 </td>
</tr>
<tr>
<td> 三行一列 </td>
<td> 三行二列 </td>
<td> 三行三列 </td>
</tr>
</tbody>
</table>合并单元格
跨行合并：rowspan=” 合并单元格格数 ”
最下面单元格作为指标单元格，写合并代码
跨列合并：colspan=” 合并单元格个数 ”
最左侧单元格作为指标单元格，写合并代码
<table border="1" cellspacing="0" width="500" height="400">
<tr >
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>合并单元格的时候记住删除多余的单元格（即是合并的指标单元格的其余单元格）
列表
无序列表：
<h3> 你喜爱的食物 </h3>
<ul>
<li> 榴莲 </li>
<li> 火锅 </li>
<li> 烧烤 </li>
</ul>ul 标签中只能有 li 标签，例如 p 标签不能呈现在 ul 中，li 外面能够放任一标签
有序列表：
<h3> 粉丝排行榜 </h3>
<ol>
<li> 迪丽热巴；19808</li>
<li> 赵丽颖：12344</li>
<li> 小红：1</li>
</ol>同理，ol 只能放 li
li 可放任意
自定义列表：
罕用于定义形容列表
<dl>
<dt> 关注咱们 </dt>
<dd> 新浪微博 </dd>
<dd> 官网微信 </dd>
<dd> 分割咱们 </dd>
</dl>表单
<form action="url 地址" method="提交形式" name="表单域名称">
各种表单元素控件
</form>action 用于指定几首并解决数据的服务器程序的地址
method 属性值包含 get/post, 用于设置表单数据的提交形式
name 用于指定表单的名称，以区别同一页面中多个表单域
表单域就是 form
表单控件
1、input 输出表单元素（单标签）<input type=""/>
<form>
用户名：<input type="text"/><br>
<!-- 明码框 -->
明码: <input type="password"/><br>
<!-- 单选按钮 -->
性别：男 <input type="radio"/> 女 <input type="radio"/><br>
<!-- 多选按钮 -->
喜好：吃饭 <input type="checkbox"/> 睡觉 <input type="checkbox"/> 打豆豆 <input type="checkbox"/>
</form>单选按钮问题解决：
name 属性：区别不同的表单，定义 input 元素的名称
性别实现单选：三个 input 的 name 的属性值都是一样的
value 属性：次要供后盾人员应用，规定 input 元素的值
单选框和复选框都要有雷同的 name 值
checked 属性：次要用于单选框和复选框，默认选中
maxlength 属性：规定输出字段中字符的最大长度
2、select 下拉表单元素
<select>
<option> 选项 1 </option>
<option> 选项 2 </option>
<option> 选项 3 </option>
....
</select>
selected 属性默认抉择
<form action="">
<select>
<option value=""> 山东 </option>
<option value=""> 北京 </option>
<option value=""> 四川 </option>
</select>
</form>3、textarea 文本域表单元素
特大号文本框
罕用于留言板，评论
<form action="">
今日反馈：<textarea cols="50" rows="5">
</textarea>
</form>label 标签
用于绑定一个表单元素，当点击 label 标签内的文本的时候，浏览器会主动将焦点转到或者抉择对应的表单元素上，用来减少用户体验
label 外面的 for 属性该当与相干元素的 id 属性雷同
<label for="man"> 男 </label><input type="radio" name="sex" id="man"/>