HTML
HTML简介
HTML是什么
HTML：Hyper Text Markup Language 超文本标记语言
由各种标签组成，用来制作网页，告诉浏览器该如何显示页面
Web标准
W3C：World Wide Web Consortium万维网联盟，制定Web技术相关标准和规范的组织，HTML就是W3C制定的标准。
h5
Web的构成
结构（HTML）、表现（CSS）、行为（JAVASCRIPT）
后缀名
HTML文件以.htm,.html为后缀
基本结构
<!DOCTYPE html> <!-- 表示使用HTML5版本规范 -->
<html lang="en"> <!--提示当前网站是一个英文网站,不影响中文-->
<html lang="zh—CN"><!--推荐-->
<head> <!-- 头部提供关于网页的相关信息，如标题、字符编码、关键字等摘要信息 -->
<meta charset="UTF-8"> <!--一般用于seo -->
<title>Document</title>
</head>
<body>
<!-- 主体<body>部分提供网页的具体内容，真正显示在页面中 -->
</body>
</html>
注释
<! – 注释内容 – >
浏览器内核
浏览器内核：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面
特殊字符
< < 小于号 less than
> > 大于号 greater than
空格 space 对于连续的空白字符(包含空格、缩进、换行等)，在浏览器中显示时只会显示为一个空格
& & 与
© © 版权符号 copyright
® ® 注册符号 register
常用标签
标签关系
包含关系和并列关系
标题标签 <h1></h1> h1-h6 <!--加粗 数字越大字越小--> 双标签 独占一行
段落标签 <p> </p> 段落与段落间距大
换行 <br/>单标签 间距小 强制换行 行与行之间间距小
水平线 <hr/> 单标签
没有语义代表盒子 布局
<div></div> 单独占一行
<span></span> 一行显示
文本格式化标签
<strong></strong> <b></b> 加粗 strong语义更强烈
<em></em> <i></i> 倾斜 em语义更强烈
<del></del><s></s>删除线 del语义更强烈
<ins></ins> <u></u>下划线 ins语义更强烈
图像标签
<img src = "../a.img" alt = "" title = "" width ="">
<!--属性值必须加双引号 属性之间以空格间隔-->
项目图片一般写相对路径
titile 鼠标放到图片上显示的文字
alt 图片未加载显示的文字
宽高值设置一个 会等比例缩放
border 边框 一般用css设置
超链接标签
<a href = "https://www.baidu.com" target = "_blank">百度</a>
属性 href 跳转目标（必须属性）
target 打开标签 值 _self (默认)当前窗口打开 _blank新窗口打开
外部链接 <a href = "https://www.baidu.com" target = "_blank">百度</a> 外部链接要加http
内部链接 <a href = 'a.html' target = '_self' ></a>
空链接 <a href = "#" ></a> 值 # 空链接 链接地址还没好
下载链接 <a href = "img.zip"> </a> 地址链接是个文件
图像链接 点击图像跳转、音频、都能当链接 相当于文本
<a href = "#" target="" >
<img src = "../a.img" alt = "" title = "" width ="">
</a>
锚点链接
<a href = "#down"></a> 定义锚点链接
<h1 id = "down"> 跳转的位置
跳转到标记位置
<a href ="#dwon" ></a>
<a name ="dwon" ></a>
功能性链接
邮件链接
mailto
<a href ="mailto:" > </a>
qq在线咨询 百度qq推广
表格标签
表格 <table>
行 <tr>
列 <td>
<thead>
<tr>
<th></th> 代替td 用于第一行 自动加粗 居中显示
</tr>
</thead>
用<thead><tbody> 标签扩起来有更好的语义
cellpadding 表格和文字之间的距离
cellspacing 属性 表格和表格之间的距离
align left center right
rowspan 跨行合并 上下 值 个数
colspan 跨列合并 删除多余的单元格
列表标签
用来布局
1
2
3
无序列表 (重点)
<ul>
<li>123</li>
</ul>
ul 里只能放 li标签 li里可填任意标签
有序列表 (理解) 排行榜
会自动加 123
<ol>
<li>123</li>
</ol>
ol 里只能放 li标签 li里可填任意标签
自定义列表 <!-- 一般用在公司网页底部 -->
<dl>
<dt>南京市</dt> 列表名称 个数没限制 但最好是一个dt对应多个dd
<dd>鼓楼区</dd> 列表内容 都围绕着dt进行描述
<dd>栖霞区</dd>
<dd>玄武区</dd>
</dl>
浏览器显示：
南京市
鼓楼区
栖霞区
玄武区
行内元素和块元素
块元素
无论内容多少,该元素占一行，自动换行
p h1 h6 div 列表
行内元素
内容撑开宽度,不会换行，左右都是行内元素可以排成一行
a strong em span
块元素内可以包含行内元素,反之不能
表单标签
表单主要是收集信息 表单的组成: 表单域+表单控件+提示信息
表单域
form表单域 把表单域中的所有表单元素的结果提交给后台
<form action = "" method = "get"> 同步提交 表单域
表单控件
<input type = "text" name = ""/> 单标签 表单控件 不换行
必须属性 type
<input type = "password" name = ""/>
<input type = "submit" name = ""> 提交按钮
<input type = "reset" name = ""> 重置按钮
<input type = "radio" name = "a1" value = "" checked> 单选按钮 圆形
<label for = "表单元素的id"> 用于浏览器自动对焦 增加用户的体验</label>
<input type = "radio" name = "a1" value = ""> 方框
<input type = "checkbox" name = "a1" value = ""> 多选框
name 必须相同 不同太麻烦
name 表单标签的名字 必须有。
checked 默认选中 主要用于单选和多选按钮
maxlength 输入的最大长度 （了解）
单选多选 必须要有value属性。
<input type = "button" name = "a1" value ="按钮里的文字">按钮
<input type = "image" name = "a1" >图片按钮
<input type = "file" name = "a1" accept = >文件域
accept 设置可选的文件类型，用来限制上传的文件类型
使用MIME格式字符串对资源类型进行限制
常用MIME类型：
纯文本：text/html、text/css、text/javascript、text/xml、text/plain
图像：image/jpeg、image/png、image/gif
注：可以通过类似`image/*`来匹配所有图像文件
<input type = "email" name = "a1" >邮箱的验证
number 数字验证 url
<input type = "range" name = "a1" min ="" max= ""> 滑块 search 搜索框
<select> 下拉列表
<option selected>选项</option>
selected 默认显示的选项值
</select>
1行多少字 几行 了解
<textarea cols = "" rows = ""> 文本域
浏览器页面打开 默认文本
</textarea>
</form>
提交表单需要name的值
readonly 只读
disabled 禁用
hidden 隐藏域
表单的验证
placeholder属性 提示信息 用在所有的输入框中
required 不能为空 非空判断
pattern 正则表达式
媒体标签
音频和视频
视频
<video src = "" controls autopaly ></video>
音频
<audio src = "" controls autopaly ></audio>
controls 控制条
autopaly 自动播放
页面结构（约定）
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容 |
| **footer ** | 标记脚步区域的内容 |
| section | Web页面的一块独立区域 |
| article | 独立的内容文章 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航辅助内容 |
内联框架
使用iframe可以在一个页面中引用另一个页面，实现复用，灵活（设计页首导航条）
<iframe src="" name = "hello" width="" height=""></iframe> src 引用页面的地址
name 框架的名字
<!-- 一定要成对出现 -->
iframe 和 a标签使用
59万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
