文章目录
HTML标签
注释标签
注释开始< !-- 注释结束-- >
标题标签：
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
段落标签
<p></p>
换行（闭合标签）
<br/>后边加不加/都行；并且使用换行标签，行与行之间间隙小，使用段落标签之后短与段之间间隙大
水平线标签（闭合标签）
<hr/>， 同样后边加不加/都行，我选择加上/，养成习惯，增加代码可读性
粗体标签
<strong></strong>
斜体标签
<em></em>,以上两个标签可以一起用，<b><em> </b></em>
特殊符号
- 空格：
- 大于号：
>(greater than) - 小于号：
<(less than) - Copyright版权符号:
©
图片标签
<img src="../xxx.jpg" alt="oops!图像不见了" title="123" width="600" height="300">
其中，src表示地址，可以是绝对地址，也可以是相对地址，相对地址使用中，../表示返回到上一级目录，推荐使用相对地址；alt表示文件名称，在加载不出来图片的时候显示出来，代替图片，而title表示图片悬停文字；width height 图片的高和宽;还有更多的其他的效果使用空格，编辑器可以提示所有图片标签；
链接标签
-
超链接标签：
<a href="https://www.baidu.com" target="_blank" title="123">你xxxx不会百度吗</a>，a标签内文字：即显示的文字，可以把图片放在a标签内，点击图片跳转网页；target:表示在哪打开新网页_self:当前标签打开 _blank:新的页面中打开，title悬停文字 -
锚链接标签(跳转到某个页面的指定位置)：
-
<a id="top">这里可以填文字</a>//这个是顶部的标记 <a href="#top">回到顶部</a>//这个是在底部的功能主体 此功能也可以跳转到另一个页面的某个位置： <a id="down"></a> <a href="https://www.baidu.com#down">百度底部</a> 这个标签的功能可以实现 点击链接就跳转到目标页面的指定位置 的功能 -
功能性链接：
- 邮件链接（mailto）：
<a href="mailto:xxxxxxqq.com">点击联系我</a> - QQ链接：QQ推广官网可以自动生成带图片的QQ好友链接
- 邮件链接（mailto）：
列表标签
-
有序列表
-
<ol>//order list <li>1</li> //list <li>2</li> <li>3</li> </ol> -
无序列表：
<ul> //unorder list
<li>123
<ul> //镶嵌二级无序列表
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>2</li> //此处依旧是一级列表
<li>3</li>
</ul>
- 自定义列表（definition list)
dl：标签
dt：列表名称
dd：列表内容
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
<dt>语言</dt>
<dd>中文</dd>
<dd>英语</dd>
<dd>日语</dd>
</dl>
↓预览内容
自定义列表常用于公司网站底部等位置：
表格标签
<table border="1px">//table表格标签，border表格的最外边边界宽度，由此连带的加上border才能把表格间隙显示清楚
<tr> //table row 表格的行
<td colspan="3">1-1</td> // td ：table data 表格行数据，即列；colspan（column栏 span跨度）关键词，表示合并栏，“3”表示包括本行的往下数总共三行的单位格；”1-1“代表格内的填的文字 ；在合并栏的时候要删除多余的栏
</tr>
<tr>
<td rowspan="2">2-1</td> //合并行单位格，“2”表示合并 包括自身往右数总共2格的单元格
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
媒体标签
视频元素
src 资源路径
controls 控制面板
autoplay 自动播放
<video src="xxx/xxx/xxx" controls autoplay></video>
controls提醒浏览器启用播放器，显示播放器界面；autoplay可以使视频自动播放
音频元素
<audio src="xxx/xxx/xxx" controls autoplay></audio
iframe（框架）内联标签
<iframe src="path" name="mainFrame" ></iframe>
表单语法(重点)
-
标签 说明 input标签 大部分表单元素对应的标签有text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text，可以提交用户名、密码等等 select标签 下拉选择框 textarea标签 文本域 -
赋值属性 说明 type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text name 指定表单元素的名称（提交时所对应的key） value 元素的初始值，radio必须提供 size 指定表单元素的初始宽度。当type为text或者password时，以字符为单位；其他type以像素为单位 maxlength type为text或者password时，输入的最大字符数 checked type为radio或者checkbox时，指定按钮是否被选中 -
非赋值属性 说明 readonly 只读，不可更改 disable 禁用，选项变灰色 hidden 隐藏，虽然不可见但是会提交 id 标识符，可以配合label的for属性增加鼠标的可用性 placehoder text 文字域等输入框内的提示信息 required 不能为空 patten 正则表达式验证 表单大体结构
<h1>注册</h1>
< !--from（表单）
action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
method：post get请求方式
name:表单提交的 键值对中的”键“
value:表单提交的 键值对中的“值”
get效率高，但在url中可以看到提交的内容，不安全，不能提交大文件；
post比较安全，且可以提交大文件，不过也只是相对安全，仍然可以通过network监控捕获到账号密码的传输，所以需要深入的加密
-- >
<form action="xxx/xxx" method="get">
< !--文本输入框：input type="text"-- >
<p>用户名：<input type="text" name="username" value（此方格内的默认初始值）="请输入用户名" maxlength="10" size="20"></p>
//placeholder:占位符，不可选中,maxlength:输入的字符最大个数，size：用户名输入框的长度
<p>密 码：<input type="password" name="password" placeholder（占位符，不可选中）="请输入密码" required="required"></p>
< !-- submit提交表单，reset清空-- >
<p><input type="submit"> <input type="reset">
</p>
</form>
单选框标签、多选框标签
radio单选框标签 checkbox多选框标签 value即单选框的值，在提交时对应value
//radio来由:因为老式的收音机上有一种开关,多个按键排在一起,但每次只能按下一个,换句话说,按下任意一个键,其他按键全部弹起,所以GUI的单选按键也就被形象地称作收音机按键。
name：单选框组名，在同一个组内的radio标签同时只能选中一个，name值在提交时对应key
checked:默认被选中
<p>性别：<input type="radio" value="boy" name="sex"/>男 //value表示默认值；name是实际的代表唯一id的名称；单选框标签中，name不同时，可以同时选中不同的选项，name相同时只可以选择其中一个，
<input type="radio" value="girl" name="sex"/>女
</p>
<p>爱好：
<input type="checkbox" value="b" name="hobby">打篮球 //多选框标签时，同一类选项name需要相同，并且此时可以选中多个选项
<input type="checkbox" value="s" name="hobby">唱rap
<input type="checkbox" value="d" name="hobby">跳舞
</p>
按钮标签
<p><input type="button" name="btn1" value="按钮上文字"> //button 方格按钮标签，value默认按钮上的要显示字
</p>
图片标签
<input type="image" src="xxx/xxx"> //图片按钮默认是提交：和submit类似,点击按钮就会提交
下拉框标签
<p> //下拉框：selected:默认选项
你来自：
<select name="location"> //name："下拉框的id"
<option value="china">中国</option> //option：下拉框的选项
<option value="us" selected>美国</option>
<option value="japan">日本</option>
</select>
</p>
文本域标签
<textarea name="text" id="10" cols="30" rows="10" >文本内容</textarea> //id相当于value，cols代表文本域的列宽度，rows行高度，在网页中可以手动更改宽度高度
文件域标签
<input type="file" name="files"> //file上传的文件
<input type="button" name="upload" value="上传">//一个“上传”按钮
邮件标签
邮件：会简单验证是否是邮箱地址
url：会简单验证是否是网络地址
number：数字验证
邮件标签一般需要正则表达式自动判别邮箱地址正误
<p>邮箱：<input type="email" name="email"> //浏览器只进行了最基本的格式正误判断
</p>
url标签
<p>
url：<input type="url">
</p>
数字验证
max最大数量
min 最小数量
step 每次点击增加或减少的数量
<p>商品数量<input type="number" name="num" max="100" min="1" step="1"></p>
<p>音量：<input type="range" min="0" max="100" name="voice" step="2"></p> //滑块
搜索框标签
运用场景可以拓展到譬如 输入昵称，密码等情况
<p>搜索：<input type="search"></p>
增强鼠标可用性
<p>
<label for="mark">你点我试试</label> //当点击“你点我试试”时，”for“指向了后边的mark，光标移动到了mark文本框里；for指向哪个id光标之后就会处于对应的框框里
<input type="text" id="mark">
</p>
行内元素与块元素（概念）：
-
行内元素表示该标签只会占用一行，不会在标签结束回车，块元素表示一个标签占用一行，标签结束会回车
-
行内元素包括：a 、strong 、em…
-
块元素包括： p 、h1-h6…
页面结构分析
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
header footer section nav常用
