html快速过

网页的组成

​ 文字 图片 视频 超链接…

常见的浏览器

​ ie
​ Trident
​ 火狐
​ Gecko
​ 谷歌
​ blink
​ 苹果
​ webkit
​ 欧朋
​ blink

浏览器内核 -----解析代码

浏览器内核负责解析 html与css

web标准

​ 结构 html
​ 样式 css
​ 行为 js
​ 定义： 欧洲万维网联盟 研发web标准 （包含结构html 样式 css 行为js）

html

html 超文本标记语言

​ 文本： 一句话 诗篇文章…
​ 超文本： 包含文本 文本 音频 视频超链接 页面上的元素都属于超文本。
​ 标记语言： <strong>ddd</strong>
总结： html是一门语言 只不过带有特殊标签的一种超文本语言。

html结构

​ html：跟标签
​ head：头部标签
​ body：主体标签
​ title：标题标签
​ 标签的关系 ：包含关系
​ 标签的分类： 单标签 双标签
​ DOCTYPE：声明文档类型 告诉浏览器要按照html的语法规则去解析
​ lang=“en”：页面的语言类型
​ charset="UTF-8"编码格式 起到翻译作用

标签

标题标签h

​ 特点
​ 1.标题的部分用标题标签
​ 2.文字 加粗 加黑了
​ 3.标题标签 h1-h6
​ 4.页面中只能有一个h1标题

段落标签p

​ 段落标签 放置p标签
​ 水平线标签 <hr /> 单标签
​ 换行标签： <br />

span文字标签 div 盒子标签

文字类标签

倾斜标签

​ <i></i>
​ <em></em>

加粗标签

​ b加粗标签
​ strong：加粗标签

下划线标签

​ <ins></ins>
​ <u></u>

删除线

​ <del></del>
​ <s></s>

图片标签 <img />

属性

​ src: 图片的路径（来源）
​ alt：当图片加载错误时显示的文字
​ title:当鼠标悬停在图片上显示的文字
​ width:图片的宽度
​ height：图片的高度
​ border:图片的边框

属性的特点

​ 1.属性之间部分先后顺序
​ 2.属性名与属性值之间以键值对的形式存在
​ 3.属性名与属性值之间以等号分隔 属性值要以引号包裹；

链接标签 <a ></a>

​ 外部链接 <a href="http://www.baidu.com"></a> 写完整的 协议 域名 网址
​ 内部链接 <a href="index.html"></a> 直接写文件名即可

属性

​ href:指定跳转的页面
​ title：鼠标悬停显示的文字
​ target: _self(默认会覆盖原来的窗口) _blank(会以新的窗口打开) 窗口的打开方式
​ #：会阻止页面跳转但是会刷新页面

路径

相对路径

​ 在同一个文件夹直接找名字
​ 向上一级 …/
​ 向下 /

绝对路径

<table></table> 表格

​ <tr></tr> 行
​ <td></td> 单元格
​ <th></th> 表头 加粗 加黑 自动居中
​ <caption></caption> 表格的标题 写在内部 显示外部 居中
​ <thead></thead> 结构头
​ <tbody></tbody> 结构体
​ <tfoot></tfoot> 结构底

属性

​ border:表格的边框 默认的0
​ width：宽度
​ height：高度
​ cellspacing:单元格与单元格之间的距离
​ cellspadding：单元格与内容之间的距离
​ align: left/center/right
​ 注意： 当给表格设置居中整个表格会居中（文字不会居中） 当指定tr 或者td 文字居中
​ colspan:列合并
​ rowspan：行合并

列表

​ 无序列表<ul><li></li></ul>

​ 有序列表<ol><li></li></ol>

​ 自定义列表<dl><dt></dt><dd></dd></dl>

表单

input属性

​ 1.text：文本框
​ 2.password：密码框
​ 3.radio：单选按钮
​ 4.checkbox：复选框
​ 5.button：普通按钮
​ 6.reset：重置按钮 需要配合form表单才有作用
​ 7.submit：提交按钮
​ 8.image 属性 src
​ 9.file 文件按钮 上传图片

name属性

​ 1.发送后台…
​ 2.name的标识 对于单选按钮 只能选择一个

value：文本框默认显示的文字

checked：默认选中

​ 可以写一个属性 也可以 属性名=属性值

label用法

​ 1.<label>请输入 <input type="text"> <input type="text"></label>
​ 2.<label for="a">请输入</label>
​ <input type="text" id="a">

文本域：textarea：用户留言

下拉列表

<select>
			<option>请选择</option>
			<option >苹果</option>
			<option selected>香蕉</option>
			<option>橘子</option>
		</select>

​ 下拉列表的默认选中： selected

form表单

​ 主要的作用：是收集用户信息 发送后台
​ action： 提交后台的地址
​ method=“get/post” 提交（传输）后台的方式
​ name =“a” 告诉服务器 由哪个表单提交过来的

整理笔记资源来自itheima