一个学习HTML的笔记

GoodLuck～

已于 2023-10-19 21:08:10 修改

阅读量149

点赞数 6

文章标签： html 前端学习笔记

于 2023-10-17 20:30:59 首次发布

本文链接：https://blog.csdn.net/qq_58047273/article/details/133889016

版权

认识HTML

HTML(HyperText Markup Language)是超文本标记语言，用于网页结构的搭建。要注意的是，HTML不是一种编程语言。

1.HTML的历史版本发展

①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。

②HTML 2.0：1995年11月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。

③HTML 3.2：1997年1月14日，W3C推荐标准。

④HTML 4.0：1997年12月18日，W3C推荐标准。

⑤HTML 4.01：1999年12月24日，W3C推荐标准。

⑥HTML 5：2014年10月，HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力。

2.HTML的特点

① 简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。

② 可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。

③ 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

④ 通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

3.HTML文件结构

<!-- 文档头信息 -->
<!-- H5标准网页声明 -->
<!DOCTYPE html>
<!-- 属性lang为language的缩写，"en"代表英语，"zh-CN"代表中文 -->
<!-- 
	html根标签，一个页面中有且只有一个根标签，网页中的所有内容都应该写在html根标签中
-->
<html lang="en">

<!-- head标签，该标签中的内容，不会在网页中直接显示，它用来帮助浏览器解析页面的 -->
<head>
  <!--meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介 -->
  <!-- 
        字符编码，浏览器会根据字符编码进行解析
        常见的字符编码有：gb2312、gbk、unicode、utf-8。
  -->
  <meta charset="UTF-8">
  <!-- 
        viewport 设备的屏幕
        width=device-width width属性控制设备的宽度。
        initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
     -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 浏览器选项卡上的名字 -->
  <title>Hello HTML</title>
</head>

<!--
	body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写
-->
<body>
  <!-- 在body里的内容显示在浏览器的视图区 -->
</body>
</html>

4.HTML文件后缀

HTML文件有两种后缀，分别是.html和.htm，现在最常用的是.html。为什么.htm也可以作为HTML文件的后缀呢？因为以前计算机常用的操作系统是DOS，这个操作系统只支持文件后缀长度为3位，所以就有了htm这个文件后缀用来兼容DOS系统，现在的Windows系统没有这一问题，所以使用htm和html均可。

5.块级元素和行内元素

① 块级元素

块级元素有：html body div p h1-h6 section form ul ol li table tr td th 等

特点：

a.独占一行

b.宽度默认100%

c.高度默认由内容撑起

d.可以通过css属性设置宽高

② 行内元素

行内元素有：span a em b i sub sup cite strike mark strong input 等

特点：

a.与其他行内元素共享一行

b.高度默认由内容撑起

c.通过css属性设置宽高不生效

d.设置上下外边距不生效设置左右外边距生效

6.基础标签的使用

① h标签标题标签一共有六级标签 h1~h6

<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>

② p标签段落标签

③ br标签换行标签

④ hr标签在页面中生成分割线

⑤ img标签图片显示标签

        <!-- src:设置图片的路径
             alt:图片加载失败的描述
             width:设置图片的宽度
             height:设置图片的高度
             title：鼠标悬停的时候，描述框中显示的内容
         -->
        <img src="image.jpg" width="82px" height="82px" alt="图片加载失败" title="这是一张图片">

⑥ a 标签

作用：

a.打开一个外部链接网址

b.打开外部页面

c.锚点，通过a标签跳转到指定的位置

  <!-- 
    href:目标界面的网页地址
    target:页面打开方式 _blank(新窗口打开) _self(在当前窗口打开页面)默认
    title: 鼠标悬停的时候，描述框中显示的内容
  -->
<a href="https://www.csdn.net/" target="_blank" title="csdn">csdn官网</a>

⑦ em 标签着重显示文字内容会显示为斜体

⑧ strong 标签着重显示文字内容会加粗显示

⑨ -b 标签加粗

⑩ -i 标签斜体

⑪ -u 标签下划线

⑫ span 文字标签

7.音视频标签

①视频标签 video



    <!-- 视频第一种格式-->
      <video loop poster="./音视频/ad7.jpeg" src="./音视频/1.mp4" controls  muted></video>

    <!-- 视频第二种格式-->
      <video controls autoplay>
        <source src="./音视频/1.mp4" type="video/mp4">
      </video>
    属性：
    <!-- 
          controls 控制条 
          autoplay 自动播放
          muted 静音 
          poster 封面
          loop 循环播放 
    -->

