（3）HTML经常使用标签 + 快捷字符

一、<meta charset="UTF-8">  #定义字符编码

二、<!doctype + 类型> #规定文档类型

三、<!-- 注释 --> #注释的格式

四、&； #转义字符

五、> 建立父子结构标签的

六、+ 建立兄弟标签的

七、. + 名字 能够在标签下快速建立标签而且给到属性值

八、$  叫计数器从1开始（若是是$$$，就是001开始）\ ul>li{$}*5经过table键直接能够生成1~5的带内容的标签 \  ul>li.li${$$$}*5这样的格式能够直接生成带内容和带顺序类名的标签

 

 

经常使用标签

语义标签： h1~h6（页面标题，出现1 次或者不出现） |  p（段落标签） |  span（文本标签） | i（斜体标签，给字体加效果） | em（强调标签字体加粗） |  b（字体加粗标签） | strong（强调标签字体加粗）

功能性标签： a(超连接标签)  |  img（图片标签） | hr（分割线标签） | br（换行标签） | ul>li（列表标签） | table（表格标签） |  form（表单标签-重点） 

 

单双标签

为何有单双标签之分：标签都有结束标志 ' / '，均可以省略不写，可是若是是双标签不写结束标签，则系统会自动添加，可是有可能添加的位置是不规范的，单标签则不写没有问题

单标签：都是功能性的（input、img、meta）,不须要内容，单纯的完成一个功能

双标签：主要用来显示内容的，以及子标签及子标签的内容

 

标签的种类（这些标签都是在body标签下的）

 

一、标题标签（最多6个标题标签）

<!--了解标签的语义（重点），标签的功能（重点）-->
<!--h1就表明了一级标签，h2~h6以次类推-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

二、段落标签

<p>这是段落1</p>
<p>这是断落2</p>

三、文本类标签

<span>我是文本标签</span>
<i>斜体标签，能让字体斜体</i>
<b>加粗标签</b>
<em>是强调标签，显示效果和i标签一抹一眼</em>
<strong>是强调标签，以加粗方式强调</strong>

四、功能性标签

<br>换行标签
<hr>分割线标签

<!--超连接标签-->
<!--href里面填写的是跳转的地址，target就是转条的方式有四种选择-->
<a href="http://www.w3school.com.cn/">前往w3school网站</a>
<a href="test.html">去标签页面，至关于前往本身的页面</a>
<a href="http://www.w3school.com.cn/" target="_blank">前往w3school网站,新开一个页面，targer=_blank就是新开一个标签页打开页面</a>
<a href="http://www.w3school.com.cn/" target="_self">前往w3school网站,新开一个页面，targer=_self就是当前页面打开页面，这是默认值，不写也能够</a>
<a href="http://www.w3school.com.cn/" target="_parent">前往w3school网站,新开一个页面，targer=_parent</a>
<a href="http://www.w3school.com.cn/" target="_top">前往w3school网站,新开一个页面，targer=_top</a>

<!--图片标签-->
<!--src填写的是数据源（能够是网络，能够是本地），alt资源错误的文本提示就是文本加载失败会有一个名字提示-->
<!--title标签任意标签均可拥有，就是鼠标悬停后的提示文本-->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548586126459&di=5a825dd41ab71cb657ac586ea4a1a483&imgtype=0&src=http%3A%2F%2Fpcs4.clubstatic.lenovo.com.cn%2Fdata%2Fattachment%2Fforum%2F201607%2F26%2F160423a04glh0k2feaek3z.jpg"
     alt="狗狗"
    title="这是狗狗图片">
<!--这个就是相对路径-->
<img src="./111111.jpg" alt="狗狗">

 

五、组合类标签

<!--列表标签-->
<!--列表标签的用处，就是父标签下有不少同类的子标签，放在一块儿管理，就要使用列表标签-->
<!--建立标签的快速写法就是ul>li,table补全-->
<!--pycharm自带的一个插件emmet，配合快速写法(ul>li)*3，用table能够直接打上3列，*后面的数字是多少就是打上多少列，其余的编辑器须要安装这样的插件-->
<!--ul>li 中间的大于号就是表示ul是li的父级-->

<!--第一种快读写法：ul>li,ul下套一个li-->
<ul>
    <li></li>
</ul>

<!--第二种快速写法:ul>li*3，快速建立一个ul下套三个li-->
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

