HTML学习笔记

Moshengls_

已于 2023-11-28 23:34:02 修改

阅读量893

点赞数 27

文章标签： html 学习笔记

于 2023-11-26 19:54:31 首次发布

本文链接：https://blog.csdn.net/Moshengls_/article/details/134631988

版权

HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
HTML是一种标记语言，使用标签来描述网页

HTML基本骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

其中：

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素，向搜索引擎表示该页面是html语言。

其"lang"的意思就是“language”，语言的意思，而“en”即表示english，表明语言为英文网站你的页面如果是中文页面，可将其改为<html lang="zh">

这句话就是让搜索引擎知道，你的站点是中文站，对html页面本身不会有影响

<head> 元素包含了文档的元（meta）数据。

如定义网页编码格式为 utf-8（由于在大部分浏览器中直接输出中文会出现乱码，所以要在头部将字符声明为UTF-8

<title> 元素描述了文档的标题,即显示在标签页上的文字
<body> 元素包含了可见的页面内容，网页的基本内容都写在<body>标签内

HTML基本标签

注释

<!--  注释内容 -->

注释标签及内容不会显示到网页

标题标签

   <!-- 标题标签 -->(最多到h6)
   <h1>这是第一个标题</h1>
   <h2>这是第二个标题</h2>
   <h3>这是第三个标题</h3>
   <h4>这是第四个标题</h4>
   <h5>这是第五个标题</h5>
   <h6>这是第六个标题</h6>

标题标签自带加粗效果

段落标签

    <p>段落内容</p>

span标签

并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性。与 <div> 元素很相似，但 <div> 是一个块元素而 <span> 则是行内元素

   <!-- span标签 -->
   <span>这是一个span标签</span>

换行标签

   <!-- 换行标签 -->
   <br>

换行标签可强制换行
在 HTML 中将元素写为 <br />。

水平线标签

   <!-- 水平线标签 -->
   <hr>

在 HTML 中将元素写为 <hr />。

加粗标签

   <!-- 加粗 -->
   <b>加粗内容</b>
   <strong>加粗内容</strong>

下划线标签

   <!-- 下划线 -->
   <u>需加下划线的内容</u>
   <ins>需加下划线的内容</ins>

删除线标签

   <!-- 删除线 -->
   <s>需加删除线的内容</s>
   <del>需加删除线的内容</del>

倾斜标签

   <!-- 倾斜 -->
   <i>需倾斜的内容</i>
   <em>需倾斜的内容</em>

图片标签

   <!-- 图片 -->
   <img src="图片路径" alt="图片无法加载时显示的替代文字"
   title="鼠标悬停于图片上时显示的文字" width="图片宽度" height="图片高度">

如果只设置了width或height中的一个，另一个没设置的会自动等比例缩放，此时图片不会变形
如果同时设置了width和heght两个，若设置不当此时图片可能会变形

音频标签

<audio src="音频路径" controls autoplay loop></audio>

controls 显示播放的控件（若音频标签不加此元素，则在网页上看不到音频）
autoplay 自动播放（部分浏览器不支持）
loop 循环播放
音频标签目前支持格式：MP3、Wav、Ogg

视频标签

<video src="视频路径" controls autoplay></video>

controls 显示播放的控件
autoplay 自动播放（谷歌浏览器中需配合muted实现静音播放）
loop 循环播放
视频标签支持格式：MP4、WebM、Ogg

超链接标签

<a href="目标网页路径" target="_blank">链接名字</a>

target属性该属性指定在何处显示链接
1. _self:当前页面加载。（默认）
2. _blank:通常在新标签页打开 -

列表标签

1. <!--无序列表  -->
<!-- ul 表示无序列表整体，用于包裹li标签 -->
<!-- li 表示无序列表的每一项，用于包含每一行的内容 -->
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

2. <!-- 有序列表 -->
<!-- ol 表示有序列表整体，用于包裹li标签 -->
<!-- li 表示有序列表的每一项，用于包含每一行的内容 -->
<ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

3. <!-- 自定义列表 -->
<!-- dl 表示自定义列表的整体，用于包裹dt,dd标签 -->
<!-- dt 表示自定义列表的主题-->
<!-- dd 表示自定义列表的针对主题的每一项内容-->
<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>

  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>

  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>

ul和ol标签中只允许包含li标签
dd前会默认显示缩进效果

表格标签

<!-- 表格标签 -->
<!-- table 表格整体，用于包裹多个tr -->
<!-- tr 表格每行，用于包裹td -->
<!-- td 表格单元格，用于包裹内容 -->
<!-- th 表头单元格，表格中的文字以粗体显示，表格中可不用此标签>

<table border="2" width="600" height="600">
    <!-- border 边框宽度 -->
    <!-- width  表格宽度-->
    <!-- height 表格高度 -->
    <caption><b>优秀学生信息表格</b></caption>
    <thead>
        <tr>
            <th>年级</th>
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <!-- rowspan 跨行合并 -->
        <td rowspan="2">高三</td>
        <th>张三</th>
        <td>100</td>
        <th>三年二班</td>
    </tr>
    <tr>
        <th>赵四</th>
        <td>100</td>
        <td>三年二班</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>评语</td>
        <td colspan="3">你们都很优秀</td>
        <!-- colspan 跨列合并 -->
    </tr>
    </tfoot>
</table>

