文章目录
HTML标签学习
<!-- 输入!号，再按tab就可以生成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>
第一次用vscode写HTML代码
</body>
</html>
HTML骨架标签介绍
文档类型声明标签
<!DOCTYPE html>
<!DOCTYPE> 文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。
这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页.
注意:
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。
<!DOCTYPE>不是一个 HTML 标签，它就是 文档类型声明标签。
lang 语言种类
<html lang=“en”>
用来定义当前文档显示的语言。
- en定义语言为英语
- zh-CN定义语言为中文
简单来说,定义为en 就是英文网页, 定义为 zh-CN 就是中文网页
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的
字符集
字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。 在<head>标签内，可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
<meta charset=" UTF-8" />
charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符.
注意：上面语法是必须要写的代码，否则可能引起乱码的情况.一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的 “UTF-8”，不要写成 “utf8” 或 “UTF8”。
HTML常用标签
标题标签
单词 head 的缩写，意为头部、标题。
标签语义：作为标题使用，并且依据重要性递减。
双标签结构
特点：
- 加了标题的文字会变的加粗，字号也会依次变大。
- 一个标题独占一行。
<!-- 输入!号，再按tab就可以生成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>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
</body>
</html>
段落标签
单词 paragraph [ˈpærəgræf] 的缩写，意为段落。
标签语义：可以把 HTML 文档分割为若干段落。
双标签结构
特点：
- 文本在一个段落中会根据浏览器窗口的大小自动换行。
- 段落和段落之间保有空隙。
<!-- 输入!号，再按tab就可以生成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>
<p>一提到汉服”，许多人脑海中第一秒浮现的都是华丽繁复层层叠叠的搭配，这样
的固有理念，正是造成了不女孩子想要尝试汉服却犹豫的原因，但是这种理念早
已经过时了。
这不，时尚圈内流行起一种全新的穿搭叫“汉服+运动鞋”，复古的同时又时髦前
卫,而且不仅仅在汉服圈子里爆火，女明星们都纷纷上身实践，就连杨颖也“上头”
了。
</p>
<p>在路人拍摄的图片中，杨颖身穿一身 雪白的汉服，优雅端庄的模样仿佛是从古画里
穿越出来的美人一般,但是视线转移到她的鞋子,画风 下子就转为潮流时髦的运
动鞋。
这样的反差让人不禁感到稀奇新颖，可是却完全没有想象之中的违和感,这就是杨
颖穿搭技巧的高超之处了。
</p>
</body>
</html>
文本自带的换行，在浏览器中变为了空格
文本中多个空格，在浏览器中只显示了一个
段落标签之间在浏览器中显示时有一行的空隙
换行标签<br>
单词break的缩写，意为打断、换行
标签语义：强制换行
单标签结构
特点：
- <br /> 是个单标签。
- <br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
文本格式化标签
标签语义: 突出重要性, 比普通文字更重要.
<b> 或者 <strong> : 定义粗体文本
<i> 或者 <em> : 定义斜体字
<small> : 定义小号字
<sub> : 定义下标字
<sup> : 定义上标字
<ins> 或者 <u> : 定义插入字
<del> 或者 <s> : 定义删除字
<!-- 输入!号，再按tab就可以生成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>
我是<strong>加粗</strong>，我叫strong
<br>
我也是<b>加粗</b>,我叫b
<br><br>
我是<em>倾斜</em>,我叫em
<br>
我也是<i>倾斜</i>,我叫i
<br><br>
我是<del>删除</del>,我叫del
<br>
我也是<s>删除</s>,我叫s
<br><br>
我是<ins>下划线</ins>,我叫ins
<br>
我也是<u>下划线</u>,我叫u
<br><br>
我是<sub>下标字</sub>,我叫sub
<br>
我是<sup>上标字</sup>,我叫sup
<br><br>
我是<small>小字号</small>,叫我small
</body>
</html>
盒子标签
<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。
div 是 division 的缩写，表示分割、分区。
span 意为跨度、跨距。
特点：
- <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子
- <span> 标签用来布局，一行上可以多个 <span>。小盒子
图像标签
在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。
单词 image 的缩写，意为图像。
src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。
图像标签属性注意点：
① 图像标签可以拥有多个属性，必须写在标签名的后面。
② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③ 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。
alt是什么？？
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
属性值默认单位为像素
提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
</body>
</html>
超链接标签
HTML使用标签 <a>来设置超文本链接。
在标签<a> 中使用了href属性来描述链接的地址。
链接分类：
- 外部链接: 例如 <a href="http:// www.baidu.com "> 百度</a >。
- 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 <a href=“index.html”> 首页 </a >。
- 空链接: 如果当时没有确定链接目标时，<a href=“#”> 首页 </a > 。
- 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
- 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
- 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
在链接文本的 href 属性中，设置属性值为 #名字 的形式，如: <a href=“#haahaa”> haahaa</a>
找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：<h3 id=“haahaa”>haahaa</h3>
<!-- 输入!号，再按tab就可以生成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>
<a href="http://www.baidu.com">百度</a> 是一个可以跳转到百度的链接。
<br>
<a href="#to-h2">本文本</a> 是一个跳转到页面中对应的某个位置的锚点链接。
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="to-h2">中国你好</h2>
<p>
随着气温不断升高，越来越多人开始使用高跟鞋来搭配裙装穿搭了。
但其实夏季的裙装穿搭可以用很多不同风格的鞋子来搭配，不一定要搭配高跟鞋。
如果大家想保持舒适度，又想穿出时髦感，那么在搭配的时候可以换一种搭配鞋子的思路。
本期绵绵就以吴昕的搭配为例，来跟大家分享一下打造裙装穿搭时搭配鞋子的思路，让大家在保持舒适的同时穿出减龄又优雅的效果。
讲真，穿裙子不一定要配高跟鞋，吴昕示范“新穿法”，优雅又减龄。
</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
注释和特殊字符
注释
如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
HTML中的注释以“<!–”开头，以“ -->”结束。
快捷键：CTRL+/
特殊字符
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
表格标签
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。
简单案例：
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
表格跨行列
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=“合并单元格的个数”
<body>
<h4>单元格跨两列:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>单元格跨两行:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
更多设置
- border ：1 或 " " 规定表格单元是否拥有边框， 默认为""，表示没有边框
- cellspacing:规定单元格之间的空白，默认2像素。
- cellpadding:规定单元边沿与其内容之间的空白，默认1像素。
- align: left 、center、 right 规定表格相对周围元素的对齐方式。
<body>
<h4>没有单元格间距:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>单元格间距="0",cellpadding="10":</h4>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
列表标签
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。
无序列表
<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。
在ul中，可以无序列表的类型，常见的类型有：圆点列表：list-style-type:disc、圆圈列表：list-style-type:circle、正方形列表：list-style-type:square、
<ul style="list-style-type:disc">
<body>
<h4>无序列表:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
嵌套列表
<body>
<h4>嵌套列表：</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
有序列表
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。 在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。
在ol中，可以自定义排序的类型，常见的类型有：编号列表（默认的）、大写字母列表：A、小写字母列表：a、罗马数字列表：I、小写罗马数字列表：i
<ol type="A">
<body>
<h4>有序列表</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h4>有序列表，定义从50开始</h4>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
自定义列表
在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。
<body>
<h4>一个自定义列表：</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
表单标签
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。
我们可以使用 <form> 标签来创建表单:
输入元素 ：input
文本域： type=“text”
当用户要在表单中键入字母、数字等内容时，就会用到文本域。
文本域的默认宽度是 20 个字符。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
密码字段： type=“password”
注意：密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代。
<form>
Password: <input type="password" name="pwd">
</form>
选项按钮
单选按钮：type=“radio”
可以列举多个选项,属性name必须相同，但是只允许选一个
<form>
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>
复选框： type=“checkbox”
可以列举多个选项,属性name必须相同，允许多选
<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>
提交
提交按钮: type=“submit”
当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。
action 属性会对接收到的用户输入数据进行相关的处理:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件，该页面将显示出输入的结果。
以上实例中有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值：
-
post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
-
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。
下拉列表
如下代码，select标签控件定义下 拉列表，option则表示选项
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表.
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
文本框
在表单元素中，textarea 标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论
cols=“每行中的字符数” ，rows=“显示的行数”
<form>
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
</form>
label标签
label标签为 input 元素定义标注（标签）。
<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.
核心：
实战
<!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>案例：注册界面</title>
</head>
<body>
<h3>青春不常在，抓紧谈恋爱</h3>
<table width="600">
<tbody>
<!-- 第一行：性别 -->
<tr>
<td>性别</td>
<td>
<input type="radio" name="性别" id="男"><label for="男"><img src="images/man.jpg"> 男</label>
<input type="radio" name="性别" id="女"><label for="女"><img src="images/women.jpg"> 女</label>
</td>
</tr>
<!-- 第二行：生日 -->
<tr>
<td>生日</td>
<td>
<select>
<option>--请选择年--</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
<select>
<option>--请选择月--</option>
<option>5</option>
<option>4</option>
<option>3</option>
<option>2</option>
<option>1</option>
</select>
<select>
<option>--请选择日--</option>
<option>5</option>
<option>4</option>
<option>3</option>
<option>2</option>
<option>1</option>
</select>
</td>
</tr>
<!-- 第三行：所在地区 -->
<tr>
<td>所在地区</td>
<td><input name="所在地区" type="text" value="北京"></td>
</tr>
<!-- 第四行：婚姻状况 -->
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="婚姻状况" id="未婚"><label for="未婚">未婚</label>
<input type="radio" name="婚姻状况" id="已婚"><label for="已婚">已婚</label>
<input type="radio" name="婚姻状况" id="离婚"><label for="离婚">离婚</label>
</td>
</tr>
<!-- 第五行：学历 -->
<tr>
<td>学历</td>
<td><input name="学历" type="text" value="大学"></td>
</tr>
<!-- 第六行：喜欢的类型 -->
<tr>
<td>喜欢的类型</td>
<td>
<input name="喜欢的类型" type="checkbox" id="1"><label for="1">妩媚的</label>
<input name="喜欢的类型" type="checkbox" id="2"><label for="2">可爱的</label>
<input name="喜欢的类型" type="checkbox" id="3"><label for="3">知性的</label>
<input name="喜欢的类型" type="checkbox" id="4"><label for="4">沙雕的</label>
</td>
</tr>
<!-- 第七行：自我介绍 -->
<tr>
<td>自我介绍</td>
<td><textarea>自我介绍</textarea></td>
</tr>
<!-- 第八行：注册按钮 -->
<tr>
<td></td>
<td><input type="button" value="免费注册"></td>
</tr>
<!-- 第九行：勾选同意按钮 -->
<tr>
<td></td>
<td><input type="checkbox" id="yes" checked="checked"><label for="yes">我同意注册条款和会员加入准则</label></td>
</tr>
<!-- 第十行：超链接 -->
<tr><td></td><td><a href="#">我是会员，立即登录</a></td></tr>
<!-- 最后：承诺 -->
<tr>
<td></td>
<td>
<h2>我承诺</h2>
<ul>
<li>年满18、单身</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>
528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
