超详细的HTML学习笔记：语法特点、骨架结构、基本标签及其属性（附代码示例）

已于 2023-06-11 17:19:20 修改
阅读量978 收藏 10
点赞数
文章标签： html 前端 学习 笔记
于 2023-06-04 09:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbcbjtlhmjq/article/details/131025441
版权

作者想先说一点废话：这篇文章是作者通过学习动力节点、黑马程序员的两套不同的HTML课程整理出的学习笔记，融合了两套课程的知识点，耗费了372行代码（加代码注释），希望能帮到大家。HTML只是前端学习的开端，前端学习路漫漫，愿大家学习前端不迷路。

目录

一、HTML标签使用及语法特点

二、骨架结构

三、注释

四、标题

五、水平线

六、段落标签

七、换行

八、文本格式化标签

九、路径

十、图片

十一、音频

十二、视频

十三、超链接

十四、列表（分为有序列表、无序列表、自定义列表）

1、无序列表

2、有序列表

3、自定义列表 

十五、表格 

十六、表单 

1、form标签

2、文本框

3、密码框

4、单选框

5、复选框

6、下拉菜单

7、文本域

8、文件上传

9、按钮

10、隐藏域

十七、表单预览效果优化：表格+表单

十八、字符实体

十九、页面布局：div和span简单介绍

一、HTML标签使用及语法特点

HTML基本标签：

        双标签：<标签 属性名="属性值" 属性名="属性值" 属性名="属性值"……>包括的内容</标签>

        单标签：<标签 属性名="属性值" 属性名="属性值" 属性名="属性值"……>

一般来说，各个标签之间可以相互嵌套

HTML语法松散不严谨，不区分大小写(BODY=body=BOdy)，不区分单引号和双引号（甚至不写引号都没事）

使用width、height标签时：可加单位（px：像素）也可不加，也可以使用百分数（表示占整个屏幕宽度或高度的几分之几）  一般有长和宽的都可使用width和height标签（图片、视频、表格等）

使用默认浏览器打开网页：Alt+B  使用其他浏览器打开网页：Alt+Shift+B

二、骨架结构

VSCode中，按下快捷键!+Enter可生成html的基本骨架，代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

三、注释

VSCode注释快捷键：Ctrl+/

<!-- 我是注释 -->

四、标题

<!-- 标题 -->
    <h1>标题一</h1>
    <h2>标题二</h2>
    <h3>标题三</h3>
    <h4>标题四</h4>
    <h5>标题五</h5>
    <h6>标题六</h6>

浏览器预览效果

五、水平线

 color：一般使用CSS设置颜色等样式
 width：30%：水平线长度占整个屏幕宽度的30%  px：像素

<!-- 水平线 -->
    <hr>
    <hr color="blue" width="30%">
    <hr color="red" width="70px">

六、段落标签

<!-- 段落标签 -->
    <p>《瓦尔登湖》共由18篇散文组成，在四季循环更替的过程中，详细记录了梭罗内心的渴望、冲突、失望和自我调整，以及调整过后再次渴望的复杂的心路历程，几经循环，直到最终实现为止。表明了作者用它来挑战他个人的、甚至是整个人类的界限。但这种挑战不是对实现自我价值的无限希望，而是伤后复原的无限力量。
    </p>

    <p>在《经济篇》中，作者描述了自己开始自给自足的生活，并叙述了与农夫和邻里的交往。正是在这种亲身体验与交往中，作者了解到农民生活的艰难，批判了那些富人奢侈的生活，认为“大多数的奢侈品，大部分的所谓生活的舒适，非但没有必要，而且对人类进步大有妨碍”。
    </p>

浏览器预览效果

七、换行

<!-- 换行 -->
    <br>

八、文本格式化标签

两种方式在浏览器上预览效果一样。但第二种有突出强调的作用（给你的其他程序员小伙伴看的）

<!-- 文本格式化标签 -->
  
    <b>文字加粗</b>
    <strong>文字加粗</strong>

    <i>文字倾斜</i>
    <em>文字倾斜</em>

    <u>下划线</u>
    <ins>下划线</ins>

    <s>删除线</s>
    <del>删除线</del>


    <!-- 右上角加字 -->
    10<sup>2</sup> <!-- 10的二次方 -->
    <!-- 右下角加字 -->
    a<sub>1</sub> <!-- a的右下角下标为1 -->

