HTML学习结构
1. 了解前端知识
1.1 B/S架构
C/S结构，即Client/Server(客户机/服务器)结构，是大家熟知的软件系统体系结构，通过将任务合理分配到Client端和Server端，降低了系统的通讯开销，可以充分利用两端硬件环境的优势。早期的软件系统多以此作为首选设计标准。
特点：CS:(Client/Server,客户端/服务器模式),桌面级应用 响应速度快，安全性强，个性化能力强，响应数据较快
1.2 C/S架构
B/S结构，即Browser/Server（浏览器/服务器）结构，是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。在这种结构下，用户界面完全通过WWW浏览器实现。
特点：BS:(Browser/Server,浏览器/服务器模式),web应用 可以实现跨平台，客户端零维护，但是个性化能力低，响应速度较慢。
问题：数据放在服务端和客户端的利与弊？
1.3 浏览器内核
Trident：代表作品是IE，俗称IE内核；使用IE内核的浏览器包括猎豹安全、360极速浏览器、百度浏览器、兼容模式的浏览器等
WebKit内核：代表作品是Safari、旧版的Chrome
Presto内核：代表作品是Opera，Presto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了 Presto
Blink内核：代表作品是Chrome、Opera；由Google和Opera Software开发的浏览器排版引擎
Gecko内核：代表作品是Firefox，俗称Firefox内核
1.4 Web标准构成
结构(Structure)、表现(Presentation)、行为(Behavior)
结构 结构用于对网页元素进行整理和分类，咱们主要学的是HTML。 表现 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS 行为 行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript
2. HTML 简介
超文本标记语言（HyperTest Markup Language），是一种用于创建见面的标准标记语言。 HTML文件一般的后缀名为.html或.htm或.shtml。
3. HTML结构
3.1 <!DOCTYPE html>
声明，告诉浏览器使用html规范
3.2 <html lang="zh">
指定html语言种类
3.3 head头
meta:网页基本信息 title:网页标题
3.4 注释
注释：<!---->
html结构
<!--DOCTYPE：告诉浏览器使用什么规范（默认是html）-->
<!DOCTYPE html>
<!--语言 zh中文 en英文-->
<html lang="zh">
<!--head标签代表网页头部-->
<head>
<!-- meta 描述性标签，表示用来描述网站的一些信息-->
<!-- 一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="hyx的java学习">
<meta name="description" content="一起来学习java">
<!--网站标题-->
<title>Title</title>
</head>
<!--body代表主体-->
<body>
<!-- 我是一个注释，放在这里值为增加可读性 -->
Hello World！
</body>
</html>4. HTML基本标签
4.1 常见文本标签
hx\p\hr\br\b\i\sub\sup\del\ins\bdo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML标签</title>
</head>
<body>
<!-- 标题标签 -->
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>
<!-- 段落标签 -->
<p>p标签</p>
<!-- 换行标签 -->
<p>hello world !</p>
<br>
<p>世界，你好呀！</p>
<!-- b加粗 -->
<p><b>日出时</b>捡到的光，<b>日落时</b>要还给太阳！</p>
<!-- i斜体 -->
<p><i>人生总有低估，免不了强颜欢笑</i></p>
<!-- hr水平线标签 -->
<p>正义之下，真理不朽</p>
<hr>
<!-- sub下标 sup上标 -->
<p>9<sub>8</sub></p>
<p>9<sup>8</sup></p>
<!-- 删除线 -->
<p><del>价格：9999￥</del></p>
<!-- ins下划线 -->
<p><ins>选错了路，最差也只是回到原点！</ins></p>
<!-- bdo倒序使用加上dir属性值 -->
<bdo dir="rtl">123456</bdo>
</body>
</html>4.2 特殊字符
大小于摄氏度等符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML标签</title>
</head>
<body>
<!-- 空格符 -->
<p>无 人 向 津 的 港 口 总 是 开 满 鲜 花</p>
<!-- 大于小于和号 -->
<p>5 > 3</p>
<p>5 < 7</p>
<p>5 & 3</p>
<!-- 人民币、版权、注册商标、摄氏度、正负号、乘号、除号、平方、立方 -->
¥人民币
©版权
®注册商标
°摄氏度
±正负号
×乘号
÷除号
5²平方
6³立方
</body>
</html>4.3 a超链接
可以通过超链接<a>实现页面之间的跳转
用法：<a href="跳转的位置">链接显示内容</a>
属性：href
1. 填写一个相对路径或者完整URL路径。
2. 填写一个#ID，实现锚连接。
target
_self 当前框架跳转 【默认】
_blank 打开一个新窗口/tab跳转
_parent 当在iframe中的时候，会触发父级框架跳转
_top 当在iframe中的时候，会触发顶级框架跳转
自定义 iframe的name值
<a href="目标的url及文件地址" target="目标窗口的弹出方式"></a>超链接与锚点定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML标签</title>
</head>
<body>
<!-- a超链接 -->
<a href="https://www.baidu.com/">百度一下，你就知道</a>
<!-- target="_self"默认 -->
<a href="https://www.baidu.com/" target="_self">百度一下</a>
<!-- target="_blank" -->
<a href="https://www.baidu.com/" target="_blank">你就知道</a>
<!-- https://www.baidu.com/ #p0 ：加了个锚点 -->
<a href="https://www.baidu.com/ #p0" target="_blank">你就知道</a>
<!-- 锚点定位 -->
<P id="top">页面顶部</P>
<a href="#bottom">直到页面底部</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>
<p id="bottom">页面底部</p>
<a href="#top">直到页面顶部</a>
</body>
</html>格外知识：base标签
<!--
<base target="_blank" />
1. base 可以设置整体链接的打开状态
2. base 写到 <head> </head> 之间
3. 把所有的连接 都默认添加 target="_blank"
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<base target="_blank">
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com">新浪</a>
<a href="http://www.sohu.com">搜狐</a>
<a href="http://www.163.com">网易</a>
</body>
</html>4.4 img图像
img标签属性
img标签格式：<img src="图片路径" alt="预备替换文字" width="宽度" height="高度">
属性: src 图片的地址，可以本地的图片，也可是网络图片
width 图片的宽度，单位像素
height 图片的高度，单位像素
alt 当图片加载失败的时候，用于替换图片的文字内容。
title 鼠标悬停时显示的内容
border 设置图像的边框样式img标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML标签</title>
</head>
<body>
<!-- img标签 -->
<!-- width属性定义宽度,另一边按比例自动增减 -->
<img src="https://img-blog.csdnimg.cn/1254871354764d509a18e07049238f72.png" width="300px">
<br>
<!-- height属性定义高度,另一边按比例自动增减 -->
<img src="https://img-blog.csdnimg.cn/1254871354764d509a18e07049238f72.png" height="300px">
<br>
<!-- alt图片加载失败，提示的文字 -->
<img src="https://img-bl.png" height="300px" alt="图片加载失败！">
<br>
<!-- title鼠标悬停时显示的内容 -->
<img src="https://img-blog.csdnimg.cn/1254871354764d509a18e07049238f72.png" height="300px" title="hello world!">
<br>
<!-- border设置边框 -->
<img src="https://img-blog.csdnimg.cn/1254871354764d509a18e07049238f72.png" width="300px" style="border: red 1px solid;">
<br>
</body>
</html>5. 列表标签
ul无序列表/ol有序列表/dd自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML标签</title>
</head>
<body>
<!-- ul无序列表 -->
<ul>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.sina.com">新浪</a></li>
<li><a href="http://www.sohu.com">搜狐</a></li>
<li><a href="http://www.163.com">网易</a></li>
</ul>
<!-- ol有序列表 -->
<ol>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.sina.com">新浪</a></li>
<li><a href="http://www.sohu.com">搜狐</a></li>
<li><a href="http://www.163.com">网易</a></li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>网站1</dt>
<dd><a href="http://www.baidu.com">百度</a></dd>
<dd><a href="http://www.sina.com">新浪</a></dd>
<dt>网站2</dt>
<dd><a href="http://www.sohu.com">搜狐</a></dd>
<dd><a href="http://www.163.com">网易</a></dd>
</dl>
</body>
</html>6. table表格
表格由<table>标签来定义，每个表格有若干个行，每个行用<tr>标签来定义，每一行有多个单元格，每个单元格用<td>来定义。
其中如果有表头的话，表头用<th>来定义。th比起td来说有加粗和居中效果
table 的属性
border 表格最外层的宽度，0表示没有宽度
width 表格的宽度，单位像素
height 表格的高度，单位像素
cellspacing 表示单元格与单元格之间的间隙宽度
cellpadding 表示单元格与填充在内的内容之间的间隙宽度
tr/th/td 的属性
align 表示单元格水平方向的对齐方式，可选值有：left、center、right
valign 表示单元格垂真方向的对齐方式，可选值有：top、center、bottom
bgcolor 设置单元格的底色，用的#rgb表示。
td 的属性
colspan 同一行的多个列的单元格进行合并
rowspan 同一列的多个行的单元格进行合并
caption 表格标题标签
table属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML标签</title>
</head>
<body>
<!-- table表格 -->
<table border="1px" width="800px" height="200px" cellspacing="0" cellpadding="40px">
<!-- caption表格标题标签 -->
<caption>星期一~星期四安排</caption>
<!-- tr定义一行 -->
<tr>
<!-- td/th定义一列 -->
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
</tr>
<tr>
<td>上午成都</td>
<td>上午重庆</td>
<td>上午上海</td>
<td>上午北京</td>
</tr>
<tr>
<td>下午返回</td>
<td>下午返回</td>
<td>下午返回</td>
<td>下午返回</td>
</tr>
<tr>
<td>晚上休息</td>
<td>晚上休息</td>
<td>晚上休息</td>
<td>晚上休息</td>
</tr>
</table>
</body>
</html>
表格属性理解结构图
tr/td标签属性及合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML标签</title>
</head>
<body>
<!-- table表格 -->
<table border="1px" width="800px" height="200px" cellspacing="0">
<!-- tr定义一行 -->
<tr bgcolor="red">
<!-- td/th定义一列 -->
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
</tr>
<tr>
<td align="center">上午成都</td>
<td align="left">上午重庆</td>
<td valign="bottom">上午上海</td>
<td align="left" valign="top">上午北京</td>
</tr>
<tr align="center">
<td rowspan="2">休息</td>
<td>下午返回</td>
<td>下午返回</td>
<td>下午返回</td>
</tr>
<tr>
<td colspan="3" align="center">晚上休息</td>
</tr>
</table>
</body>
</html>-
<thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签！
-
<tbody></tbody>：用于定义表格的主体。放数据本体 。
-
<tfoot></tfoot>放表格的脚注之类。
-
以上标签都是放到table标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- align="center表格整体居中" -->
<table border="1" cellspacing="0" align="center" width="500">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>家庭地址</td>
<td colspan="2"> 重庆</td>
</tr>
</tfoot>
</table>
</body>
</html>7. 表单标签
<input type="?">来实现表单控件
属性 type的值：
type="text" 文件输入框[默认]
type="password" 密码输入框
type="radio" 单选框
type="checkbox" 复选框
type="file" 文件选择
type="reset" 重置按钮
type="button" 普通按钮
type="submit" 提交按钮
type="image" 图像形式的提交按钮
type="color" 颜色
type="date" 日期
placeholder 输入框的提示文字
value 输入框的默认值
checked 单选框/复选框默认选中
name 控件的名字
maxlength 正整数，控件允许输入的最大字符数
<select>实现下拉框
子元素<option selected> 表示下拉项
属性 selected 表示默认选择项
<textarea rows="行数" cols="列数">实现文本域
属性 rows和cols用于控制文本域控件的大小的
<button>实现按钮
<label>用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。 7.1 input标签
input的控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML标签</title>
</head>
<body>
<!-- 表单input标签 type:text默认-->
<!-- placeholder提示文字 -->
<!-- value输入框默认值 -->
<!-- maxlength -->
type:text默认<input type="text" placeholder="名字" maxlength="8"><br>
type:text默认<input type="text" placeholder="匿名" value="hello"><br>
<!-- 表单input标签 type:password-->
type:password密码框<input type="password"><br>
<!-- 表单input标签 type:radio-->
<!-- checked默认选中 -->
type:radio单选框<input type="radio" name="sex" checked>男 <input type="radio" name="sex">女
<br>
<!-- 表单input标签 type:checkbox-->
type:checkbox<input type="checkbox" checked>A <input type="checkbox">B <input type="checkbox">C
<br>
<!-- 表单input标签 type:file-->
type:file文件框<input type="file"><br>
<!-- 表单input标签 type:reset与form标签一起使用，不然可能没有效果-->
<form>
<div>
<label for="example">Type in some sample text</label>
<input id="example" type="text">
</div>
<div>
<!-- 表单input标签 type:submit提交按钮-->
type:submit<input type="submit">
type:reset<input type="reset" value="Reset the form"
accesskey="r">
</div>
</form>
<!-- 表单input标签 type:button-->
type:button<input type="button" value="这是个按钮"><br>
<!-- 表单input标签 type:image-->
type:image<input type="image" width="100" height="30" alt="Login"
src="https://img-blog.csdnimg.cn/1254871354764d509a18e07049238f72.png">
<!-- label标签 -->
<!-- 第一种用法就是用label直接包括input表单。 -->
<label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label>
<!-- 第二种用法 for 属性规定 label 与哪个表单元素绑定。 -->
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
<h4>第一种用法，label直接包含 表单</h4>
<label> 用户名： <input type="text" /> </label>
<h4>第二种方法，通过for 和 id 来控制 </h4>
<label for="nc"> 昵称： </label> <input type="text" id="nc" />
</body>
</html>7.2 select标签
select下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 下拉框select -->
<!-- selected默认选择 -->
<select>
<option>---高一---</option>
<option selected>---高二---</option>
<option>---高三---</option>
</select>
</body>
</html>7.3 文本域&&按钮
textarea&&button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- textarea文本域 -->
<!-- rows字符行数 cols字符列数 -->
<textarea rows="3" cols="11">(默认值)自我介绍</textarea>
<br>
<!-- button按钮 -->
<button>这是个按钮</button>
</body>
</html>8. 视频&&音频
通过<audio controls src="xx.mp3"/> 单个音频文件 通过<video controls src="xx.mp4" width="" height=""/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--视频
src 资源路径
controls 控制面板
autoplay 自动播放
-->
<video src="xxx/xxx/xxx" controls autoplay></video>
<!--音频-->
<audio src="xxx/xxx/xxx" controls autoplay></audio>
</body>
</html>9. 页面结构
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或者页面中的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用 |
| nav | 导航类辅助内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构</title>
</head>
<body>
<!--页面头部-->
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>10. iframe框架
通过框架可以在一个浏览器窗口中显示多个页面，
用法：<iframe src="URL" width="?" height="?"></iframe>
属性：wdith 宽度
height 高度
frameborder 定义是否显示边框，0表示不显示边框
格式：<iframe src="path" name="mainFrame" ></iframe>
iframe标签，必须要有src属性即引用页面的地址
给标签加上name属性后，可以做a标签的target属性，即在内联窗口中打开链接
a超链接target:
_parent 当在iframe中的时候，会触发父级框架跳转
_top 当在iframe中的时候，会触发顶级框架跳转
自定义 iframe的name值<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!-- iframe框架 -->
<iframe src="https://img-blog.csdnimg.cn/1254871354764d509a18e07049238f72.png" width="200px" height="100px"></iframe>
</body>
</html>11.区块
<span>内容</span> 是一个内联元素，一般与CSS一同使用，否则没有什么效果，宽度为内容的宽度。
<div>内容</div> 是一个块级元素，这个块会导致内容换行。宽度默认为100%;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!-- div标签 -->
<div>hello world !</div>
<!-- span标签 -->
<span>hello </span><span>world !</span>
</body>
</html>
579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
