HTML 学习总结-CSDN博客

本文链接：https://blog.csdn.net/qq_52328493/article/details/127493093

超级详细的 HTML 学习笔记，一篇入门系列！！耐心读一遍复习必备！！

目录

简要

认识标签

基本结构

常见标签

1. 注释 ---> ctrl + /

2. 标题标签 ---> h1 h2 h3 h4 h5 h6

3. 段落标签 ---> p

4. 换行 ---> br

5. 格式化标签

加粗 ---> strong 和 b

倾斜 ---> em 和 i

删除线 ---> del 和 s

下划线 ---> ins 和 u

6. 图片标签 ---> img

7. 超链接 ---> a

href ：可以填入不同的内容详细看代码注释

targer：控制打开方式

8. 表格标签 ---> table

几个属性:

几种标签：

合并单元格：

9. 列表标签

10. 表单标签

11. 其他标签

① lable 标签：

② select 标签

③ textarea标签

④ 无语义标签：div & span

编辑

简要

html --- 全程是“超文本标记语言”，学习这个语言，主要就是学习其中的标签。
敲代码软件：vscode
展示浏览器：Chrom

认识标签

标签名放到 <> 中
大部分标签成对出现例如<body> </body>，分别是开始标签和结束标签
少数的标签只有开始标签如 <br>
开始标签可能会有一些属性，例如 id 表示这个标签的标识符

基本结构

vscode中快捷键 ! + enter 能自动生成主体框架

<!DOCTYPE html>
<!-- 表示当前文档是一个html5文件 -->

<html lang="en">
    <!-- lang属性表示当前页面是english语言，有些浏览器会根据这个进行翻译 -->

<head>
    <meta charset="UTF-8">
    <!-- 使用utf-8编码，没有这一行可能会导致乱码 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- viewport 指的是 设备的屏幕上能用来显示我们网页的那一块区域 -->
    <!-- width=device-width,initial-scala=1.0  这里是设置可视区和设备的宽度等宽，并且设置初始缩放为不缩放 -->

    <title>Document</title>
    <!-- Document指的是网站名字 -->
</head>

<body id="ID">
    <!-- id是body的唯一属性，相当于身份标识，后面可以通过id链接跳转到这里 -->

</body>

</html>

常见标签

1. 注释 ---> ctrl + /

ctrl + / 可以快速进行注释，或者取消注释

2. 标题标签 ---> h1 h2 h3 h4 h5 h6

标签分六级 h1 -- h6
    <h1>HTML</h1>
    <h2>简要</h2>
    <h2>认识标签</h2>
    内容： 标签是基本结构

3. 段落标签 ---> p
<p>内容： 标签是基本结构</p>
<p>难度： 很简单</p>
这个是根据浏览器进行排版的
html 内容首尾处的换行空格均无效
html 内容中间的多个空格只相当于一个空格
html 输入换行不会真的换行只是相当于一个空格

4. 换行 ---> br
    <br>内容： 标签是基本结构
    <br>难度： 很简单
相比较于换行 br 两行的行间距小了很多

5. 格式化标签

加粗 ---> strong 和 b

倾斜 ---> em 和 i

删除线 ---> del 和 s

下划线 ---> ins 和 u
    <b>加粗</b>  <i>倾斜</i>  <s>删除线</s>  <u>下划线</u>

6. 图片标签 ---> img

src: 是这个图片的地址，可以是本地地址可以是网络地址
alt : 是替换本文,当图片不能被正常显示的时候,就会替换成这个文字
title：提示文本，鼠标停留在图片上会有提示
width：控制高度
height：控制宽度
border：设置边框，通常使用css设定
    <img src="C:\Users\19396\Desktop\菜的安详.jpg" alt="本地图片：菜的安详" title="菜的安详">
    <img src="https://ru.w3docs.com/uploads/media/book_gallery/0001/02/849d4286475e04155fd5f21861f16f53db95ac72.png"
        alt="网络图片：html5" width="200px" height="100px">

7. 超链接 ---> a

href ：可以填入不同的内容详细看代码注释

    <br><!-- 外部链接：其他网站地址 -->
    <a href="https://www.baidu.com/">百度</a>

    <br><!-- 内部链接：网站内部页面之间的链接，写相对路径即可 -->
    <a href="demo1.html">demo1</a>

    <br><!-- 空链接：herf必须由内容，如果想让其为空，用 #  -->
    <a href="#">这是一个空链接</a>

    <br><!-- 下载链接：href对应的路径是一个文件(可以使用zip文件) -->
    <a href="C:\Users\19396\Desktop\杨和苏歌词简谱.zip">zip压缩包文件</a>

    <br><!-- 网页元素链接：把图片等元素放入a标签中，可以给其添加链接 -->
    <a href="https://www.baidu.com/">
        <img src="https://img.sj33.cn/uploads/202009/7-20092H12GA16.jpg" alt="百度图片链接" width="150" height="100">
    </a>

    <p></p><!-- 锚点链接：可以快速定位到页面的某一个位置 -->
    <a href="#one">第一季</a><!-- 点击这里的 第一季 就可跳转到id为two的段落-->
    <a href="#two">第二季</a><!-- 点击这里的 第二季 就可跳转到id为two的段落-->
    <p id="one">
        第1集剧情<br>
        第2集剧情<br>
    </p>
    <p id="two">
        第1集剧情<br>
        第2集剧情<br>
    </p>

