html标签

1 标签

##

1标题标签

<h1>标题一共六级选，</h1>
<h2>文字加粗一行显</h2>
<h3>由大到小依次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新见</h6>

2 段落，换行标签

  <p></p>  <br/>  强制换行

3文本格式化标签

<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
<br/>
更推荐用em,strong,del,ins 语义更强烈

4div.span标签

<div>就是一个空盒子</div>
<span>，用来装内容的</span>
<br/>
特点`：div 一行只能放一个div  大盒子

5图像标签

<img src="" alt="" title="鼠标放上图片上提示信息" width="100px" height="200px" border="10px"/ >
src 是必需属性，用于指定图像文件的路径和文件名；
alt是图像显示不出来的时候的替换文字
width，height只设置一个，会等比例缩放
重点：1 必需属性src？
           2 alt和title区别？

目录文件夹：就是普通文件夹，只不过存放了页面所需的相关素材，如html、图片等。
根目录：打开目录文件夹的第一层就是根目录。

6超链接标签

<a href="跳转目标URL地址" target="目标窗口弹出方式">文本或图像</a>`
  1外部链接 
  <a href="http://www.qq.com" target="_self">腾讯</a>
 2内部链接 
 <a href="1%20标题标签.html" target="_self">内部链接</a>
 <a href="#">3空链接</a>
 <a href="img.zip">4下载链接</a>
_self 当前页面窗口打开；_blank 新窗口打开页面

锚点链接：点击可快速定位到页面中某个位置

<a href="#time"><h3>早年经历</h3></a>
<a href="#work"><h3>演艺时代</h3></a>
<a href="#life"><h3 id="top">个人生活</h3></a>
<h5 id="time">早年经历</h5>
<p>刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意 [20]  。
    1973年，刘德华随家人搬入香港蓝田邨第15座14楼 [21]  。刘德华从黄大仙天主教小学毕业后升读可立中学 [22]
    。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，
    他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，
    他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路 [23]  。</p>
<h5 id="work">演艺时代</h5>
<p>1981年，刘德华考进第10期无线电视艺员训练班 [24]  。同年，出演个人首部电视剧《江湖再见》，在剧中饰演以贩卖妇女为生的小混混阿龙；该剧获得美国电视节电视剧特别奖 [25]  。
    1982年，刘德华以甲级成绩从艺员训练班毕业后正式签约TVB [26]  。同年在喜剧《花艇小英雄》中饰演败家仔钱日添。12月
    与叶德娴搭档主演时装警匪剧《猎鹰》，凭借卧底警察江大伟一角获得关注 [27]  。</p>
<h5 id="life">个人生活</h5>
<a href="#top"><h5>返回顶部</h5></a>
<p>刘德华的父亲刘礼在启德机场做过消防员的工作。20世纪60年代，刘礼开了一间小吃杂货店以赚钱维持家用。刘德华在家中还有三位姐姐，
    一位妹妹以及一位弟弟（刘德盛）。</p>

7 特殊字符

讲&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp究    空格 <  >
<p>是一个段落标签
&lt;p&gt;是一个段落标签

8 表格标签

tr同于定义行；

td（table data） 用于定义单元格，嵌套在tr中；

th 表头单元格 文字会加粗居中显示
属性：align 规定表格相对周围元素的对齐方式；
border:1 / ‘’ ‘’ 规定表格单元是否拥有边框，默认‘’‘’ 无
cellpadding 规定单元边沿与其内容之间的空白，默认为1像素
cellspacing 规定单元格之间的空白，默认为2像素
width 规定表格宽度

<table align="center" border="1" cellpadding="20" cellspacing="0" width="309" height="800">
 
    <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<!--    th 表头单元格 文字会加粗居中显示-->
    <tr><td>刘建国</td><td>女</td><td>16</td></tr>
    <tr><td>谢建华</td><td>女</td><td>17</td></tr>
</table>

合并单元格

1.合并单元格 2.目标单元格 3.合并单元格方式 （1）跨行合并 rowspan="合并单元格的个数" （2）跨列合并 colspan="合并单元格的个数" 合并单元格三部曲： 1.先确定是跨行合并还是跨列hebing 2.找到目标单元格，写上合并方式=合并单元格的数量，如 3.删除多余单元格