浏览器预览效果

九、路径

路径：相对路径和绝对路径

        使用相对路径的同级目录时，先输入./  VSCode会自动提示该同级目录中的各个文件名

        使用相对路径的上级目录时，使用../返回上一级目录，若返回两次，则用../../

十、图片

src：图片路径

alt：替换文本，当图片加载失败时，才显示alt的文本

title：提示文本，当鼠标悬停在图片上的时候，才显示的文本

width和height：设置图片的宽度和高度

width和height:如果只设置width和height的其中一个，另一个没设置的会自动等比缩放（此时图片不会变形）

如果同时设置了width和height两个，若设置不当图片可能会变形

<img src="./142432d5sydmb1kn5y2jbs.jpg" alt="图片加载失败！" title="电影《驯龙高手》" width="500">

十一、音频

src:音频路径

controls：显示播放的控件

autoplay：一打开网页就自动播放（部分浏览器不支持该功能，因为一打开网页就自动播放容易吓到用户）

loop：循环播放

<audio src="./周杰伦 - 等你下课(with 杨瑞代)_MP3.mp3.amux.mkv" controls loop></audio>

浏览器预览效果

十二、视频

视频属性和音频属性一样

src：视频路径

controls：显示播放的控件

autoplay：一打开网页就自动播放（部分浏览器不支持该功能，因为一打开网页就自动播放容易吓到用户。谷歌浏览器可用autoplay配合muted实现静音播放）

loop：循环播放

width和height：设置视频的宽度和高度

width和height:如果只设置width和height的其中一个，另一个没设置的会自动等比缩放（此时视频不会变形）

如果同时设置了width和height两个，若设置不当视频可能会变形

<video src="./VideoEditingOperation.mp4" controls loop autoplay muted width="1000"></video>

十三、超链接

href：目标网页的地址

开发网站的初期，我们可能还不知道跳转的地址，href的值写#，#表示空地址

target：

        _self：默认值，在当前窗口中跳转（覆盖原网页）

        _blank：在新窗口中跳转（保留原网页）

<a href="http://www5.baidu.com/" target="_blank">传送门：传送到百度</a>

浏览器预览效果

十四、列表（分为有序列表、无序列表、自定义列表）

1、无序列表

注：ul标签只能包含li标签，li标签可以包含任意内容（一般再次嵌套ul）

type：

        disc：默认值，实心圆

        circle：空心圆

        square：实心正方形

<ul type="circle">
        <li>
            中国
            <ul type="disc">
                <li>北京</li>
                <li>上海</li>
                <li type="square">广州</li>
                <li type="square">深圳</li>
            </ul>
        </li>
        <li>美国</li>
        <li>英国</li>
    </ul>

浏览器预览效果

2、有序列表

注：ol标签只能包含li标签，li标签可以包含任意内容（一般再次嵌套ol）

<ol>
        <li>
            中国
            <ol>
                <li>北京</li>
                <li>上海</li>
                <li>广州</li>
                <li>深圳</li>
            </ol>
        </li>
        <li>美国</li>
        <li>英国</li>
    </ol>

 浏览器预览效果

3、自定义列表 

dl：自定义列表的整体，用于包裹dt/dd标签

dt：自定义列表的主题

dd：自定义列表针对主题的每一项内容

dd会显示缩进效果

dl只允许包含dt/dd标签，dt/dd可以包含任意内容

<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>
</dl>

浏览器预览效果

十五、表格 

table：表格整体，可包含多个tr

tr：表格每行，可包含多个td

td：表格单元格 ，可用于包裹内容

th：表头单元格，通常用于表格第一行，默认居中对齐，默认文字加粗（使用方法和td一样）

caption：表格大标题，默认在表格整体顶部居中位置显示

width和height：设置表格的宽度和高度

rowspan：纵向合并单元格，属性值为所合并单元格的个数。只保留最左的，删除其他

colspan：横向合并单元格，属性值为所合并单元格的个数。只保留最上的，删除其他

align：center属性值：设置表格整体居中或文字居中

