思维导图
常用HTML标签
基本标签学习
H系列标签（h1-h6）
HTML 段落是通过 <p> 标签进行定义的。
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<p>标签
HTML 段落是通过 <p> 标签进行定义的。
<p>这是一个段落</p>
<hr />水平线
<hr />
注释
<!-- 注释的内容-->
<img>标签
<img src="图片的路径" alt="找不到图片，替代的文字" />
<ul>无序列表
给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后。
<h4>选择居住城市</h4>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>铁岭</li>
</ul>
<ol>有序列表
给一堆内容添加有序列表语义(一个有顺序整体), 列表中的条目有先后之分。
<h4>中国房价排行</h4>
<ol>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>铁岭</li>
</ol>
<dl>定义列表
给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述。
<dl>
<dt>北京</dt>
<dd>国家的首都, 看升国旗的地方</dd>
<dt>上海</dt>
<dd>魔都, 遍地是黄金的地方</dd>
</dl>
<a>标签（HTTP GET请求）
用于从一个页面跳转到另一个页面。
<a href="你想访问的网址" target="_blank">我的博客</a>
target的属性值含义
-
_blank新窗口打开 -
_self当前页面打开/加载 -
_parent在父级窗口打开新页面(需结合iframe使用,才能展示出效果) -
_top在顶级窗口打开新页面(需结合iframe使用,才能展示出效果)
<a>标签的假链接
<a href="#">假链接</a>
<a href="javascript:;">假链接</a>
<!-- #会自动回到顶部，javasrcipt:;不会自动回到顶部-->
<input>标签
（name一定要写，提交数据时候要用到）
type="checkbox"复选框
你喜欢的水果:<input type="checkbox" name="friut">葡萄
<input type="checkbox" name="friut">西瓜者
<input type="checkbox" name="friut">杨桃
复选框
type="radio"单选框
性别:<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
单选框
input和button的区别
input没有子元素,button有子元素
<select>标签
<select name="group" multiple>
<option value="">-</option>
<option value="1">第一组</option>
<option value="2">第二组</option>
<option value="3" disabled>第三组</option>
<option value="4" selected>第四组</option>
</select>
小Tips:
-
multiple 可以同时选中几项
-
disabled 默认不能被选中
-
selected 默认被选中
image
<label>标签
label标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。
<label><input type="checkbox" name="friut">木瓜</label>
<textarea>多行文本框(文本域)
textarea标签用于在表单中定义多行的文本输入控件
<textarea cols="30" rows="10">默认</textarea>
<!--禁止手动拉伸-->
<style type="text/css">
textarea{
resize: none;
}
</style>
<from>标签
作用用于收集用户信息, 让用户填写、选择相关信息
<form action="users" method="POST">
所有的表单内容，都要写在form标签里面
</form>
<table>标签
表格的基本元素
| 基本元素 | 翻译/含义 |
|---|---|
| caption | 标题 |
| thead | table head(表头) |
| tbody | table body(表格主体) |
| tfoot | table foot(表格的底部) |
| tr | table row(表格行) |
| th | table header(表格页眉) |
| td | table data(单元格) |
图示：
image.png
<table border="1" style="font-size: 12px;border-collapse: collapse;">
<colgroup>
<col width="74">
<col width="86">
<col width="497">
</colgroup>
<thead>
<tr>
<th>称号</th>
<th>姓名</th>
<th>简介</th>
</tr>
</thead>
<tbody>
<tr>
<td>白胡子</td>
<td>爱德华·纽盖特</td>
<td>白胡子海贼团船长，被称为世界最强男人，过去与罗杰、金狮子，并成为三大传说中的海贼，震震果实能力者，顶上战争上被黑胡子海贼团杀死，享年72岁。</td>
</tr>
<tr>
<td>红发</td>
<td>香克斯</td>
<td>红发海贼团船长，原罗杰海贼团的实习员，拥有强大的霸王色霸气，是路飞海贼之路的引路人，为了救路飞失去了左臂。</td>
</tr>
<tr>
<td>百兽</td>
<td>凯多</td>
<td>百兽海贼团船长，被称为世界最强生物，与和之国将军霸占着和之国。</td>
</tr>
<tr>
<td>BIG·MOM</td>
<td>夏洛特·玲玲</td>
<td>BIG·MOM海贼团船长，四皇中的唯一女性，魂魂果实能力者，托特兰统治者。</td>
</tr>
<tr>
<td>黑胡子</td>
<td>马歇尔·D·蒂奇</td>
<td>黑胡子海贼团提督，原白胡子海贼团二番队成员，暗暗果实、震震果实双能力者，极恶的世代之一，顶上战争杀死白胡子，夺取其果实能力，两年后成为四皇。</td>
</tr>
</tbody>
</table>
image
[图片上传中...(image.png-67d8e2-1552312051179-0)]
小Tips:
- th和td的区别是:th里面不是放数据,td里面全是数据
- thead tbody tfoot不写,浏览器也不会报错，浏览器会自动全部加入到tbody里
- thead tbody tfoot书写的顺序颠倒没关系,浏览器会自动纠正顺序(头->身体-->脚)
-
border-collapse: collapse;合并边框 -
col可以规定每一列的样式
网友评论