本文详细介绍了HTML的基本概念，包括网站和网页的区别，HTML的用途，以及常见的HTML标签，如标题、段落、图像、超链接、表格、列表、表单等。此外，还提到了浏览器内核、Web标准、文档类型声明以及一些网页元素的特殊用法，如注释和特殊字符。通过实例展示了如何使用这些元素创建和布局网页。
什么是网站和网页
网站是由html等制作的用于展示特定内容的网页的集合。
网页时网站中的一页。
HTML
html是超文本标记语言(Hyper Text markup language)。
所谓超文本就是超越了文本的限制（不知有文字，还有图片等）和超链接文本。
#常用的浏览器及其内核
IE、火狐（Firefox）、Chrome、Safari、Opera等。
内核的作用为负责读取网页的内容，显示网页。
| 浏览器 | IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|---|
| 内核 | Trident | Blink | Gecko | Blink | webkit | Blink |
Blink其实是webkit的分支。
Web标准
Web标准是W3C（万维网联盟）组织和其他标准组织制定的一套标准的集合。
Web标准的构成（重要）
结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
| 标准 | 说明 |
|---|---|
| 结构 | 对网页元素进行整理和分类，主要是HTML。 |
| 表现 | 设置网页的版式、颜色、文字大小等外观样式，主要指的是CSS |
| 行为 | 网页模型的定义及其交互的编写，主要指的是JavaScript |
文档类型的声明标签
<!DOCTYPE>，用于告诉浏览器使用哪种HTML版本来显示网页。必须写在最前面。
lang ，用来定义当前页面的显示的语言。en，zh-CN
Html常用基础标签(上)
标签必须关心语义，而不关心样式
meta标签
元标签
有助于SEO
<meta charset='utf-8'>
标题标签
在html中给出了6个标签。写在身体里面
<h1>一级标题</h1>
语义
作为标题使用，并且根据重要性递减。
<h1>一级标题</h1>
特点
独占一行。
段落标签
<p>我是一个段落</p>
语义
将文字分为不同的段落。
特点
1.文字会根据窗口的大小进行换行。
2.段落和段落或者飞段之间有空隙，。
换行标签
<br /> (break)
语义
强制换行
特点
他是一个段标签。
文本格式化标签
语义
突出文字的重要性
加粗
<strong> </strong>
<b> </b>
在这里推荐使用strong，效果更加的明显。
倾斜
<em></em>
<i></i>
这里推荐使用em.
删除线
<del></del>
<s></s>
推荐使用del
下划线
<ins></ins>
<u></u>
这里推荐使用
盒子标签
在html中有两个盒子标签。
<span></span>
<div></div>
他们是没有语义的，它们就是一个盒子，用来装内容的。
div是division的缩写，表示分区，一部分。span表示跨度、跨距。
特点
1.div单独占一行(大盒子)
2.span不会单独占一行(小盒子)
图像标签
<img src = "图像的url" />
图像标签的其他属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。当图片失效时，显示改文字 |
| title | 文本 | 提示文本。鼠标放在图像上显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像边框粗细 |
<img scr = "" alt = "哈哈哈" title = "这是一张图像" border = 10px \>
属性的注意点
1.属性必须写在标签名的后面
2.属性的顺序没有关系
3.属性用空格分开
4.属性采用键值对的方式书写。key = “value”。
超链接标签
<a href = "跳转目标" target = "目标窗口弹出的方式">文本或者图像</a>
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，他是必须属性 |
| target | 用于指定链接页面的打开方式，其中默认为_self,_blank在新窗口打开 |
链接分为：外部链接和内部链接等
其中外部链接的格式为：http://, 如 href = “http://www.qq.com”.如果不加协议头会被误认为本地文件。
内部链接：在网站内部进行连接。
空链接：href = “#”
下载链接
<a href = "zip或者exe等"></a>
其实很多网页元素都可以添加超链接，比如表格、音频等。
锚点链接
在我们点击此链接后，可以快速跳转到当前页面的某个位置。
使用id属性的方法实现此功能
<a href = "#one">跳转</a>
<h1 id = "one">可被跳转</h1>
html注释和特殊字符
注释
html中的注释：<!–注释–>
vscode中的快捷键：ctrl + /
特殊字符
查表即可。
综合以上学习的知识点的一个小项目。
<!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>
<h1>圣诞节的那些事</h1>
<a href="#one">1.圣诞的由来</a> <br />
<a href="#two">2.圣诞老人的由来</a> <br />
<a href="#three">3.圣诞树的由来</a> <br />
<h2 id="one">圣诞节的由来</h2>
<p>基督教纪念耶稣诞生的重要节日。亦称耶稣圣诞节、主降生节，天主教亦称耶稣圣诞瞻礼。耶稣诞生的日期，《圣经》并无记载。公元336年罗马教会开始在12月25日过此节。12月25日原是罗马帝国规定的太阳神诞辰。有人认为选择这天庆祝圣诞，是因为基督教徒认为耶稣就是正义、永恒的太阳。5世纪中叶以后，圣诞节作为重要节日，成了教会的传统，并在东西派教会中逐渐传开。因所用历法不同等原因，各教派会举行庆祝的具体日期和活动形式也有差别。圣诞节习俗传播到亚洲主要是在十九世纪中叶，日本、韩国等都受到了圣诞文化的影响。现在西方在圣诞节常互赠礼物，举行欢宴，并以圣诞老人、圣诞树等增添节日气氛，已成为普遍习俗。圣诞节也成为西方世界以及其他很多地区的公共假日。</p>
<h2 id="two">圣诞老人的由来</h2>
<p>圣诞老人（Santa Claus）是西方神话传说中的人物，在传说中西方圣诞节前夜时悄悄赠送礼物给小孩子，是耶稣基督诞辰瞻礼即西方圣诞节的代表角色之一。他普遍被认为是基督教的圣人圣·尼古拉斯（Saint Nicholas）的衍生形象，圣诞老人的起源或与一种被称为毒蝇伞的红白相间蘑菇有关。</p>
<img src="./img/圣诞老人.jpg" alt="圣诞老人" title="圣诞老人" width="300px">
<P>传说每到12月24日晚上，有个神秘人会乘驾由9只驯鹿拉的雪橇在天上飞翔，挨家挨户地从烟囱进入屋里，然后偷偷把礼物放在孩子床头的袜子里，或者堆在壁炉旁的圣诞树下。他在一年中的其他时间里，都是忙于制作礼物和监督孩子们的行为。</P>
<p>虽然没有人真的见过神秘人的样子，但是人们会装扮成他的样子来给孩子送上礼物。他通常被描述为一位老人，头戴红色帽子，大大的白色胡子，一身红色棉衣，脚穿黑色靴子的样子，拿着装有礼物的大袋子，因为总在圣诞节前夜出现派发礼物，所以习惯地称他为“圣诞老人”。</p>
<h3 id="three">圣诞树的由来</h3>
<p>圣诞树，是指用灯烛和装饰品把枞树或洋松装点起来的常青树。作为是圣诞节重要的组成元素之一，近代圣诞树起源于德国，后来逐步在世界范围内流行起来，成为圣诞节庆祝中最有名的传统之一。</p>
<p>据说圣诞树最早出现在古罗马12月中旬的所谓农神节。现在通常人们在圣诞前后把一棵常绿植物如松树弄进屋里或者在户外，并用圣诞灯和彩色的装饰物装饰。并把一个天使或星星放在树的顶上。</p>
更多内容可以<a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>
Html常用基础标签(下)
表格标签
表格可以较好地展示数据。
表格不是用来布局页面的，而是用来展示数据的。
表格基本语法:
<table>
<tr>
<td>
单元格文字
</td>
</tr>
</table>
其中<table></table>是表格标签
<tr></tr> 表示表格中的行,必须嵌套在table中。
<td></td>表示表格中的行中的单元格,必须嵌套在tr中。
td == table data.
表头单元格标签
表头单元格也是单元格，常用于表格的第一行，突出重要性，表头单元格中的文字会加粗显示。
<table>
<tr>
<th>
表头单元格文字
</th>
</tr>
</table>
表格属性（一般不用，用CSS设置）
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、right、center | 规定表格元素相对周围元素的对其方式 |
| border | 1或者"" | 规定表格是否有边框 |
| cellpadding | 像素值 | 规定单元边与其内容之间的空白，默认为像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认像素为2 |
| width | 像素或者百分比 | 规定表格的宽度 |
| height | 同理 | 同理 |
表格练习项目
<!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>
<table align="center" border="1" cellspacing = "0">
<tr>
<th>排名</th> <th>关键词</th> <th>趋势</th> <th>今日搜索</th> <th>最近七日</th> <th>相关链接</th>
</tr>
<tr>
<td>1</td> <td>鬼吹灯</td> <td>上升</td> <td>345</td> <td>123</td> <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec">贴吧</a> <a href="./img/鬼吹顶.jpeg">图片</a> <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a></td>
</tr>
</table>
</body>
</html>
表格的结构标签
因为表格过长，为了更好的区分，我们将表格分为表格头部和表格主体两个部分。thede 和 tbody。thead注意和th区分开。
<table>
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
合并单元格
1.合并单元格方式
(1) 跨行合并: rowspan = “合并单元格的个数”。
(2) 跨列合并: colspan = “合并单元格的个数”。
2.目标单元格
跨行:在最上侧为目标单元格书写代码。
跨列:在最左侧为目标单元格书写代码。
3.合并单元格的步骤
需要注意的时都在单元格上操作，而不能在<tr>上操作
<table border="1" cellspacing = "0" height = "300px" width = "500px">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
列表标签
如果说表格是来展示数据的，那么列表就是用来布局的
列表可大致分为三大类: 无序列表、有序列表和自定义列表
无序列表（重要）
无序列表在布局中经常被使用。
<!-- ul == unordered list -->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
注意：
1.无序列表中只能放 li 标签。
2.li 中可以放任何元素，相当于一个容器。
3.虽然它自带属性，但是我们习惯使用CSS来做。
有序列表
<!-- ul == unordered list -->
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
自定义列表
自定义列表经常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
<!-- dl == definition list
dt == definition title
dd == definition Description
-->
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
注意:
1.dl 里面只能包含 dt 和dd
2.dt 和 dd 的数量没有限制，一般一个 dt 对应多个 dd
最后运用CSS和列表来进行布局。
表单标签
使用表单的目的是收集用户的数据。<form>
表单的组成
在HTML中表单是由三部分组成的：表单域、表单控件（表单元素）和提示信息。
表单域：包含表单元素的区域。实现用户信息的收集和传递。
<form action = "url地址" method = "提交方式" name = "表单域名称">
</form>
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收处理表单数据的服务程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面的多个表单 |
表单元素
1.<input>输入表单元素
<input type = "属性值"/>
<!-- 根据不同的熟属性值，输入的字段可以有多种形式。（文本字段、复选框、掩码后的文字控件、单选按钮、按钮等） -->
<!-- name属性给表单元素起名字。当要实现单选框单选时，每个选项的name值都应该相同 -->
<!-- 单选和多选的name必须相同 -->
<!-- value属性可以设置默认值，也是给后台人员看的 -->
<!-- checked = "checked设置默认选定项" -->
更多属性请查阅开发文档
input 是一个单标签
- <label>标签
在表单中，使用label来绑定一个表单元素,当点击label标签内的文本时，浏览器会自动将焦点（光标）转到或者选择对应的表单元素上，用来增强用户的体验。
<label for = "username">用户名</label> <input type = "text" id = "username"/>
<!-- for 中的值与input标签中的id相同 -->
3.select 下拉表单元素
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
注意:
(1)：在select中至少包括一个选项
(2):在option中添加 selected = “selected” ,设置默认选定项。
4.textarea 文本域元素
当用户输入较多的文字时，就可以使用此标签
<textarea rows = "30" cols = "20">
文本内容
</textarea>
综合小练习
该项目用到的表格，表单，无序列表实现了一个组成网页。
使用表格来元素对齐。
<!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>Document</title>
</head>
<body>
<table width = "500" align="center">
<tr>
<tr>
<th colspan="2">
<h3>注册表</h3>
</th>
</tr>
<td>
性别
</td>
<td>
<form>
<input type="radio" name="sex" id="nan" checked = "checked"/> <label for="nan">男</label>
<input type="radio" name="sex" id="nv" /> <label for="nv">女</label>
</form>
</td>
</tr>
<tr>
<td>
生日
</td>
<td>
<select>
<option>--请选择年--</option>
<option>2000</option>
<option>20001</option>
</select>
<select>
<option>--请选择月--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<tr>
<td>
所在的地区
</td>
<td>
<input type="text" name="地区" value="四川省">
</td>
</tr>
<tr>
<td>
婚姻状况
</td>
<td>
<input type="radio" id="c1" name = "condition" checked="checked"> <label for="c1">未婚</label>
<input type="radio" id="c2" name = "condition"> <label for="c2">已婚</label>
<input type="radio" id="c3" name = "condition"> <label for="c3">丧偶</label>
</td>
</tr>
<tr>
<td>学历</td>
<td><input type="text" value="本科" name = "学历"></td>
</tr>
<tr>
<td>
喜欢的水果
</td>
<td>
<input type="checkbox" name="喜欢的水果" id = "f1"> <label for="f1">香蕉</label>
<input type="checkbox" name="喜欢的水果" id="f2"> <label for="f2">苹果</label>
<input type="checkbox" name="喜欢的水果" id="f3"> <label for="f3">菠萝</label>
<input type="checkbox" name="喜欢的水果" id="f4"> <label for="f4">葡萄</label>
</td>
</tr>
<tr>
<td>
自我介绍
</td>
<td>
<textarea>自我介绍</textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h5>我承若</h5>
<ul>
<li>
哈哈哈
</li>
<li>
哈哈哈
</li>
<li>
哈哈哈
</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
文档的查阅方式
W3C:http://w3cschool.com.cn
MDN
扫一扫
104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