targer：控制打开方式

打开方式默认是_self 新标签页打开：_blank

    <a href="https://www.baidu.com/" target="_blank">百度</a>
    <a href="demo1.html" target="_blank">demo1</a>

8. 表格标签 ---> table

几个属性:

align ：对齐方式，表格的对其，不是表格里内容
border ：边框，1表示有边框(数字越大，边框越粗) ； " " 表示没边框
cellpadding ：内容距离边框的距离默认为 1px
cellspacing ：单元格之间的距离默认为2px
width / height ：设置尺寸
注意这几个属性 vscode 都提示不出来，需要手敲

几种标签：

tr 标签：表示表格的一行
td 标签：表示一个单元格
th 标签：表示表头单元格
thead 标签：表示表格的头部区域（注意和 th 区分，范围比 th 大)
tbody 标签：表格得到主体区域

合并单元格：

跨行合并：rowspan = "n"
跨列合并：colspan = "n"
<table align="center" border="1" cellpadding="1px" cellspacing="2px" width="200" height="100">
        <tr>
            <td colspan="3" align="center">信息统计</td>
        </tr>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>12</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>4</td>
            <td>女</td>
        </tr>
    </table>

9. 列表标签

有序列表： ol li
无序列表： ul li
自定义列表： dl (小标签) dt (小标题) dd (围绕标题说明)上面有几个小标题，下面有几个围绕这个标题来展开的

    <h4>无序列表</h4>
    <ul>
        <li>列表标签</li>
        <li>无序标签</li>
        <li>自定义标签</li>
    </ul>
    <h4>有序标签</h4>
    <ol>
        <li>列表标签</li>
        <li>无序标签</li>
        <li>自定义标签</li>
    </ol>
    <h4>自定义列表</h4>
    <dl>
        <dl>动物</dl>
        <dt>会飞的:</dt>
        <dd>老虎</dd>
        <dd>狮子</dd>
        <dt>四条腿</dt>
        <dd>狗</dd>
    </dl>

10. 表单标签

表单标签是让用户输入信息的重要途径

分成两个部分：

表单域：包含表单元素的区域，重点是 form 标签

form 标签：描述了要把数据按照什么方式，提交到哪个页面中。

表单控件：输入框，提交按钮等，重点是 input 标签

imput 标签：各种输入控件，比如单行文本框、按钮、单选框、复选框

属性：

type ：取值种类很多，button、checkbox、text、file、image、password、radio等
name ：给 input 起个名字，尤其对于单选按钮，具有相同name的才能多选一
value ：input 中的默认值
checked ：默认被选，用于单选按钮和多选按钮
maxlength ：设定最大长度
text---><input type="text"><br>
password---><input type="password"><br>
<input type="radio" name="sex" >男<br>
<input type="radio" name="sex" >女<br>
<input type="checkbox" checked="checked">吃饭<br>
<input type="checkbox" checked="checked">睡觉<br>
<input type="checkbox">打游戏<br>
<input type="button" value="按钮">


<form action="demo7.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

<form action="demo7.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" name="清空">
</form>

<input type="file">

11. 其他标签

① lable 标签：

搭配 input 使用，可以选中相应的单选/复选框，提升用户体验

for 属性：指定当前 lable 和哪个相同的 input 的标签对应（此时点击才有用)
    <label for="male">男</label>
    <input type="radio" name="sex" id="male">

② select 标签

option 属性：之间的文字就是选项
selected="selected" 表示默认
    <select name="" id="">
        <option value="a" >北京</option>
        <option value="b" >上海</option>
        <option value="a" selected="select">郑州</option>
    </select>

③ textarea标签

<textarea name="" id="" cols="30" rows="10">本文内容</textarea>

④ 无语义标签：div & span

这俩就是两个盒子用于网页布局

div 标签 divsion 的缩写，分割 ------ 独占一行，是一个大盒子

span 标签跨度 ------ 不占一行，是一个小盒子

HTML 学习总结

简要

认识标签

基本结构

常见标签

1. 注释 ---> ctrl + /

2. 标题标签 ---> h1 h2 h3 h4 h5 h6

3. 段落标签 ---> p

4. 换行 ---> br

5. 格式化标签

加粗 ---> strong 和 b

倾斜 ---> em 和 i

删除线 ---> del 和 s

下划线 ---> ins 和 u

6. 图片标签 ---> img

7. 超链接 ---> a

href ：可以填入不同的内容 详细看代码注释

targer：控制打开方式

8. 表格标签 ---> table

几个属性:

几种标签：

合并单元格：

9. 列表标签

10. 表单标签

11. 其他标签

① lable 标签：

② select 标签

③ textarea标签

④ 无语义标签：div & span

href ：可以填入不同的内容详细看代码注释