<table border="1" width="800px" height="800px">
    <thead>
    <tr>
        <th colspan="3">个人简历</th>
        <!--<th></th>
        <th></th>-->
    </tr>
    </thead>
    <tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
<!--        <td></td>-->
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>

9 列表标签

1 无序列表

<!--无序列表-->
<h4>你喜欢的食物</h4>
<ul>
    <li>榴莲</li>
    <li>苹果</li>
    <li>梨子</li>
    <li>香蕉</li>
<!--    ul只能嵌套li，li可以容纳所有元素-->
</ul>

2 有序列表

<h4>粉丝排行榜</h4>
<ol>
    <li>刘若话 2020</li>
    <li>程凯歌 2000</li>
    <li>小小脆 8</li>
</ol>

3 自定义列表（重点）

<!--自定义列表-->
<h4>粉丝排行榜</h4>
<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

9 表单标签

一个完整的表单由 表单域，表单控件，提示信息组成。
表单域：包含表单元素的区域，用于收集信息。

<form action="demo.php" method="get" name="name1">
</form>

表单控件

1 input 输入表单元素

<input type="属性值" />

还
1 name 和 value 是每个表单元素都有的属性值，主要给后台人员使用
2 name表单元素的名字，要求 单选按钮和复选框要有相同的name值
3 单选和复选可以设置checked属性，默认选中了
4 maxlength 最大输入元素长度

<form action="">
    用户名：<input type="text" name="username" value="请输入用户名" maxlength="7"><br>
    密码：<input type="password" name="psd" ><br>
    <!--    radio单选，通过相同的name="sex"保证单选 checkbox复选-->
    性别：男<input type="radio" name="sex" value="男" checked="checked">女<input type="radio" name="sex" value="女"><br>
    爱好：吃饭<input type="checkbox" name="hobby" value="吃饭">喝汤<input type="checkbox" name="hobby" checked="checked" value="喝汤">干饭<input type="checkbox" name="hobby" value="干饭"><br>
<!--    1 name 和 value 是每个表单元素都有的属性值，主要给后台人员使用
        2 name表单元素的名字，要求 单选按钮和复选框要有相同的name值
        3 单选和复选可以设置checked属性，默认选中了
        4 maxlength 最大输入元素长度-->
    <input type="submit" value="免费提交" >
    <input type="reset"><!--    重置按钮-->
    <input type="button" value="获取短信验证码">
    上传头像：<input type="file">
    <!--    文件域-->
    <!--
    label标签：为input元素定义标注（标签）
    label 用于绑定一个表单元素，当点击label标签内的文字时，浏览器就会自动将焦点转到或者选择对应的表单元素上，用来增加用户体验
    -->
    <!--<label for="sex">男</label>
    <input type="radio" name="sex" id="sex">-->
<!--    label for属性应当与相关元素的id属性相同-->
    <label for="name">用户名：</label><input type="text" name="username" value="请输入用户名" maxlength="7" id="name"><br>
</form>

label标签：为input元素定义标注（标签）
label 用于绑定一个表单元素，当点击label标签内的文字时，浏览器就会自动将焦点转到或者选择对应的表单元素上，用来增加用户体验；
label for属性***应当与相关元素的***id属性相同

2 select 下拉表单元素

<form action="">
    <select name="" id="">
        <option value="">选项1</option>
        <option value="">选项2</option>
        <option value="">选项3</option>
    </select>

</form>

1 <select 至少包含1对option；
2 在option 中定义selected=‘selected’时，当前项即为默认选中项。

<form action="">
    籍贯：<select name="" id="">
    <option value="" >安徽</option>
    <option value="">山东</option>
    <option value="" selected="selected">天津</option>
</select>
</form>

3 textera 文本域元素

<form action="">
    今日反馈：<textarea cols="2" rows="5">
        略略
    </textarea>
<!--    cols="每行中的字符数" rows="显示的行数" 实际开发中并不会使用，都是用css来改变大小-->
</form>