HTML总结

Posted 2022-02-06 何以祝你

html是超文本标记语言，标记语言是一套标记标签，HTML使用标记标签来描述网页。

一、HTML常用标签

1.常用标签

（1）标题标签<h1>~<h6>

        语义：作为标题使用，根据重要性递减。

（2）段落标签<p></p>和换行标签<br/>

（3）文本格式化有：加粗<strong></strong><b></b>、倾斜<em></em><i></i>、下划线<ins></ins><u></u>、删除<del></del><s></s>

（4）<span></span>用于对文档中的行内元素进行组合，一行多个。

（5）盒子模型<div></div>标签，一行一个，常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

2.图像标签

（1）图片标签<img src="地址/图片名.jpg" alt="替换文本">

（2）音频标签<audio src="地址/音频.mp3" controls autoplay loop muted></audio>

        涉及布尔属性：

        a.controls属性：规定浏览器应该为音频提供播放控件(播放、暂停、定位、音量、全屏切换、字幕、音轨),如果设置了该属性，则规定不存在作者设置的脚本控件。

        b.autoplay属性：音频就绪后自动播放。

        c.loop属性：在音频结束时重新播放。

        d.multed属性：规定音频（视频）输出时应该被静音。

（3）视频标签：<video src="地址/视频名.mp4" controls></video>

        相对路径（vs code打开目录文件夹）：以引用文件所在位置为参考基础而建立出的目录路径

        a.同一级路径<img src="baidu.gif/>

        b.下一级路径<img src = "imges/baidu.gif/>     

        c.上一级路径<img src = "../baidu.gif"/>       

3.超链接标签

 （1）链接的语法格式：<a href="跳转目标" target="目标窗口弹出方式">文本</a>

           其中href用于指定链接目标url地址，target指定链接页面打开方式（_self为当前窗口且是默认，_blank为在新窗口打开）。

 （2）链接分类：

        a.外部链接

        b.内部链接：href处填写文件位置加html文件爱你名称，如<a href="gongsijianjie.html">公司简介</a>

        c.空链接

        d.下载链接：地址链接的是 文件.exe或者是zip等压缩包形式，如<a href="img.zip">下载文件</a>

        e.网页元素链接

        f.锚点链接：定位到某一位置，在链接文本的href属性中，设置属性为#id名的形式                

4.表格标签

   表格的主要作用：展示数据

（1）基本语法：

<table>定义表格
    <thead>标签表格的头部区域，内部必须有tr标签
        <tr>在table中定义行
          <th>表头</th>
          <td>单元格内的文字</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

（2）表格属性：align、border、cellpadding、cellspacing、width、height等。

（3）合并单元格：

        a.跨行合并：rowspan="合并单元格行数"。（从设置该属性的行开始于下面的单元格合并）

        b.跨列合并：colspan="合并单元格列数"

5.列表标签

（1）无序列表：<ul><li></li></ul>

（2）有序列表：<ol type='A'><li></li></ol>

        ol的属性：reversed="reserved"（降序）、start="数字"、type="1 A a I i"(规定标记类型)

（3）自定义列表：<dl><dt><dd></dd></dt></dl>

6.表单标签（收集用户信息）

   表单组成：表单域、表单元素、提示信息。

（1）表单域：

   <form action="demo.php" method="POST" name="name1">
   </form>
   <!--action处写url地址，method是提交方式有get/post两种值-->

（2）表单元素：

        a. input输入表单元素：<input type="属性值">

            属性：type、value、checked、maxlength等，HTML5新增了很多属性

            type属性的值：button、checkbox多选、radio单选、file、hidden、image、password、reset重置、submit提交、text

        b.<label>标签：绑定表单元素      

   <!--将文字与input标签的按钮绑定-->
   <label for="text"> 用户名:</label> <input type="text" id="text" >
   <input type="radio" id="nan" name="sex"> <label for="nan">男</label>
   <input type="radio" id="nv"  name="sex"> <label for="nv">女</label>

        c.select下拉表单元素                                                                                        

    <select>
        <option>山东</option>
        <option>北京</option>
        <option selected="selected">火星</option>
    </select>

        d.textarea表单元素：<textarea cols="50" rows="5">文段</textarea>