<!--第三种快速写法:(ul>li)*3，三个ul下分别各套一个li-->
<!--小窍门：在写列表标签的时候使用*数字的格式（ul>li）*3，使用table自动补全，会自动生成3个嵌套的列表标签,*后面的数字是几就会生成几个-->
<ul>
    <li></li>
</ul>
<ul>
    <li></li>
</ul>
<ul>
    <li></li>
</ul>

<!--第四种写法：ul>li{列表项}*3，快速建立一个ul下有三个带内容的li-->
<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

 

六、表格标签

<!--表格标签：table（基本不会使用）-->
<!--border就是边框，=1就是加粗的等级-->
<!--thead 就是表头标签-->
<!--tr是行标签-->
<!--tfoot 表尾标签-->
<!--th 就是标题标签-->
<!--td 就是单元格标签-->
<!--caption 就是表格标题-->
<!--rules 控制表格内分割线，groups以组为分割、rows以每行为分割、cols以列为分割、all以全部的行和列分割-->
<!--width表示行宽，height表示行高-->
<!--rowspan 表示一个表格占几行  \ PS:若是要合并表格一列下的多行，一个表格设置占了几行，下面的表格要去除，用来作行合并的-->
<!--colspan 表示一个列下的单格占几列，用来作列合并的-->
<table border="1" rules="all" width="500" height="200">
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>单元格标题</th>
            <th>单元格标题</th>
            <th>单元格标题</th>
            <th>单元格标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <!--<td>单元格1</td>-->
            <td>单元格2</td>
            <!--<td>单元格3</td>-->
            <td colspan="2">单元格4</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>表尾单元格</td>
            <td>表尾单元格</td>
            <td>表尾单元格</td>
            <td>表尾单元格</td>
        </tr>
    </tfoot>

</table>

 

七、表单标签

<!--表单标签（先后台交互标签）：from (做用将用户录入的信息提交给后台)-->
<form action="">
    <!--输入标签-->
    <!--type就是输入的类型，type就是文本明文的，password就是密码类型是密文的，file就是选择文件的,radio就是圆点选择框（圆点框必须创建起练习才能选择其一，不然变成多选框并且没法取消），checkbox就是方形点选框（能够多选可取消）-->
    <input type="text" name="user">
    <input type="password" name="user">

    <!--文本域标签-->
    <!--textarea 就是文本域，文本域是能够鼠标拖动缩放的-->
    <textarea name="" id="" cols="30" rows="10"></textarea>

    <!--文件选择标签-->
    <input type="file">

    <!--下拉选择列表标签-->
    <!--select 就是列表标签，这个不是普通的excel样式的列表，是网页一个被收纳鼠标点击后会展开的列表-->
    <!--option 就是列表标签内选择项的功能标签-->
    <select name="" id="">
        <option value="">语文</option>
        <option value="">数学</option>
        <option value="">外语</option>
    </select>

    <hr>
    <!--展现标签-->
    <!--label 就是展现标签，用来作文本选择提示的-->
    <label for="">性别</label>
    
    <!--圆点选择框标签-->
    <!--name是惟一标示，这个属性就是将选择框创建起联系，radio内加就是只能选一个，checked 就是默认属性（radio和checkbox两个属性均可以加这个默认属性），checked是一个特殊的属性叫作布尔值属性，无论赋值任何值，都等于自身，不赋值checked的值默认就是本身)-->
    男<input type="radio" name="sex" checked>
    女<input type="radio" name="sex">
    <hr>
    <label for="">喜欢吃的东西</label>
    
    <!--方形复选框标签-->
    西瓜<input type="checkbox" name="like">
    香蕉<input type="checkbox" name="like">
    苹果<input type="checkbox" name="like">
    <hr>
    
    <!--按钮标签-->
    <!--按钮标签就是提交标签,会将表单标签内带有name属性的标签得到的值提交到后台-->
    <!--按钮标签也有类型选择，默认是submit提交按钮,button就是普通按钮点击不会提交，reset就是重置按钮(将用户输入的内容清除)-->
    <button type="submit">提交按钮</button>
    <button type="button">普通标签</button>
    <button type="reset">重置标签</button>
    <hr>
    
    <!--input标签作提交按钮-->
    <!--input提交按钮的文本提示要写在values的值-->
    <input type="submit" values="input也能够作提交按钮">
    
</form>

 

 

 

 

 

body标签下的超连接（a）标签内的target属性下的值说明