前端基础——HTML(二)

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">
• 子集查找：目标文件在与HTML文件同一级的文件夹里面，这时就需要先找文件夹的名称，
  然后通过关闭符号/进入文件夹查找里面的文件
  
  <img src="img/picture.jpg">
• 上级查找：目标文件在HTML文件所在的文件夹的更上一级，需要跳出当前文件夹到上一级，路径则利用
  
      &nbsp ../表示跳出一级，若跳出多级，写多次../ 直到找到文件

• 绝对路径

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

音频控制条属性

• 音频加载后不会自动显示播放器的控制条，设置controls属性值为conntrols即可
  
  <audio src=""music.mp3" controls="controls">

视频标签

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

超级链接标签

• a 全称anchor，锚的意思，为双标签，<a>标签在指定的位置添加链接，提供用户进行点击和跳转
• <a>标签可以实现两种跳转：跨页面跳转、页面内跳转
• herf超文本引用，用于规定链接的目标地址
  
  属性值：链接目标的路径地址，可以使用相对路径或网址形式的绝对路径
  属性值：链接目标的路径地址，可以使用相对路径或网址形式的绝对路径
               #：单独的一个#符号，代表可以跳转到页面的top顶部，可以用于制作返回顶部。
• 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>

• 禁止文本框被拖拽的方法：在css样式中设置 resize:none;属性。

下拉菜单<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>
      简化绑定