HTML文档结构
<!DOCTYPE html> <html lang="en"> # 设置为中文：lang="zh-CN" <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </heml>
- <head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
- <title>定义了网页标题，在浏览器标题栏显示。
- <body>之间的文本是可见的网页主体内容
属性
- id：定义标签的唯一ID，HTML文档树中唯一
- class：为html元素定义一个或多个类名（classname）(CSS样式类名)
- style：规定元素的行内样式（CSS样式）
<head></head>内常用标签
- <title></title>：定义网页标题
- <style></style>：定义内部样式表
- <script></script>：定义JS代码或引入外部JS文件
- <link/>：引入外部样式表文件
- <meta/>：定义网页原信息
<!--2秒后跳转到对应的网址，注意引号--> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> <!--指定文档的编码类型--> <meta http-equiv="content-Type" charset=UTF8"> <!--告诉IE以最高级模式渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="keywords" content=""> name属性：主要用于描述网页 设置关键字keyword 帮助查询
<meta name="description" content=""
<body></body>内常用标签
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--换行--> <br> <!--水平线--><hr>
特殊字符
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | |
| 版权 | © |
| 注册 | ® |
div标签和span标签
div标签用来定义一个块级元素，并无实际的意义。
span标签用来定义内联(行内)元素，并无实际的意义。
块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
注意：
块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
p标签不能包含块级标签，p标签也不能包含p标签。
img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
a标签
<a href="http://www.sogo.com" target="_blank" >SOGO</a>
href属性指定目标网页地址。
target：
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页
列表
1.无序列表
<ul type="None"> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul>
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式
2.有序列表
<ol type="1" start="2"> <li>aaa<li> <li>bbb<li> <li>ccc<li> </ol> type属性: 1:数字列表，默认值 A:大写字母 a:小写字母 I:大写罗马 i:小写罗马
3.标题列表
<dl> <dt>标题1</dt> <dd>内容</dd> <dt>标题2</dt> <dd>内容</dd> <dd>内容</dd> </dl>
表格
<table> <thread> # 规定表格的列 <tr> <th>序号</th> <th>姓名</th> <th>爱好</th> <tr> <thread> <tbody> <tr> <td>1</td> <td>小明</td> <td>打球</td> <tr> </tbody> </table>
属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
border、cellpadding、cellspacing 设置在 <table ...> 里
rowspan、colspan 设置在 <td ...> 里
表单
功能：
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
表单属性：
- accept-charset：规定在被提交表单中使用的字符集（默认：页面字符集）。
- action：规定向何处提交表单的地址（URL）
- autocomplete：规定浏览器应该自动完成表单（默认：开启）。
- method：规定在提交表单时所用的 HTTP 方法（默认：GET）。
- name：规定识别表单的名称（对于 DOM 使用：document.forms.name）。
- novalidate：规定浏览器不验证表单。
input标签
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | |
| radio | 单选框 | |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置按钮 | |
| button | 普通按钮 | |
| hidden | 隐藏输入框 | |
| file | 文本选择框 |
属性说明:
- name：表单提交时的“键”，注意和id的区别
- value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
- checked：radio和checkbox默认被选中的项
- readonly：text和password设置只读
- disabled：所有input均适用
select标签
<select name="form1" id="s1"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="sc">四川</option> </select> <select name="form2" id="s2"> <optgroup label="北京"> <option value="cp">昌平</option> <option value="cy">朝阳</option> </optgroup> <optgroup label="上海"> <option value="pd">浦东</option> <option value="mh">闵行</option> </optgroup> <optgroup label="四川"> <option value="pzh">攀枝花</option> <option value="zg">自贡</option> </optgroup> </select>
属性说明：
- multiple：布尔属性，设置后为多选，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
label标签
定义：<label> 标签为 input 元素定义标注（标记）。
说明：
- label 元素不会向用户呈现任何特殊效果。
- <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<label for="r1">男</label> <input id="r1" name="gender" type="radio" value="1"> <label>男 # 写法2 <input name="gender" type="radio" value="1"> </label> <label for="r2"> 女</label> <input id="r2" name="gender" type="radio" value="0"> <label for="r3">保密</label> <input id="r3" checked name="gender" type="radio" value="2">
textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10">内容</textarea>
属性说明：
- name：名称
- rows：行数
- cols：列数
- disabled：禁用