HTML标签及属性
一、HTML标签
其标签分为单标签和双标签
1.单标签
| 标签 | 描述 |
|---|---|
<img scr = "图片所在的路径" alt = "描述图片的信息（在图片发生损毁或者受其他影响时，作为描述）" width = "设置图片的宽" height = "设置图片的高" title = "图片的标题"/> | 行内块标签（图片的引入） |
<br/> | 换行 |
<hr/> | 也叫空标签,没有元素内容,只是显示为一条水平线,表示话题的转移等 |
<input/> | 用户在网页上所写的信息都是通过它来实现 |
<link/> | 用于引入外部资源,最常见的用途是链接样式表 |
2.双标签
| 标签 | 描述 |
|---|---|
<p></p> | 块标签，段落标签 |
<h1></h1>...<h6></h6> | 标题标签，从1~6字体将会依次变小 |
<a ></a> | 超链接，例如点击一张图片，将会跳转到另一个页面 |
<b ></b> | 加粗 |
<i></i> | 倾斜 |
<em></em> | 斜体字强调 |
<u></u> | 底线 |
<s ></s> | 删除线 |
<font></font> | 内容标签 |
<ins ></ins> | 底部插入文字 |
<abbr></abbr> | 缩略字 |
<sup></sup> | 上角标 |
<sub ></sub> | 下角标 |
<big></big> | 大字体 |
<small ></small> | 小字体 |
<pre></pre> | 在工程中写入的是什么格式，就在页面上展示什么格式 |
（1）代码展示:
<pre>
<p><a herf="http://xiaomi.mi.com/">小爱开放平台</a></p>
<h1 title="标题标签">哈哈哈</h1>
<h3>比较常用的标题标签</h3>
<h6>哈哈哈</h6> <br>
<h1>最大</h1>
<h6>最小</h6>
<b>加粗</b>
<i>倾斜</i>
<em>斜字体强调</em>
<br />
<u>底线</u>
<u>底线</u>
<b>
<i>想写一个加粗且倾斜的内容</i>
</b>
<s>删除线</s>
<font>字体</font>
<hr />
<ins>底部插入文字</ins>
<abbr>缩略字</abbr>
<a name="mao"></a>
<abbr title="http://www.baidu.com">百度</abbr><br>
上角标 x2+2xy+y2 = (x+y)2 多用于数学公式里面
x<sup>2</sup>+2xy+y<sup>2</sup>=(x+y)<sup>2</sup> <br>
下角标 H2CO3 = H2O +CO2 多用于化学公式里面
H<sub>2</sub>CO<sub>3</sub> = H<sub>2</sub>O+CO<sub>2</sub>
<big title="http://www.baidu.com">大字体</big> <small>小字体</small>
<font color="#0000FF" size="20px">填写内容的标签</font>
<pre>
(2)结果展示:
二、HTML属性（常用标签以及对应的属性）
1.表格标签（table标签）
(1)描述：
<table>属性：
tr:行数, th:标题列, td:内容列
快速写法：table>tr>th*3
属性:cellspacing:单元格与单元格之间的间距,默认2个像素
cellpadding:单元格与内容之间的间距,默认2个像素(一般不修改)
border边框 ，width宽度， height高度
align表示内容所处位置
<td>属性：
rowspan :行合并 ， colspan: 列合并
（2）示例如下
代码展示：
<table width="200px" height="200px" border="1px"
cellspacing="0" >
<tr align="center">
<td colspan="2">a</td>
<!-- <td>b</td> -->
<td rowspan="2">c</td>
</tr>
<tr align="center">
<td rowspan="2">d</td>
<td>e</td>
<!-- <td>f</td> -->
</tr>
<tr align="center">
<!-- <td>g</td> -->
<td colspan="2">h</td>
<!-- <td>i</td> -->
</tr>
</table>
结果展示:
2.列表标签（有序列表ol和无序列表ul）
（1）描述：
列表是一个组合标签 ol li 或者 ul li
li是列表中的每一个项。
A:属性相同点：
type:添加到ol或者ul里面 可以选择不同的排序方式
如果写完之后 突然发现默认的样式和实际想要的样式差异较大，
故而我们考虑去掉默认样式list-style = none
B:属性不同点：
ol:默认样式:
<ol>
<li><a href="">心态炸了！队伍里除了我全是小号，这</a></li>
<li><a href="">霍去病秒杀石虎！眯眯眼白起大战巨人</a></li>
</ol>
ol:执行大写字母开头且指定位数的样式:
<ol type="A" start = "122">
<li><a href="">心态炸了！队伍里除了我全是小号，这</a></li>
<li><a href="">超凶9.2评分狂砍将近六千万播放 这部国</a></li>
</ol>
ol:执行小写罗马数字和执行的排列开头:
<ol type="i" start = "182">
<li><a href="">心态炸了！队伍里除了我全是小号，这</a></li>
<li><a href="">超凶9.2评分狂砍将近六千万播放 这部国</a></li>
</ol>
ul:没有start属性，但是type = “circle”/“disc”/“square”
<ul type="circle" >
<li><a href="http://www.baidu.com" target="_blank">年糕</a></li>
<li><a href="小米导航栏.html" target="_blank">坚果</a></li>
</ul>
<ul type="disc">
<li><a href="">香蕉</a></li>
<li><a href="">肉</a></li>
</ul>
<ul type="square">
<li><a href="">年糕</a></li>
<li><a href="">花生</a></li>
</ul>
3.表单标签（form表单）
1.用途：主要制作一些注册信息的表
<form>属性：
action:将form内容提交到目标地址
method ： get/post
form表单中所用到标签的属性：
| 标签 | 属性描述 |
|---|---|
<label ></label> | |
<input type="text" placeholder=""maxlength=""/> | 文本框( placeholder:给予用户提示信息maxlength:并规定所填内容最大长度) |
<input type="password" placeholder="" disabled="" /> | 密码文本框(disabled:使用户在满足某些条件时(比如选中复选框)才能使用元素) |
<input type="" name="" checked=""/> | 单选框(name:所给的值相同checked:在页面显示为默认的选项) |
<label for=""><input type="checkbox" id=""/></label> | 复选框(for与id:来控制多选，缺少其一完成不了) |
<input type="number" max="" min="" /> | type = "number"表示填写数字类型,max,min:限定其长度 |
<select name=""multiple size= "" ><option value="" selected="selected"></option></select> | 下拉条(select:默认值multiple size:共同控制显示几行，若不设置size将会全部显示) |
<textarea name="" rows="" cols="" style="resize: none;" ></textarea> | 多行文本(style="resize: none;")可以限制多行文本的任意扩大 |
<input type="button" value="确定" /> | 确定按钮 |
<input type="reset"value="重置" /> | 重置按钮 |
<input type="submit" value="提交" /> | 提交按钮 |
<button><button/> | 按钮 |
2.代码展示：
<form action="demo.html" method="post">
<label for="a">用户名:</label>
<input type="text" placeholder="QQ/手机号/QQ邮箱"
maxlength="6" id="a" autofocus="autofocus"/><br>
密 码: <input type="password"
placeholder="密码" disabled="disabled" /><br>
<!--性别:<input type="radio" id="sex" /><label for="sex">男 </label>-->
性别:<label><input type="radio" name="sex"/>男 </label>
<label><input type="radio" name="sex" checked="checked"/>
女</label><br>
是否成年:<label><input type="radio" name="age"/>成年 </label>
<label><input type="radio" name="age"/>未成年 </label> <br>
爱好: <label for="run">
<input type="checkbox" id="run"/>跑步</label>
<label for="football">
<input type="checkbox" id="football" checked/>足球</label>
<label for="baskball">
<input type="checkbox" id="baskball" disabled="disabled"/>
篮球</label><br>
日期:<input type="date" /><br> <!--常用-->
日期时间: <input type="datetime"/><br>
本地日期: <input type="datetime-local" /><br>
月份: <input type="month" /><br>
时间:<input type="time" /><br> <!--常用-->
周: <input type="week" /><br>
颜色:<input type="color" /><br>
电子邮箱:<input type="email" /><br>
文件:<input type="file" /><br>
隐藏域<input type="hidden" /><br>
图片:<input type="image" src="img/3.jpg" /><br>
年龄:<input type="number" max="120" min="0" /><br>
进度条:<input type="range" /><br>
<!--tel url
multiple="multiple" 多选
默认选中 select = "select"-->
下拉
<select name="" >
<option value="">陕西</option>
<option value="" selected="selected">甘肃</option>
<option value="">山西</option><br>
</select>
<!--style="resize: none;"-->
留言:
<textarea name="" rows="1" cols="20" style="resize: none;" >
您只能看, 不能写
</textarea><br>
<input type="button" value="确定" />
<input type="reset"value="重置" />
<button style="width: 200px;height: 50px;>提交</button>
</form>
3.结果展示（只展示上表所提到标签属性）：
4.<a></a>标签
（1）锚点技术(在同一个页面上跳到不同的位置)
<a name="top">我是顶部</a>
<a href="#top">返回顶部</a>其中#指代当前页面
当点击返回顶部时将会立马跳到我是顶部
（2）超链接(跳转到不同页面)
<a href='另外页面的id' target = "">页面名</a>
target = ""可以修改代开的方式（_self,_blank）
当点击页面名时会立马跳转到那个页面
5.<img/>标签
属性：
src="" :图片所在地址
alt="":提示此图片
width=""height="": 设置图片的宽高
align="center":图片所显示的位置
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
