HTML标签

• 标题标签<h1>、<h2>、<h3>、<h4>，标题标签之间是不能嵌套的，下一级标题与上级标题之间通过同级

  关于书写，下级标题解释说明的是前面距离最近的上一级标题

• 权重
  <h1>在整个HTML中的权重非常高，内部应该html中最重要的内容。<h1>权重大于<h2>
  如果一个页面出现多个<h1>，反而降低权重，往往会约定，一个页面出现一个<h1>就够了。

换行标签

<br/> (breaking)标签作用是换行，是一个单标签
与<p>不同的是，<br>没有建立新的段落的语义，只是简单的进行强制换行<br>
这是br换行标签使用<br>

段落标签

 一对<p></p>标签的内部元素为一个完整的段落<br>  <p>这是标签的使用emmmm</p>  <p>这是标签的使用emmmm</p>  <p>这是标签的使用emmmm</p> 

• 文本格式化的标签均为双标签，且文本级标签内部只能写文字

  标签             描述  b             定义粗体文本，bold  big           定义大写字体  em            定义着重文字，emphasis，自带斜体效果  i             定义斜体字，italic  small         定义小号字  strong        定义加重语气，自带加粗效果  sub           定义下标字，subscript  sup           定义上标字，suprscript  ins           定义插入字，自带下划线效果，insert  del           定义删除字，delete  s             不赞成使用，使用del代替就可以了  strike        不赞成使用，用del就好    u             定义下划线，不赞成使用，后期让css添加样式即可 

图像标签

• 由<img>标签进行定义，在指定的位置插入一张图片，是一个单标签
• <img>常用属性展示，通过属性进行相关的图像设置

代码示例： <img src="picture.ipg" border="1" alt="图片1">     属性名            描述    src          表示图片的路径    width        表示图片的宽度    height       表示图片的高度    border       边框属性，可以设置边框的粗细    title        设置提示文本    alt          设置图像没有找到时候的替换文本 

• 引入图像需要填写路径，这里路径分为相对路径、绝对路径、相对路径

• 相对路径查找文件时，需要从HTML文件本身出发，根据相对位置进行查找，包含三种方向：

• 同级查找：当目标文件与和HTML文件位于同一级，直接写 文件名.后缀

  <img src="picture.jpg" alt="前端基础——HTML(二)">

• 子集查找：目标文件在与HTML文件同一级的文件夹里面，这时就需要先找文件夹的名称，
  然后通过关闭符号/进入文件夹查找里面的文件

  <img src="img/picture.jpg" alt="前端基础——HTML(二)">

• 上级查找：目标文件在HTML文件所在的文件夹的更上一级，需要跳出当前文件夹到上一级，路径则利用

      &nbsp ../表示跳出一级，若跳出多级，写多次../ 直到找到文件

• 绝对路径

• 绝对路径查找文件时，不需要从和和HTML文件出发，直接从电脑的盘符出发查找，或者使用网址形式查找
• 盘符查找： <img src="C:UsersxiaomiDesktoppicture.jpg" alt="前端基础——HTML(二)">
• 网址形式：<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2443910753,1558982167&fm=26&gp=0.jpg" alt="前端基础——HTML(二)">
• 缺点：盘符出发的路径不可移动，不可移植
  若路径中有中文，易出错

音频控制条属性

• 音频加载后不会自动显示播放器的控制条，设置controls属性值为conntrols即可

  <audio src=""music.mp3" controls="controls">

视频标签

• <video>是双标签，支持的格式.mp4、.ogg、.webm
  设置方法与音频类似

  <video src="video.mp4" controls="controls"><video>

超级链接标签

• a 全称anchor，锚的意思，为双标签，<a>标签在指定的位置添加链接，提供用户进行点击和跳转
• <a>标签可以实现两种跳转：跨页面跳转、页面内跳转
• herf超文本引用，用于规定链接的目标地址

  属性值：链接目标的路径地址，可以使用相对路径或网址形式的绝对路径

• targte属性
  可以定义被链接的文档在何处跳转显示

  属性值             描述   _blank       在新的窗口打开链接   _self        默认，在相同的框架中打开被链接文档  _parent      在父级框架集中打开被链接文档   _top         在整个窗口中打开被链接文档   framename    在指定的框架中打开被链接文档 

无序列表标签

• 无序列表需要两个标签参与，<ul>和<li>
• ul：定义一个无序列表的大结构
• li：列表项，定义的是无序列表内的某一项
• <ul>、<li>是嵌套关系，快捷键ul>li
• 注意：

• <ul>内部只能嵌套<li>，<li>标签不能脱离<ul>单独书写
• <li>标签是经典的容器级标签，内部可以放置任意内容
• 无序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式是由css负责