表格结构标签（了解即可）

        thead：表格头部

        tbody：表格主体

        tfoot：表格底部

        表格结构标签用于包裹tr标签

        表格结构标签可省略不写，因为写与不写使用浏览器预览效果一样，但是使用表格结构标签可使表格结构更加清晰，方便浏览器进行编译

<table align="center" border="1" width="50%" height="30%">
        <caption>员工信息管理</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>出生年份</th>
            </tr>
        </thead>
        <thead>
            <tr align="center">
                <td>马嘉祺</td>
                <td rowspan="2">男</td>
                <td>2002</td>
            </tr>
            <tr align="center">
                <td>白敬亭</td>
                <td>1993</td>
            </tr>
            <tr align="center">
                <td>杨幂</td>
                <td>女</td>
                <td>1986</td>
            </tr>
        </thead>
    </table>

浏览器预览效果

十六、表单 

表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址

action属性和超链接的href属性一样，都可以向服务器发送请求（request）

W3C的HTTP协议规定，表单提交数据给服务器的格式是：action?name=value&name=value&name=value&name=value……

重点强调：表单写了name属性的，一律会提交给服务器。当name没有写的时候，该项不会提交给服务器

但是当value没有写的时候，value的默认值是空字符串""，空字符串会被提交给服务器

文本框和密码框的value不需要程序员写，因为用户输入什么，value就是什么

1、form标签

form标签用于包裹表单中的其他标签（类似于表格中的table标签）

action：表单所提交的后端服务器的地址

method：

        get：默认值，数据提交格式会在地址栏上显示出来

        post：数据提交格式和get一样，但不会在地址栏上显示出来

<form action="#" method="post">包裹的其他标签</form>

2、文本框

maxlength="12"允许输入的最大字符数为12

minlength="6"允许输入的最小字符数为6

账号：<input type="text" name="usersname" placeholder="请输入手机号/邮箱" maxlength="12" minlength="6">

浏览器预览效果

3、密码框

密码：<input type="password" name="userspassword" placeholder="请输入密码" maxlength="12" minlength="6">

 浏览器预览效果

4、单选框

单选框和复选框配合使用label能使用户体验感更好，label的作用是绑定内容与表单标签的关系

性别：<label><input type="radio" name="sex" value="male" checked>男</label> <!-- checked：默认选中 -->
<label><input type="radio" name="sex" value="female">女</label>

浏览器预览效果

5、复选框

兴趣爱好：<label><input type="checkbox" name="habits" value="code">敲代码</label>
        <label><input type="checkbox" name="habits" value="night">熬夜</label>
        <label><input type="checkbox" name="habits" value="hair">掉头发</label>

 浏览器预览效果

6、下拉菜单

学历：<select name="education">
            <option value="primary">初中及以下</option>
            <option value="senior">高中</option>
            <option value="undergraduate" selected>大学本科</option> <!-- selected：默认选中 -->
            <option value="graduate">研究生</option>
            <option value="master">硕士</option>
            <option value="doctor">博士</option>
        </select>

 浏览器预览效果

7、文本域

cols：宽度（值为10表示10个字的宽度）

rows：长度

实际开发中针对于样式效果推荐用CSS设置

<textarea cols="50" rows="10"></textarea>

浏览器预览效果

8、文件上传

<input type="file" multiple> <br><br> <!-- multiple：允许选择多个文件 -->

浏览器预览效果

9、按钮

<input type="submit" value="登录"> <!-- 这行代码等效于：<button type="submit">登录</button> -->
        <input type="reset" value="清空"> <!-- 这行代码等效于：<button type="reset">清空</button> -->
        <input type="button" value="我是一个没有功能的按钮">
        <!-- botton属性值：没有实际功能的按钮，需配合javascript使用 -->
        <!-- 代码等效于：<button type="button">我是一个没有功能的按钮</button> -->

浏览器预览效果

10、隐藏域

网页上看不到，但提交表单的时候会自动提交给服务器

适用于：不想让用户看到，但又必须提交给服务器的

<input type="hidden" name="haha" value="heihei">

十七、表单预览效果优化：表格+表单

为了使表单更加好看，我们可以表单标签放进表格中

