HTML的学习*2
第一部分
1.HTML的基本属性和结构
HTML ：超文本 标记 语言
超文本：文本内容 + 非文本内容（图片，视频，音频等）
标记: <单词>
语言：编程语言
标记也叫作标签：
写法分为两种：
单标签：
<input type="text">
双标签：
<header></header>
<footer></footer>
创建标签的快捷键：单词+tab键 -> <单词>
标签是可以上下排列，也可以组合嵌套。
<header>hello world</header>
<footer> hi html</footer>
<header><footer>hello world</footer></header>
<div>aaaa
<div>aaahjhh</div>
<div>aaaaaaaaa</div>
</div>
<div>aaaaa</div>
<div>aaaa</div>
HTML常见标签：
标签的属性：来修饰标签的，设置当前标签的一些功能。
<标签 属性=“值” 属性2=“值2”>
<header title="hello">hello world</header>
<footer title="hi"> hi html</footer>
2.HTML初始代码
每一个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>
</body>
</html>
<!DOCTYPE html> 文档声明：告诉浏览器这是一个html文件
<html lang="en"> html文件的最外层标签：包裹着所有html标签代码
lang="en"表示是一个英文网站 lang="zh-CN"表示一个中文网站
<head>
<meta charset="UTF-8"> 元信息：是编写网页的一些赋值信息
charset="UTF-8"国际编码，让网页不出现乱码的情况
<title>Document</title> 设置网页的标题
</head>
<body>
显示网页内容的区域
</body>
</html>
3.HTML中的注释
写法
<!-- 注释的内容 --> 在浏览器中看不到，只能在代码中看到注释的内容。
意义：
1，把暂时不用的代码注释起来，方便以后使用。
2，对开发人员进行提示。
快捷添加注释与删除注释：
1，Ctrl + \
2, shift + alt + a
4.HTML语义化
所谓HTML语义化指的是，根据网页中内容的结构，选择适合的HTML标签进行编写。
第二部分
1.标题与段落
标题 -> 双标签：<h1></h1> ... <h6></h6>
<!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>
每一个网页中，h1标题最重要，并且一个，html文件中只能出现一次h1标签。
<p>这是一个段落</p>
段落 -> 双标签 ：<p></p>
<!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>
<p>周星驰（Stephen Chow），1962年6月22日出生于香港，祖籍浙江省宁波市，中国香港影视男演员、导演、编剧、制作人、商人，毕业于无线电视艺员训练班。</p>
<p>1980年成为丽的电视台的特约演员，从而进入演艺圈。1981年出演个人首部电视剧《IQ成熟时》。1988年将演艺事业的重心转向大银幕，并于同年出演电影处女作《捕风汉子》。1990年凭借喜剧片《一本漫画闯天涯》确立其无厘头的表演风格；同年，因其主演的喜剧动作片《赌圣》打破香港地区票房纪录而获得关注。1991年主演喜剧片《逃学威龙》，并再次打破香港地区票房纪录 [1] 。1995年凭借喜剧爱情片《大话西游》奠定其在华语影坛的地位。1999年自导自演的喜剧片《喜剧之王》获得香港电影年度票房冠军 [2] 。</p>
<p>2002年凭借喜剧片《少林足球》获得第21届香港电影金像奖最佳男主角奖、最佳导演奖 [3] 。2003年成为美国《时代周刊》封面人物 [4] 。2005年凭借喜剧动作片《功夫》获得第42届台湾电影金马奖最佳导演奖。2008年自导自演的科幻喜剧片《长江7号》获得香港电影年度票房冠军。2013年执导古装喜剧片《西游·降魔篇》，该片以2.18亿美元的票房成绩打破华语电影在全球的票房纪录 [5-6] 。2016年担任科幻喜剧片《美人鱼》的导演、编剧、制作人，该片以超过33亿元的票房创下中国内地电影票房纪录 [7-10] 。</p>
<p>演艺事业外，周星驰还涉足商界。1989年成立星炜有限公司。1996年成立星辉公司。2010年出任比高集团有限公司执行董事 [11] 。</p>
<h2>早年经历</h2>
<p>周星驰出生在香港九龙的穷人区 [12] ，父亲是浙江宁波人，母亲凌宝儿是广东宝安县人。他的名字是母亲起的，出自《滕王阁序》中的“雄州雾列，俊采星驰，台隍枕夷夏之交，宾主尽东南之美 [13] ”。</p>
<p>1969年，周星驰的父母离异。之后，周星驰和姐姐周文姬、妹妹周星霞在母亲凌宝儿的抚养下成长。周星驰中学就读于香港圣玛利奥英文书院。周星驰在学校读书时偏科，除了语文其它科目的成绩都不好 [13] 。毕业以后，周星驰做过两个月的办公室助理。</p>
</body>
</html>
2.文本修饰标签
强调 -> 双标签：<strong></strong> <em></em>
区别：
1.写法和展示效果是有区别的，一个加粗，一个斜体
2.strong的强调性更强，em的强调性稍弱。
下标：<sub></sub>
上标：<sup></sup>
删除文本：<del></del>
插入文件：<ins></ins>
注：一般情况下，删除文本都是和插入文本配合使用的。
<!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>
<strong>这是一段需要强调的文本</strong>
<em>这是一段需要强调的文本</em>
</p>
<p>
a <sup>2</sup> + b<sup>2</sup> = c<sup>2</sup> H<sub>2</sub>O
</p>
<P>
促销 ： 原价<del>300</del>,现价<ins>100</ins>。</P>
</body>
</html>
3.图片标签与图片属性
img -> 单标签
scr : 引入图片的地址
alt :当图片出现问题的时候，可以显示一段友好的提示文字。
title ： 提示信息
width，height： 图片大小
4.引入文件的地址路径
. 在路径中表示当前路径
.. 在路径中表示上一级路径
4.跳转链接
a -> 双标签 <a></a>
href属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下：在当前页面打开 _self
新窗口打开 _blank
base -> 单标签：作用就是改变链接的默认行为的
<!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="./aaa/second.html">列表页</a>
<img src="./img/7b91beafc978d2aa147ac9ebbd4f0139.png">
</body>
</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="./third.html">详情列</a>
<img src="../img/7b91beafc978d2aa147ac9ebbd4f0139.png">
</body>
</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="../first.html">返回主页</a>
<img src="../img/7b91beafc978d2aa147ac9ebbd4f0139.png">
</body>
</html>
5.跳转锚点
实现一
#号
id属性
实现二
#号
name属性
（注意name属性加给a标签）
<!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="#HTML">HTML</a>
<a href="#CSS">CSS</a>
<a href="#JavaScript">JavaScript</a>
<h2 id="HTML">HTML超文本标记语言</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<h2 id="CSS">css层叠样式表</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<h2 id="JavaScript">js脚本</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
</body>
</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="#HTML">HTML</a>
<a href="#CSS">CSS</a>
<a href="#JavaScript">JavaScript</a>
<a name="HTML"></a>
<h2>HTML超文本标记语言</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<a name="CSS"></a>
<h2>css层叠样式表</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<a name="JavaScript"></a>
<h2>js脚本</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
</body>
</html>
6.特殊符号
1，& + 字符
2，解决冲突 左右尖括号，添加多个空格的实现
3，<，>， ；
7.无序列表
type属性：改变前面标记的样式（一般都是用CSS去控制）
<!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>
<ul>
<li><a href="https://baijiahao.baidu.com/s?id=1747125620970644413"><strong>106个大城市名单出炉：江苏占11席，还有这些后备军</strong></a></li>
<li><a href="https://baike.baidu.com/item/%E5%91%A8%E6%98%9F%E9%A9%B0/169917">周星驰百科</a></li>
<li><a href="https://baijiahao.baidu.com/s?id=1747110835217392864&wfr=spider&for=pc">2025年底前适时启动海南全岛封关运作</a></li>
</ul>
</body>
</html>
8.有序列表
<!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>
<ol>
<li><a href="#">都说</a></li>
<li><a href="#">我的祖国</a></li>
<li><a href="#">夜空中最亮的星</a></li>
<li><a href="#">父亲</a></li>
<li><a href="#">青花瓷</a></li>
</ol>
</body>
</html>
9.定义列表
定义列表 -> dl dt dd 列表项需要添加标题和对标题进行描述的内容
<!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>
<!-- <ol>
<li><a href="#">都说</a></li>
<li><a href="#">我的祖国</a></li>
<li><a href="#">夜空中最亮的星</a></li>
<li><a href="#">父亲</a></li>
<li><a href="#">青花瓷</a></li>
</ol> -->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>JavaScript</dt>
<dd>网页脚本语言</dd>
</dl>
</body>
</html>
10.嵌套列表
列表之间可以互相嵌套，形成多层级的列表。
<!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>
<ul>
<li>
海南省
<ul>
<li>三亚市</li>
<li>海口市</li>
<li>三沙市</li>
</ul>
</li>
</ul>
<dl>
<dt>中国
<dd>
<dl>
<dt>海南省
<dd>三亚市</dd>
<dd>海口市</dd>
<dd>三沙市</dd>
</dt>
</dl>
</dd>
</dt>
</dl>
</body>
</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>
<ul>
<li>小吃类
<ul>
<li>煮粉干</li>
<li>拌青菜</li>
<li>煎蛋</li>
<li>蛋炒饭</li>
<li>米饭</li>
</ul>
</li>
<li>卤味类
<ul>
<li>鸡肠</li>
<li>面筋</li>
<li>牛肚</li>
<li>猪耳朵</li>
<li>猪头肉</li>
<li>大肠</li>
<li>鱿鱼</li>
</ul>
</li>
<li>套餐类
<ul>
<li>卤面筋饭</li>
<li>猪肉肉饭</li>
<li>猪耳朵饭</li>
<li>卤猪脚饭</li>
<li>卤猪舌头饭</li>
</ul>
</li>
<li>纯爆类
<ul>
<li>猪蹄黄豆</li>
<li>猪肚莲子</li>
<li>猪心枸杞</li>
<li>羊肉枸杞</li>
<li>牛肉枸杞</li>
</ul>
</li>
</ul>
<dl>
<dt><em>亲，20元以上可送餐哦!</em></dt>
</dl>
</body>
</html>
11.表格标签
<table> ：表格的最外层容器
<tr> ：定义表格行
<th> ：定义表头
<td> ：定义表格单元
<caption> ：定义表格标题
语义化标签：<tHead> <tBody> <tFood>
代码展示
<!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>
<table>
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2022年10月23日</td>
<td><img src="./img/c407f8d96a1243cc.png" alt=""></td>
<td>天气晴朗，适合出行</td>
</tr>
<tr>
<td>2022年10月24日</td>
<td><img src="./img/dae4a8054fc29ba9a6523b0a91a77335.jpeg" alt=""></td>
<td>有小雨，记得带伞</td>
</tr>
</tBody>
<tFood></tFood>
</table>
</body>
</html>
效果演示
注意：在一个table中，tBody是可以多次出现的，但是tHead，tFood只能出现一次。
12.表格属性
border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式（left，center，right）
valign：上下对齐方式（top，middle，bottom）
代码演示：
<!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>
<table border="1" cellpadding="30" cellspacing="30">
<caption>天气预报</caption>
<tHead>
<tr align="right">
<th colspan="2">日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr valign="top">
<td rowspan="2">2022年10月23日</td>
<td>白天</td>
<td><img src="./img/c407f8d96a1243cc.png" alt=""></td>
<td>天气晴朗，适合出行</td>
</tr>
<tr>
<td>夜晚</td>
<td><img src="./img/c407f8d96a1243cc.png" alt=""></td>
<td>天气晴朗，适合出行</td>
</tr>
<tr valign="bottom">
<td rowspan="2">2022年10月24日</td>
<td>白天</td>
<td><img src="./img/dae4a8054fc29ba9a6523b0a91a77335.jpeg" alt=""></td>
<td>有小雨，记得带伞</td>
</tr>
<tr>
<td>夜晚</td>
<td><img src="./img/dae4a8054fc29ba9a6523b0a91a77335.jpeg" alt=""></td>
<td>有小雨，记得带伞</td>
</tr>
</tBody>
<tFood></tFood>
</table>
</body>
</html>
效果演示
13.表单input标签
<form>:表单的最外层容器
<input>:标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框，密码框，复选框等。
type属性：
1.text 普通的文本输入框
2.password 密码输入框
3.checkbox 复选框
4.radio 单选框
5.file 上传文件
6.submit 提交按钮
7.reset 重置按钮
注意：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>
</head>
<body>
<form action=""><!--表格收集地址-->
<h2>输入框：</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框：</h2>
<input type="password" placeholder="请输入密码">
<h2>复选框</h2>
<input type="checkbox" disabled>苹果<!--disabled表示不选-->
<input type="checkbox" checked>香蕉<!--checked表示必须选-->
<input type="checkbox">葡萄
<h2>单选框</h2>
<input type="radio" name="oo">男<!--name为了表示一组可以单选-->
<input type="radio" name="oo">女
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮和重置按钮</h2>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
效果演示
14.表单相关标签
<textarea>:多行文本框
<select>,<option>:下拉菜单
<label>:辅助表单提升体验
代码演示
<!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>
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select>
<option selected disabled>请选择</option><!--默认选择-->
<option>北京</option>
<option>上海</option>
<option>三亚</option>
</select>
<select size="3"><!--size表示显示多少-->
<option>北京</option>
<option>上海</option>
<option>三亚</option>
</select>
<select multiple><!--多选-->
<option>北京</option>
<option>上海</option>
<option>三亚</option>
</select>
<input type="file" multiple>
<input type="radio" name="oo" id="man"><label for="man">男</label>
<input type="radio" name="oo" id="woman"><label for="woman">女</label>
<!--扩大范围-->
</body>
</html>
效果演示
15.表格表单组合实例
代码演示
<!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>
<form action="">
<table border="1" callpadding="30">
<tBody>
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户信息</td>
</tr>
<tr align="right">
<td>用户名：</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码：</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</tBody>
</table>
</form>
</body>
</html>
扫一扫
8164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