有序列表标签

• 有序列表需要两个标签参与，<ol>和<li>
• <ol>定义一个有序的列表的大结构
• <li>定义的是有序列表的每一项，<ol>和<li>是嵌套关系，快捷键：ol>li
• 注意：

• <ol>内部只能嵌套<li>，<li>标签不能脱离<ol>单独书写
• <li>标签是经典的容器级标签，内部可以放置任意内容
• 有序列表的列表项<li>之间，存在顺序先后之分

定义列表标签

• 自定义列表不仅仅是一列项目，而是项目及其注释的组合
• 由<dl>、<dt>、<dd>组成

• dl：定义一个自定义列表的大结构
• dt：定义自定义列表中的一个主题或术语
• dd：定义解释项，表示描述或解释前面的定义主题
• <dl>内部只能嵌套<dt>、<dd>，<dt>和<dd>是同级关系

代码示例：             <dl>          <dt>主题<dt>          <dd>解释<dd>       </dl>  注意：1.<dl>内部只能嵌套<dt>和<dd>，<dt>和<dd>标签不能脱离<dl>单独书写        2.<dl>内部可以存放多组dt和dd，每个dd解释说明的搜索前面距离最近的一个dt        3.每个dt后面可以有多个dd或者0个        4.后期添加css样式，最好每个dl添加一组dt和dd 

布局标签

• <div>和<span>标签常用作布局工具，俗称为盒子
• <div> 俗称大盒子，双标签，容器级标签，多用于划分网页区域，进行结构布局。
• <span> 俗称小盒子，双标签，容器级标签，不改变整体效果的情况下，可以辅助进行局部调整

HTML基本语法--表格基础

• <table> border ---- 边框属性值
• 设置border表格的单元格之间有默认的空隙，会导致双边框线
• border-collapse:collapse-----表示边框塌陷（单边框线）

 样式css   <style type="text/css">        table      {      border-collapse:collapse;      }        table, td, th      {      border:1px solid black;      }        </style> 

............................................................................................................................................................................................................

  表格table        <table>            <th colspan="2">这是表头</th>         <tr>             <td>第一行第一列</td>             <td>第一行第二列</td>                       </tr>          <tr>             <td>第二行第一列</td>             <td rowspan="2">第二行第二列</td>                        </tr>          <tr>              <td>第三行第一列</td>           </tr>           <tr>              <td colspan=”2“>第四行第一列</td>           </tr>         </table> 

rowspan：跨行合并，上下的合并

colspan：跨列合并，左右的合并

HTML基本语法--表单元素

• 表单的作用就是收集数据；由表单元素和表单的控件元素组成；其功能就是负责显示、收集、提交数据到服务器上

• <form>标签通过对应属性规定提交数据的方法和提交位置

  属性名 属性值 描述
  action url 指定接收并处理表单数据的服务器程序的url地址
  method get/post 用于设置表单数据的提交方式
  name 自定义名称 规定表单的名称

• <form action="xxx.php" method="post/get" name="message">表单区域<from>

<input>标签属性

     属性名      属性值        描述                 text        单行文本框                 password    密码文本框                 radio       单选框                 submit      提交按钮      type       reset       重置按钮                 button      按钮                 image       图像形式按钮，src="../../地址"                 file        定义输入字段和‘浏览’按钮，上传文件                             multiple属性决定是否可以选则多个文件                 checkbox    复选框，默认选中checked                 hidden      定义隐藏的输入字段      name                   定义控件的名称      value                  定义控件的默认文本      size       数字         定义控件的宽度      checked    checked     定义选框控件的默认被选中项      maxlength  数字         定义允许输入的最多字符数 

<textarea>文本域

• 双标签，多行文本区域

• rows：行，
• cols：列，每一行显示的最大字节数

  <textarea rows="10" cols="30">这是一个文本框</textarea>

下拉菜单<select>的分组管理

• 分组管理使用<optgroup>标签对选项进行分组，<optroup>是一个双标签，该标签也可以设置一个label属性，

• 表示给这一组选项添加一个分组标签名，分组标签<optgroup>是不能被点击选择的

  代码示例: <select>   <optgroup label="陕西">        <option>西安</option>        <option>安康</option>   </optgroup>   <optgroup label="四川">        <option>成都</option>        <option>绵阳</option>     </optgroup>       </select> 

label标签

• label标签主要作用就是帮助表单元素定义标注，将<label>与表单控件进行绑定后，

• 用户点击<label>内的提示内容是时，浏览器会自动将焦点转到和标签相关的表单控件上

   绑定方法一：         <input type="checkbox" name="class" id="classType"/>     <label for="Chinese">语文</label>   绑定服务二：     <label><input type="radio" name"sex">女</label>     简化绑定