HTML
# WEB标准: 结构、表现、行为
结构:结构用于对网页元素进行整理和分类,主要是HTML
表现:表现用于设置网页元素的版式、颜色、大小等外观,主要是CSS
行为:行为是指网页模型的定义及交互的编写,主要是JavaScript
```html
<HTML> // 语言标记
<head> // 头部
</head>
<body> // 身体
</body>
</HTML>
```
# 标签类型:
```html
单标签: <br/>换行
<hr/>分割线
<img/>图片
双标签: <title>网页标题</title> 标题标签
<h1-h6>标题内容</h1-h6> 标题标签
<p>文本内容</p> 段落标签
<a>、</a> 超链接标签
<b>、</b>、<strong>、</strong> 加粗标签
<i>、</i>、<em>、</em> 文字斜体
<s>、</s>、<del>、</del> 文字删除线
<u>、</u>、<ins>、</ins> 文字下划线
<div>、</div>、<span>、</span> 两者区别就是div占一行,span占内容大小
```
## \<img> 的属性
* `src` 图片的路径
* `alt` 图片不显示时显示的文本
* `title` 鼠标移动到图片上显示的文本
* `width` 图片的宽
* `height ` 图片的高
* `border ` 在图片周围加个框
## \<a>的属性
* `href` 跳转的链接
* `# ` 空链接
* `target` 打开链接的方式
* `_self` 原网页跳转
* `_blank` 新创建网页
## \<audio> 的属性
* `src` 音频URL,支持MP3、Ogg、Wav
* `controls` 显示视频控制面板
* `loop` 循环播放
* `autoplay` 自动播放
## \<video> 的属性
* `src` 视频URL,支持MP4、WebM、Ogg
* `controls` 显示视频控制面板
* `loop` 循环播放
* `muted` 静音播放
* `autoplay` 自动播放
<!-- 内容 --> 中间内容就被注释掉,类似 /* */
../ 返回上一级文件夹,如果需要返回多个上级加多个
快速跳转到锚点,就是锚点设置ID,目录加a标签跳转路径是ID
<base />用法等于a标签,只是用来设置网页跳转方式为打开新标签,在head里面设置
<pre>内容</pre> 预格式化文本,就是读取内容的格式直接显示,不需要用其他标签来显示样式
特殊字符:
* ` ` 空格
* `<` <
* `>` >
* `&` &
* `¥` ¥
* `×` ×
* `÷` ÷
# 表格标签
```html
<table></table> 表格标签
<tr></tr> 行
<thead></thead> 表格头部
<tbody></tbody> 表格身体
<th></th> 表头单元格 ↓ 两者为
<td></td> 行内单元格 ↑ 同级
<caption></caption> 表格标题标签,表格上方中间
表格标签的属性:
border 边框 单位:像素
cellspacing 单元格与单元格边框之间的空白间距 单位:像素,默认2像素 等于外边距
cellpadding 单元格内容与单元格边框之间的空白距离 单位:像素,默认1像素 等于内边距
width 表格的宽度
height 表格的高度
align 表格内容的对齐方式 left、center、right
rowspan 跨行合并 填充内容为合并表格数 先上 向下合并
colspan 跨列合并 填充内容为合并表格数 先左 向右合并
```
# 列表标签
```html
<ul></ul> 无序列表 内部只允许存放li
<li></li> 列
<ol></ol> 有序列表 跟ul一样,只是有序号
<dl></dl> 自定义列表
<dt></dt> 自定义列表 标题/父级
<dd></dd> 自定义列表 描述/详情/子级
```
# 表单标签
```html
<input /> 输入框
type 属性
text 单行文本
password 密码输入
radio 单选按钮
checkbox 复选按钮
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图片形式的提交按钮
file 文件域
name 控件的名称
value 输入框内的值得属性 value = "你好啊"
size 输入框的宽度设置
checked 单选复选框的选中情况的属性名称,checked = “checked”就是选中
maxlength 输入框内最大支持的输入字符数
<label></label> 提高用户体验,光标到指定的输入框内
<textarea></textarea> 多行文本框,文本域
```
# 下拉列表
```html
<select></select> 下拉框 实际中,基本不用,浏览器显示不一样,都是用div模拟
<option></option> 框内选项
语法方式:
<select>
<option>选项1</option>
<option selected="selected">选项2</option> 默认选中这个选项
<option>选项3</option>
</select>
```
# 表单域
```html
<form></form> 表单域,中间存放表单
属性:
action 提交的连接
method 提交方式
name 表单域的名称
<form action = "http://www.baidu.com">
<input tyep = "text">
</form>
<link /> // 引用CSS的标签
```