HTML
HTML是什么
超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。
是一种浏览器可识别的规则
HTML不是什么
HTML是一种标记语言(markup language),它不是一种编程语言。
HTML使用标签来描述网页。
HTML注释
<!--注释内容-->
标签又称为:标记
双闭合标签
示例:<html></html>
单闭合标签
示例:<meta charset="UTF-8">
标签分类
块级标签:h1~h6, p, br, ht, div
块级标签内部可以嵌套任意的块级标签和行内标签
特列:p虽然是块级标签 但是它的内部只能嵌套行内标签 不能嵌套块级标签,如果嵌套了 没有问题 知识不符合html语法规范
行内标签:u, s, i, b, span
自身文本多大 就占多大
行内标签内部不能嵌套块级标签和行内标签
head标签
- title标签:显示网站的标题
- meta标签:提供有关页面的元信息
- style标签:定义内部样式表
- link标签:链接css资源文件、网站图标
- script标签:链接脚本js文件
body标签
标签基本标签
h1~h6标题标签
s: 删除线
b: 加粗
u: 下划线
i: 斜体
p: 独占一行
br: 换行
hr: 分割线
段落标签
p标签,每个段落都要用p标签包裹
示例:<p>内容</p>
超链接标签
a标签
示例:<a href="网址">内容
a属性:
- href:链接新网址,回到顶部,跳转邮箱,下载文件
- title:鼠标悬浮上的标题
- style:行内样式
- target:目标 _self:默认值,在当前页面中打开新的链接
_blank:在新的空白页面打开新的链接
清除下划线:
text-decoration: none;
none;无线
underline:下划线
overline:上划线
line-through:删除线
图片标签
img标签
示例<img src="" alt="头像">
img属性:
- src:图片的资源地址
- alt:图片加载失败时显示的标题
- title:鼠标悬浮时显示的标题
- width:设置图片的宽度
- height:设置图片的高度
字体标签
- 粗体标签:<b>或<strong>
- 斜体标签:<i>或<em>
- 上标:<sup>
- 下标:<sub>
列表标签
- 无序列表 <ul> ,无序列表中的每一项是<li>
ul: unordered list
li: list item(列表项)
ul 属性:type
- disc: 实心圆点,默认
- square: 实心方点
- circle: 空心圆
- 设置为无序号: list-style: none
2 有序列表 <ol> , 里面的每一项都是<li>
ol: ordered list
表格标签
table标签
表格:<table>, 表头:<th>, 行 <tr>, 列:<td>
table属性:
border: 边框
cellspacing:单元格和单元格之间的距离(外边距)
bordercolor:表格的边框颜色
<table border='1' cellspacing=0>
<th>
<td>id</td>
<td>name</td>
</th>
<tr>
<td>1</td>
<td>mjj</td>
</tr>
</table>
form表单标签
获取用户输入(选择,上传文件。。)并且将数据打包发送非后端
action: 用来控制数据提交的路径(到底朝哪个后端服务器提交数据)
三种写法:1.不写 默认就是朝当前该页面所在的地址提交数据
2.全路径(https://www.baidu.com)
3.只写路径后缀(/index/)
method:表单数据的提交方式,默认get,还有post
- get: 明文提交,不安全,只能提交2kb信息,提交的内容会在地址上显示
- post: 密文提交,安全,可以提交大量信息
- enctype:表单数据的编码方式(加密方式),只能在post方式下使用
input标签
type属性:
text: 纯文本, password:密文
date: 日期,datetime-local: 准确时间
radio:多选一, checkbox: 多选多
默认:checked="checked" 当标签的属性名和属性值相同的时候 可以只写属性名
女<input type="radio" name="gender" checked="checked">
简写
女<input type="radio" name="gender" checked>
reset: 重置
button: 普通按钮
submit: 触发form表单提交动作
name: 提交到当前服务器的名称, value: 提交到当前服务器的值
file: 上传文件
textarea标签,获取大段文本, cols: 指定文本区域列数, rows指定文本区域行数
lable通常是配合input一起使用
for 属性规定 label 与哪个表单元素绑定。实现点击关联字光标在关联输入框闪烁
点击lable标签内的内容, 会自动让对应的input标签 聚焦 (点击文字就可以把光标放到输入框内)
<label for="d2">我是谁</label> <input type="text" id="d2">
input获取到的用户输入就类似于是字典的value
input中的name属性就类似于是字典的key
select标签 下拉框, 一个个选项就是一个个option标签,可以加一个multiple该成多选
<select name="" id="" multiple>
默认选中 selected="selected"
能够触发form表单提交数据的按钮
盒子标签
div标签:division,分割
定义:把网页分割成不同的独立的逻辑区域,必须独占一行
div属性:
align:设置区域的位置,可选left, right, center
span标签
定义:小区域标签,在不影响文本正常的情况下,单独设置对应的样式
span和div的唯一区别:span是不换行的,div是换行的