<form>
        <table align="center" width="300" height="200">
            <tr>
                <td>账号：</td>
                <td><input type="text" name="usersname" placeholder="请输入手机号/邮箱"></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name="userspassword" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <label><input type="radio" name="sex" value="male" checked>男</label>
                    <label><input type="radio" name="sex" value="female">女</label>
                </td>
            </tr>
            <tr>
                <td>兴趣爱好：</td>
                <td>
                    <label><input type="checkbox" name="habits" value="code">敲代码</label>
                    <label><input type="checkbox" name="habits" value="night">熬夜</label>
                    <label><input type="checkbox" name="habits" value="hair">掉头发</label>
                </td>
            </tr>
            <tr>
                <td>学历：</td>
                <td>
                    <select name="education">
                        <option value="primary">初中及以下</option>
                        <option value="senior">高中</option>
                        <option value="undergraduate" selected>大学本科</option> <!-- selected：默认选中 -->
                        <option value="graduate">研究生</option>
                        <option value="master">硕士</option>
                        <option value="doctor">博士</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><input type="submit" value="登录"></td>
                <td><input type="reset" value="清空"></td>
            </tr>
        </table>
    </form>

浏览器预览效果

十八、字符实体

&nbsp; <!-- 空格（记住这一个就行） -->
    &lt; <!-- <（小于号） -->
    &gt; <!-- >（大于号） -->
    &amp; <!-- & -->
    &quot; <!-- " -->
    &apos; <!-- ' （IE浏览器不支持） -->

十九、页面布局：div和span简单介绍

1、div和span都可以称为“图层”，图层是为了更好地布局

2、也可以将div和span理解为盒子，盒子的位置可以自己定，盒子里面可以放东西，也可以再放盒子

3、div与span的不同点是：div独占一行，即在网页中，一行只能有一个div，但一行可有多个span

<div>div独占一行，即在网页中，一行只能有一个div</div>
<div>div独占一行，即在网页中，一行只能有一个div</div>
<span>但一行可有多个span</span>
<span>但一行可有多个span</span>

浏览器预览效果

 

