html笔记_html 链接由 <a> (锚)标签定义。链接的地址在 href 属性中指定:-CSDN博客

本文链接：https://blog.csdn.net/m0_53450038/article/details/125833544

1.什么是HTML？

1.1 HTML是一种用来描述网页的语言

HTML指的是超文本标记语言（Hyper Text Markup Language）
HTML不是一种编程语言，而是一种标记语言
标记语言是一套标签
HTML使用标记标签来描述网页

1.2 HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML标签通常是尖括号包围的关键词，比如< html >
HTML 标签通常是成对出现的，比如 < b> 和 </ b>，也存在单标签，例如：< input >
双标签中第一个标签是开始标签，第二个是结束标签
开始和结束标签也被称为开放标签和闭合标签

1.3 HTML文档==网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

1.4 HTML基本结构标签

 <html>
       <head>
           <title>**我的第一个网页**</title>
       </head>
       <body>
           ------
       </body>
   </html>

双标签：< html> < /html>

单标签：< br />

< br/> 标签与< p >< / p>标签相比段落间无垂直间隙。

HTML语法规范
①包含关系 ②并列关系
< html>

< head></ head>

< body></ body>
</ html>
HTML基本结构标签
2.1 第一个HTML网页

标签名	定义	说明
< html></ html>	HTML标签	页面中最大的标签，根标签
< head></ head>	文档的头部	注意在head标签中必须设置的标签是title
< title>< / title>	文档的主题	让页面拥有网页标题
< body></ body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面

文档类型声明标签

< !DOCTYPE html>

lang 标签

< html lang=“zh-CN”> lang为language

charset 字符集

< meta charset=“UTF-8”>

UTF-8 被称为万国码，基本包含所有国家所用到的字符

<!DOCTYPE html> 文档声明：告诉浏览器这是一个HTML文件
<html lang="en"> 
<head>
  	元信息：网页的一些辅助信息
    <meta charset="UTF-8"> 
  	http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器MIME 文档头部包含名称/对。当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
    <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>

标签的属性

HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name=“value”。

属性总是在 HTML 元素的开始标签中规定。

HTML链接由< a >标签定义，链接的地址在href属性中指定：

<a href="http://www.baidu.com">this is a link</a>

1.5 HTML的注释

在浏览器中不显示，在源代码中显示的注释

写法(vscode快捷键：ctrl + / 或 shift + alt + a)：

<!-- 注释的内容 -->

2.HTML常用标签

2.1 标题标签

< h1 > - < h6 >

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>...

双标签，一共六个等级
标签语义: head 作为标题，重要性递减
一个标签占一行，字体加粗变大
在一个HTML文档中，只能存在一个h1标签，h1标题最重要
h5、h6不常使用

2.2 段落标签和换行标签

段落标签：< p > ----< /p >

段落对齐 align属性
值：center居中,left,right,justify两端对齐
语义：paragragh 将文字分段
文本会根据浏览器大小自动换行 段落和段落间会有空隙

换行标签 < br/ > 单标签

break缩写打断、换行
段落间无明显空隙，只是简单地开始一行，无垂直间距

注：html5中不在支持< hr/ >有改变外观的属性，可以使用CSS实现。

2.3 文本修饰标签

粗体、斜体、下划线等效果

语义	标签	推荐
加粗	< strong></ strong>或者< b>< /b>	strong
倾斜	< em></ em>或者< i ></ i>	em
删除线	< del></ del>或者< s></ s>	del
下划线	< ins></ ins>或者< u></ u>	ins
上标文本和下标文本	< sup></ sup>和< sub></ sub>

    <p align="center">
        <strong>这是一个需要强调的文本</strong> <br/>
        <em>这是个斜体的文本</em> <br/>
        促销：原价<del>200</del> 现价<ins>130</ins>
    </p>
    <p align="center">
        <!-- 勾股定理 -->
        a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
    </p>
    <p align="center">
        北京著名的高档百货店————<em>赛博购物中心</em>即将闭店。昨天，赛博购物中心总台服务人员表示“<strong>如果手里有购物卡请尽快到店消费</strong>”。据这位服务人员介绍，目前赛博购物中心正在进行清仓大甩卖。<del>特价电视原价3600</del>，<ins>现清仓价只需1300元</ins>
    </p>

vscode技巧：

**ctrl+鼠标左键可以实现多光标 **

ctrl+D可以选中所有同级相同标签

2.4 图片标签与图片属性

在HTML标签中，

< img>标签用于定义html中的图像

< img src = “图像URL” />

image的缩写， src是img标签的必须属性，它用于指定图像文件的路径和文件名。

