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"/>