②音频标签 audio

<!-- 音频格式-->
    <audio width="400px" controls src="./音视频/1.mp3"></audio>
    
    属性：
    <!-- 
          controls 控制条 
          autoplay 自动播放
          muted 静音 
          loop 循环播放 
    -->

8.列表

①无序列表

<!-- 无序列表 type 可以更改列表标志项 -->
    <ul type="square">
        <li></li>
        <li></li>
        <li></li>
    </ul>

②有序列表

<!-- 有序列表 type 可以更改列表标志项 -->
    <ol type="I">
        <li></li>
        <li></li>
        <li></li>
    </ol>

③定义列表

<!-- 定义列表 dl定义列表 dt定义列表的标题 dd定义列表的描述 -->
    <dl>
        <dt>标题</dt>
        <dd>描述</dd>
        <dt>标题</dt>
        <dd>描述</dd>
    </dl>

9.表格

<!-- 一个table就是一个表格
    表格属性：
        tr 行
        td 列
        th 表头
        border 表格边框的厚度 默认为0
        align 水平方向的对齐方式 left(默认) right center

        cellspacing 单元格边框之间的距离/表格外边距
        cellpadding 单元格边框与内容的距离/表格内边距

        bgcolor 背景色
        background 背景图片

        tr/td 属性：
        valign 单元格内容在垂直方向的对齐方式 top middle(默认) bottom
        align 水平方向的对齐方式 left(默认) right center
        跨行合并 rowspan='n' 合并n个单元格
        跨列合并 colspan='n' 合并n个单元格
    -->

    <table border="1" width="300px" height="200px" align="center" cellspacing="0" cellpadding="30" bgcolor="cyan">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>20</td>
            <td>男</td>
        </tr>
    </table>

10.表单

<!-- 所有的表单元素都要写在表单标签中 action属性就是表单提交的服务器地址 -->
    <form action="">
        <!-- 明文输入框 value属性值，不写内容，默认为用户在输入框里输入的内容 name属性名-->
        <!-- 只读 readonly -->
        用户名：<input type="text" name="username" value="只读" readonly><br>

        <!-- 暗文输入框 -->
        密码：<input type="password"><br>

        <!-- 单选按钮 name属性名 value属性值-->
        性别：男<input type="radio" name="gender" value="男"> 女<input type="radio" name="gender" value="女"><br>
        <!-- label 点击文字可以使表单元素聚焦 
            方法：
            1.将表单元素直接使用label标签包裹
            2.使用label标签属性for for属性和id属性值一致 文字写在label中
        -->
        <label>
            男 <input type="radio" name="gender" value="男">
        </label>
        <label for="female">女</label>
        <input type="radio" name="gender" value="女" id="female"><br>

        <!-- 复选框 默认选中 checked-->
        爱好：
        游泳：<input type="checkbox" name="hobbies" id="" value="swim">
        篮球：<input type="checkbox" name="hobbies" id="" value="basketball">
        足球：<input type="checkbox" name="hobbies" id="" value="football" checked><br>

        <!-- 下拉框
        multiple将所有下拉选项展开
        optgroup分组
        -->
        城市：
        <select name="city" id="" multiple>
            <optgroup label="一线城市">
                <option value="shanghai">上海</option>
                <!-- 默认选中 selected -->
                <option value="biejing" selected>北京</option>
                <option value="hangzhou">杭州</option>
            </optgroup>
            <!-- 禁用表单元素 disabled -->
            <optgroup label="二线城市" disabled>
                <option value="shanghai">上海</option>
                <option value="biejing">北京</option>
                <option value="hangzhou">杭州</option>
            </optgroup>
        </select><br>

        <!-- 多行文本框 默认占了30列10行-->
        <textarea name="" id="" cols="30" rows="10"></textarea><br>

        <!-- 按钮 -->
        <input type="button" value=""><br>

        <!-- 图片 -->
        <input type="image" src="" alt=""><br>

        <!-- 附件上传 -->
        <input type="file" name="" id=""><br>

        <!-- 重置 -->
        <input type="reset" value=""><br>

        <!-- 提交 -->
        <input type="submit" value=""><br>

        <!-- 隐藏域 页面不显示表单元素，但依然可以向服务器提交表单元素-->
        <input type="hidden" name="">
    </form>

11.H5新增特性

①语义化标签

header	定义了文档的头部区域
footer	定义 section 或 document 的页脚
nav	定义导航链接的部分
article	定义页面独立的内容区域
section	定义文档中的节