属性即图像标签的特性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示时出现的文字
title	文本	提示文本，鼠标放到图片上时显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框和粗细

图像标签注意点单标签

图像标签的多个属性必须写在img标签名后面
各个属性之间必有空格分隔，无先后顺序
属性采取键值对的格式，即 key=“value” 属性=“属性值”

图片标签和路径

目录文件夹和根目录：

目录文件夹就是普通的文件夹

打开目录文件夹的第一层是根目录
VSCode打开文件夹、管理文件
相对路径：图片相对于html页面的位置

相对路径符号说明
同一级 ./ 图片文件相对于html文档在同一级< img src=“./im.jpg”/>
下一级 / < img src=“image/im.jpg”/>
上一级 …/ < img src=“…/im.jpg”/>
绝对路径：根目录下的绝对位置，直接到达目标位置，通常从盘符开始

“D:\Web\img\logo.gif”

“http://www.dddd.cn/images/logo.jpg” 复制网页中的图片地址

相对路径	符号	说明
同一级	./	图片文件相对于html文档在同一级< img src=“./im.jpg”/>
下一级	/	< img src=“image/im.jpg”/>
上一级	…/	< img src=“…/im.jpg”/>

2.5 跳转链接

在html标签中，标签用于定义超链接，作用是从页面链接到另一个页面

1.语法

< a href=“~~跳转地址~~” target=“窗口弹出方式”> 文本或图像 </ a>

属性	作用
href	用于指定链接目标的url地址，当作为标签应用href属性时，它就具有超链接功能
target	指定页面打开方式，_self为默认值，值 _blank为在新窗口中打开

2.外部标签：< a href=“http://www.baidu.com”> 百度< /a >

3.内部标签：内部网页之间

<!-- 外部链接 -->
<a href="https://www.baidu.com">百度一下</a> <br>
<a href="https://www.bilibili.com" target="_blank">
  <img src="../../../image.jpg" width="400">
</a><br>
<!-- 内部链接 -->
<a href="./demo01.html">demo01.html</a>

< base >标签

base标签是一个单标签，写在head中，改变链接的默认行为

<head>
		  ......
      <base target="_blank">
</head>

2.6 跳转锚点

在当前页面内进行跳转,可以实现返回顶部，页面菜单等功能

快速定位页面中的某个位置
在连接文本的href属性中设置属性值 href=“#name”

如< a href=“#name”> 个人简介 </ a>
在目标为标签添加id属性，属性值为name

< h2 id=“name” > 早年经历 </ h2>

<a href="#html">跳转到文档</a>
......
<h2 id="html">模拟的段落</h2>

第二种方式：在a标签中添加name实现跳转

<a href="#go">html</a>
<a name="go"></a>

2.7 特殊符号

编写文本时经常会遇到无法输入的符号，如注册商标，版权符等。并且在编写html时输入的多个空格，浏览器并不会解析出来，HTML为这些字符准备了专门的代码。

特殊字符	含义	特殊字符代码
	空格符	&nbsp ;
©	版权	&copy ;
®	注册商标	&reg ;
<	小于号	&lt ;
>	大于号	&gt ;
&	和号	&amp ;
°	摄氏度	&deg

2.8 列表标签

无序列表

< ul>

< li> 列表项 < /li>

< /ul>

ul中各个列表项之间并列无顺序级别
ul中只能嵌套li，不允许有其他标签
< li> </ li> 中可以容纳所有元素

属性：

有序列表

< ol >

< li> 列表项 < /li >

< /ol >

定义列表

< dl >：定义列表(definition list)

< dt >：定义专业属于或名词(definiton term)

< dd >：对名词进行解释和描述(definition description)

<dl>
  <dt>html</dt>
  <dd>超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
  <dt>javascript</dt>
  <dd>网页脚本语言</dd>
</dl>

嵌套列表

列表之间可以互相嵌套形成多层级的列表

    <ul>
        <li>
            辽宁省
            <ul>
                <li>沈阳</li>
                <li>丹东</li>
                <li>大连</li>
            </ul>
        </li>
        <li>
            山东省
            <ul>
                <li>济南</li>
                <li>青岛</li>
                <li>烟台</li>
            </ul>
        </li>
    </ul>

    <dl>
        <dt>中国</dt>
        <dd>
            <dl>
                <dt>江苏省</dt>
                <dd>南京</dd>
                <dd>苏州</dd>
            </dl>
            <dl>
                <dt>陕西省</dt>
                <dd>西安</dd>
                <dd>铜川</dd>
            </dl>
        </dd>
    </dl>

2.9 表格标签

< table>

