这篇文章简单记录了一些html中实用的标签和我学习HTML过程中的笔记
另外对于html的学习，我推荐
https://developer.mozilla.org/zh-CN/
这个网站，遇到想要不懂的标签都可以在这个网站中搜索，网站中会有详细的用法与介绍。
html5基本结构
<!DOCTYPE html> 定义HTML文档类型，此为标准HTML 5的文档声明
<html lang="en"> 定义HTML文档的语言类型
<head>
<meta charset="UTF-8"> 定义HTML文档字符类型,UTF-8是现在使用最广泛的网页编码
<title>Document</title> 定义文档的标题
</head>
<body> 浏览器呈现的页面内容
<header> 页面头部（HTML 5特有标签）
<h1>HTML 5</h1> 一级标题
</header>
<main> 页面主体（HTML 5特有标签）
</main>
<footer> 页脚（HTML 5特有标签）
</footer>
</body>
</html> HTML文件结束标记
段落
<p>...</p>
用于定义网页中的一段文本，段落与段落之间自动换行。
标题标签
<h1>...</h1> 一级标题
<h2>...</h2> 二级标题
<h3>...</h3> 三级标题
<h4>...</h4> 四级标题
<h5>...</h5> 五级标题
<h6>...</h6> 六级标题
特殊文字标签
<i>...</i> 斜体
<em>...</em> 斜体（强调语气）
<b>...</b> 粗体
<strong>...</strong> 加粗（强调语气）
<kbd>...</kbd> 用来表示文本是从键盘上键入的
<u>...</u> 下划线
<del>...</del> 删除
<sub> 下标
<sup> 上标
<a> 标签
<a>元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
<a href="..." target="_blank">...</a>
download
<a href="文件路径" download="下载时的文件名">链接名称</a>
此属性指示浏览器下载URL而不是导航到URL，因此将提示用户将其保存为本地文件。
href：表示对应链接地址。
target：代表此链接打开方式，默认为本窗口打开，_blank重新打开一个窗口浏览对应链接网站。
- _self: 当前页面加载，即当前的响应到同一HTML5浏览上下文。此值是默认的，如果没有指定属性的话。
- _blank: 新窗口打开，即到一个新的未命名的HTML5浏览器上下文
- _parent: 加载响应当前的HTML5浏览上下文的父级窗口。
- _top: HTML5中：加载响应进入顶层窗口。
- iframename: 返回值在指定frame中加载。
ps: <a href="">link</a> 标签被点击后会发生什么？
A:当前页面刷新
<a href="#id名">...</a>“#”代表锚点。在下文标签中加个id名后，当鼠标点击文字，就可以直接跳转至对应的位置。
<a href="#">link</a> 标签被点击后会页面滚动到顶部.
如果我希望写一个<a>标签，并且我希望它不跳转,什么都不做, 我们使用js伪协议
<a href="javascript:;">link</a>
图片
<img src=" " alt=" ">
src：指定图片来源地址
alt：当图片无法显示时的提示文本，同时方便视觉障碍人士阅读本网页。
列表
1 有序列表 <ol> order list 。
用于表示带步骤或者编号的并列内容。
<ol>的直接子元素是<li>，如想嵌套其它元素则只能在<li>标签中
嵌套其它元素。
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
2，无序列表 <ul> unsort list。
用于表示并列的内容。
<ul>的直接子元素是<li>，如想嵌套其它元素则只能在<li>标签中嵌套其它元素。
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
3，自定义列表
<dl>
<dt>...</dt> 自定义列表项
<dd>...</dd> 自定义列表项的解释
<dd>...</dd> 自定义列表项的解释
<dt>...</dt> 自定义列表项
<dd>...</dd> 自定义列表项的解释
<dd>...</dd> 自定义列表项的解释
</dl>
表格 <table></table>
表格基本结构
<table border=1>
<colgroup>
<col width=100>
<col width=200>
<col width=70>
</colgroup>
<thead>
<tr>
<th>project</th><td>姓名</td><td>班级</td><td>分数</td>
</tr>
</thead>
<tbody>
<tr>
<th></th><td>xiaoming</td><td>1</td><td>91</td>
</tr>
<tr>
<th></th><td>xd</td><td>2</td><td>95</td>
</tr>
<tr>
<th>avg</th><td></td><td></td><td>93</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>sum</th><td></td><td></td><td>186</td>
</tr>
</tfoot>
</table>
表单<form>...</form>
<form action="users" method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
</form>
定义供用户输入的HTML表单（action里面的值是需要提交表单上送地址，method提交方式里面的值只能选择get或post，建议使用post）
<button>button</button> 如果没写type，且form里面只有botton, 自动升级(默认submit)
<label>标签里面的内容，自动跳转到对应的文本框。
（老司机版本）
<form action="users" method="post">
<lable>username<input type="text" name="username"></lable>
<lable><input type="password" name="password"></lable>
喜欢的水果
<lable><input type="checkbox" name="fruit" value="orange">桔子</lable>
<lable><input type="checkbox" name="fruit" value="banana">香蕉</lable>
<lable><input type="radio" name="loveme" value="yes">yes</lable>
<lable><input type="radio" name="loveme" value="no">no</lable>
<select name="group" multiple>
<option value="">-</option>
<option value="1">first</option>
<option value="2">second</option>
<option value="3" disabled>third</option>
<option value="4" selected>fourth</option>
</select>
<lable><input type="submit" value="提交"></lable>
</form>
name必须写， 否则提交的时候不会带上这个值
网友评论