早八睡不醒午觉睡不够的程序猿
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
PHP学习笔记（一）：基本语法之标记、空白、和注释
10-24
主要介绍了PHP学习笔记（一）：基本语法,本文讲解了PHP 标记、PHP 注释、PHP 空白三个最基本的语法,需要的朋友可以参考下
Html的简介和基本骨架
qq_60498436的博客
10-02 1207
Html的介绍和基本骨架
HTML简介和基本骨架
在夜里行走的博客
12-26 706
HTML简介和基本骨架
前端之HTML——网页的骨架！！
最新发布
m0_63865649的博客
04-01 1519
HTML（超文本标记语言）是一种用于创建网页的标记语言。它由一系列标签组成，这些标签描述了网页中的内容结构和排版方式。HTML通过标签来定义文本、图像、链接、多媒体等内容的呈现方式，并且可以嵌套使用，以创建复杂的页面布局。标签（Tags）：HTML中的基本构建块，用于定义页面上的各种元素，如段落、标题、链接等。元素（Elements）：由开始标签、结束标签和内容组成，形成完整的HTML元素。属性（Attributes）：用于提供关于HTML元素的附加信息，如ID、类别、样式等。
HTML基础介绍和基础骨架
qq_34954669的博客
04-19 572
HTML 注释HTML 注释的格式如下：我是 html 注释段落标签段落，是英语“paragraph“缩写。HTML标签是分等级的，HTML将所有的标签分为两种：文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。水平线标签换行标签和标签div和span是非常重要的标签，div的语义是division“分割”；
html常见标签
weixin_57100704的博客
12-16 352
p标签和span标签的区别是：p标签会自动换行，而span标签不会自动换行。一般短的语句可以用span标签包裹，长点的用p标签包裹。被包围在pre标签中的文本通常会保留空格和换行符，而文本也会呈现出等宽字体。书写规范，一个页面只允许出现一个h1标签，若重复出现网页会分不清主次内容。标签的内容将会在当前字符高度的一半为基准线的下/上方，字体大小会小一点。都是用于加粗文字的，二者区别是：strong标签是为了突出重点。网页的身体标签，所有的网页内容都放在里面，存放各种标签。br标签和hr标签都是但标签。
html基础知识
zwj_zny的博客
03-01 1415
HTML粗略总结
python学习笔记：字典的使用示例详解
01-21
复制代码 代码如下:items=[(‘name’,’zhang’),(‘age’,42)]d=dict(items)d[‘name’] len(d):返回项的数量d[k]:返回键k上面的值。d[k]=v:将k对应的值设置为k。del d[k]:删除字典中的这一项。k in d：检查d中是否...
详解Angular2学习笔记之Html属性绑定
12-29
基本HTML属性 ]=tableColspan> Css 类绑定 <!-- 第一种情况 class 类全部替换 --> ]=divClass>CSS 类绑定，[class] 全部替换的例子 <!-- 第二种情况 替换 class 类的部分属性 --> ]=isSpcial>CSS 类...
PHP学习笔记（二） 了解PHP的基本语法以及目录结构
10-25
主要介绍了解PHP的基本语法以及目录结构,需要的朋友可以参考下
HTML5 video标签（播放器）学习笔记（一）:使用入门
11-21
近有在学习html5中video标签（播放器）的使用，这里做一些学习笔记，方便自己查阅和记录，本文是第一篇，将介绍的是使用该标签初始化该做的哪些工作。 网上的教程其实也不少了 w3cschool里面的最为简单而详细，那么...
HTML的基本骨架
weixin_72431184的博客
05-14 81
HTML的基本骨架
常用html标签及其属性
weixin_53988377的博客
07-16 1万+
网页的基本结构文档类型声明标签文档标记标签文档的头部标签文档的主体标签。
常用HTML标签及属性总结
weixin_52960369的博客
05-05 1880
HTML（HyperTextMarkupLanguage），是一种用于创建网页的标准标记语言。它通过将文本、图像、音频、视频等内容结合起来，形成网页的结构，使得网页呈现出风格和排版的样式。HTML不是一种编程语言，而是一种标记语言，用于描述和定义网页的结构和内容。
html常用标签及其属性
weixin_72724407的博客
07-17 7168
超文本标记语言（HyperTextMarkupLanguage）不是一种编程语言，而是一种标记语言，描述网页的语言。HTML使用标签描述网页中图片、文本、音乐、视频、超链接等。
05 - HTML基本结构
m0_48670609的博客
12-30 2324
HTML基本结构
HTML常用基本标签
weixin_33701251的博客
01-14 365
基本结构标签: <HTML>,表示该文件为HTML文件 <HEAD>,包含文件的标题,使用的脚本,样式定义等 <TITLE>---</TITLE>,包含文件的标题,标题出现在浏览器标题栏中 </HEAD>,<HEAD>的结束标志 <BODY>,放置浏览器中显示信息的所有标志和属性,其中内容在浏览...
HTML标签属性大全
热门推荐
weixin_57614141的博客
02-22 1万+
什么是HTML 2 HTML：超文本标记语言（Hyper Text Markup Language） HTML不是一种编程语言，而是一种标记语言，描述网页的语言 HTML使用标签描述网页中图片、文本、音乐、视频、超链接等 HTML基本标签: 标题标签<h1>~<h6> 段落和换行标签<p>…</p>、<br/> 水平线标签 <hr/> 斜体… 字体加粗<stron...
HTML基本骨架与编辑器选择
修行的凡人的博客
11-15 254
自我学习得出的HTML基本骨架与编译器选择知识
《Html》前端学习笔记
04-12
HTML 是什么 超文本标记语言，一个网页在不同的地方使用不同的标签去标记 一个网页的组成：HTML+CSS+JavaScript（JS、JQuery） HTML：结构；网页显示什么内容由 HTML 来决定 CSS ：层叠样式；决定这个网页好不好看（颜色、大小、尺寸） Javascript：行为、动态 HTML 的基本结构： <!DOCTYPE html>声明文档类型 ，doctype 不区分大小写，没有 5 <html>：是整个文档的根节点，它包含了两个子节点 <head>：主要描述文档设置信息， 比如字符集（有 utf-8） ，标题 title <body>：是文档的主体，需要呈现的内容

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值