< caption > 表格标题 < /caption >

表头< th> < /th>

行 < tr>

< td> 单元格 < /td>

< / tr>

< / table>

语义化的标签：使代码更规范一个table中tBody可以出现多次，而tHead与tFood只能出现一次
- < tHead > < /tHead > 表格头部
- < tBody > < /tBody > 表格主体
- < tFood > < /tFood > 表格尾部

表格属性

在CSS中实现

属性名	属性值	描述
align	left center right	表格相对周围元素对齐方式
border	1或""	规定表格边框
cellpadding	像素值	单元格与内容间的空白大小，默认1像素
cellspacing	像素值	单元格之间的空白，默认2像素
width	像素值或百分比	表格宽度

每个单元格中可以放置文字、图片、超链接

合并单元格

colspan按列合并

目标单元格为最左侧单元格
rowspan按行合并

目标单元格为最上次单元格

    <table border="1" cellpadding="30px" cellspacing="3px">
        <caption>天气预报</caption>
        <thead>
            <tr>
                <th>日期</th>
                <th>天气</th>
                <th>出行情况</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">2022.2.13</td>
                <td>晴</td>
                <td>适宜</td>
            </tr>
            <tr>
                <td>中雨</td>
                <td>不宜出行</td>
            </tr>
        </tbody>
    </table>

2.10 表单标签

表单实现了客户端与服务器端的信息交换
Web应用中与表单工作相关的有两个重要组成：
- 一是描述表单的HTML源代码
- 二是处理用户输入信息的服务器端应用程序，如ASP JSP等

表单的组成

表单域、表单控件(表单元素)、提示信息

< form>标签用于定义表单域，最终将表单域内的表单元素信息提交给服务器
< input >：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框，密码框，复选框，文本框等

表单控件

input输入表单元素
select下拉表单元素
textarea 文本域元素

input表单元素

type属性：

属性值	描述
button	定义可点击按钮(多数情况通过JavaScript启动脚本)
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义可隐藏字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中字符被掩码
radio	定义单选按钮
reset	定义重置按钮，清楚表单中所有数据
submit	提交按钮，将表单数据发送到服务器端
text	定义单行可输入字段，默认宽度为20个字符
name	属性值由用户自定义 input元素的名称
value	属性值由用户自定义规定input元素的值或者默认值(初始值)
checked	属性值为checked 规定此元素首次加载时应当被选中
maxlength	属性值为正整数规定输入字段中的字符最大值

其他属性：

属性名	属性值	描述
placeholder	text	规定帮助用户填写输入字段的提示。
disabled	disabled	当input元素加载时禁用此元素

<!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>
    <script>
        function msg() {
            alert("Hello World")
        }
    </script>
</head>
<body>
    <form action="xxx.php" method="get" name="表一">
        <!-- text属性值 用户可以输入 -->
        <label for="text">用户名：</label><input type="text" value="请输入" name="username" id="text"><br/>

        密&nbsp;&nbsp;码：<input type="password" name="pwd"><br/>

        <!-- radio单选按钮，只有相同name时才能实现多选一 -->
        <!-- 增加label标签 -->

        性&nbsp;&nbsp;别： <label for="male">男</label><input type="radio" name="sex" checked="checked" id="male"> <label for="female">女</label><input type="radio" name="sex" id="female"><br>
        爱&nbsp;&nbsp;好： 睡觉<input type="checkbox" name="hobbies" checked="checked"> 跑步<input type="checkbox" name="hobbies" ><br>
        <input type="submit">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type="reset">
        <br>
        上传：<input name="file" type="file">
        <br>
        <!-- button 可单机按钮，启动JavaScript -->
        <input type="button" value="clickme" onclick="msg()">
        <br>
        Points:<input type="number" name="points" min="0" max="100" step="1" value="0">
        <br>
        下拉列表
        <br>
        <select>
            <option>体育</option>
            <option>美术</option>
            <option>音乐</option>
            <option>画画</option>
        </select>
    </form>
</body>
</html>

表格表单组合实例

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aioepvUS-1658047137645)(C:\Users\16339\AppData\Roaming\Typora\typora-user-images\image-20220717162612325.png)]$

<!DOCTYPE html>
<html lang="zh-CN">
    <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>Doc</title>
    </head>
    <body>
        <form action="">
            <table border="1" cellpadding="30">
                <tr>
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr>
                    <td>用户名：</td>
                    <td>
                        <input type="text" placeholder="请输入用户名">
                    </td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td>
                        <input type="password" placeholder="请输入密码">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" value="提交">
                        &nbsp;&nbsp;
                        <input type="reset" value="重置">
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>