注：1.<thead><tbody><tfoot> 结构标签使表格内容结构分组，突出不同部分（可省略）
2. <caption>元素展示一个表格的标题，常常作为

的第一个子元素出现
3. rowspan和colspan在合并时，只有一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead,tbody,tfoot)
4.标签的嵌套关系：table>tr>td

表单标签

    一、input标签
    <input type="" >
    type属性：
    text 文本框 
    password 密码框
    radio 单选框
    checkbox 多选框 
    file 文件上传 
    submit 提交 
    reset 重置 
    button 按键，默认无功能，配合js添加功能 

    1.当type是text、password时，常用属性：placeholder
    placeholder:占位符，提示用户输入内容


    2.当type是radio时，常用属性：name、checked
    name:分组，有相同name属性的单选框为一组，一组中同时只有一个可被选中
    checked: 默认选中

    3.当type是checkbox时，常用属性：checked

    4.当type是file时，常用属性：multiple
    multiple:多文件选择

    5.当type是button时
    <input type="submit">提交按钮，点击之后提交数据给后端服务器
    <input type="reset">重置按钮，点击之后恢复表单默认值

    form属性：
    规定input元素所属的表单，此属性值必须等于它所属的form元素的id属性

    formaction属性：
    规定当提交表单时，对输入（数据）进行处理的文件的URL
    注：该属性会覆盖form元素的action属性
        该属性适用于submit和image

注：value在HTML的input中： placeholder 代表占位符，当用户开始输入文字时，占位符会自动消失。 value代表表单元素的默认值，当用户开始输入时，value的值会被覆盖，当用户没有输入内容时，在提交时会默认返回value的默认值。

    二、button按钮标签 同input
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    注：谷歌浏览器中button默认为提交按钮
        button是双标签，更便于包裹其他内容：文字，图片等

    三、select下拉菜单标签
    用于在网页中提供多个选择项的下拉菜单表单控件
    标签组成：
    select 下拉菜单的整体
    option 下拉菜单的每一项
    常见属性：
    selected下拉菜单的默认选中
    eg: 
        <select name="所在城市" id="333">
            <option value="默认" selected>默认</option>
            <option value="上海">上海</option>
            <option value="北京">北京</option>
            <option value="天津">天津</option>
            <option value="郑州">郑州</option>
            <option value="长沙">长沙</option>
        </select>

    四、textare文本域标签
    用于在网页中提供可输入多行文本的表单控件
    常见属性：
    cols 文本域内可见宽度
    rows 文本域内可见高度
    <textarea name="" id="" cols="30" rows="10"></textarea>
    注：右下角可进行拖拽以改变大小

    五、label标签
    常用于绑定内容与表单标签的关系
    使用方法一：1.label标签把内容（如：文本）包裹起来
               2.在表单标签上添加id属性
               3.在label标签的for属性中设置对应的id属性值
    使用方法二：1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来
               2.需要把label标签的for属性删除
    六、语义化标签
    header  网页头部
    nav     网页导航
    footer  网页底部
    aside   网页侧边栏
    section 网页区块
    article 网页文章
    注：以上标签显示特点和div一致，但比div多了不同的语义

注：上述按钮功能实现需要配合form标签使用，用form标签将表单标签包裹起来即可

    <!-- 表单 -->
    <!-- accept-charset 规定服务器可处理的表单数据字符集 -->
    <!-- action 规定当提交表单时向何处发送表单数据 -->
    <!-- enctype  规定在发送表单数据之前如何对其进行编码 -->
    <!-- method   get、post  规定用于发送 form-data 的 HTTP 方法 -->
    <!-- name   规定表单的名称-->


    <form action="" method="get">
    昵称
    <input type="text"  placeholder="昵称"><br><br><br>
    性别
    <input type="radio" name="sex"  value="男">男
    <input type="radio" name="sex" value="女">女<br>
    <br>

   所在城市
        <select name="所在城市" id="333">
            <option value="默认" selected>默认</option>
            <option value="上海">上海</option>
            <option value="北京">北京</option>
            <option value="天津">天津</option>
            <option value="郑州">郑州</option>
            <option value="长沙">长沙</option>
        </select>
        婚姻状况
        <input type="radio" name="婚姻状况" value="未婚">未婚
        <input type="radio" name="婚姻状况" value="已婚">已婚
        喜欢的类型
        <input type="checkbox" name="类型" value="1">1
        <input type="checkbox">2
        <input type="checkbox">3
        <input type="checkbox">4
        <input type="checkbox">5
        <input type="checkbox">6
        <br><br><br>
        自我介绍
        <textarea name="自我介绍" id="" cols="30" rows="10"></textarea>

        <input type="file" multiple name="" id="">
        <input type="">
        <input type="submit" formaction="">
        <label >
            姓名
            <input type="text"  placeholder="请输入您的姓名"><br><br><br>
        </label>
        <label >
            密码
            <input type="password"  placeholder="请输入您的密码"><br><br><br>
        </label>
        <label >
            确认密码
            <input type="password"  placeholder="请再次确认密码"><br><br><br>
        </label>
        <label >
            验证码
            <input type="text"  placeholder="请输入验证码"><br><br>
            <img src="./images/yz.jpg" alt="验证码" title="验证码">
        </label>
        <label >
            <input type="checkbox" name="select">我已阅读并接受
        </label>