HTML标签及属性
HTML标签及属性
一、HTML标签
其标签分为单标签和双标签
1.单标签
| 标签 | 描述 |
|---|---|
| 行内块标签（图片的引入） |
| 换行 |
| 也叫空标签,没有元素内容,只是显示为一条水平线,表示话题的转移等 |
| 用户在网页上所写的信息都是通过它来实现 |
| 用于引入外部资源,最常见的用途是链接样式表 |
2.双标签
| 标签 | 描述 |
|---|---|
| 块标签，段落标签 |
... | 标题标签，从1~6字体将会依次变小 |
| 超链接，例如点击一张图片，将会跳转到另一个页面 |
| 加粗 |
| 倾斜 |
| 斜体字强调 |
| 底线 |
| 删除线 |
| 内容标签 |
| 底部插入文字 |
| 缩略字 |
| 上角标 |
| 下角标 |
| 大字体 |
| 小字体 |
| 在工程中写入的是什么格式，就在页面上展示什么格式 |
（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标签） 结果展示: ol:执行大写字母开头且指定位数的样式: ol:执行小写罗马数字和执行的排列开头: ul:没有start属性，但是type = “circle”/“disc”/“square” 3.表单标签（form表单） 2.代码展示： 3.结果展示（只展示上表所提到标签属性）：
(1)描述：
属性：
tr:行数, th:标题列, td:内容列
快速写法：table>tr>th*3
属性:cellspacing:单元格与单元格之间的间距,默认2个像素
cellpadding:单元格与内容之间的间距,默认2个像素(一般不修改)
border边框 ，width宽度， height高度
align表示内容所处位置
属性：
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 type="A" start = "122"><li><a href="">心态炸了！队伍里除了我全是小号，这</a></li><li><a href="">超凶9.2评分狂砍将近六千万播放 这部国</a></li></ol>
<ol type="i" start = "182"><li><a href="">心态炸了！队伍里除了我全是小号，这</a></li><li><a href="">超凶9.2评分狂砍将近六千万播放 这部国</a></li></ol>
<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>
1.用途：主要制作一些注册信息的表
：
action:将form内容提交到目标地址
method ： get/post
form表单中所用到标签的属性：标签 属性描述 文本框( placeholder:给予用户提示信息maxlength:并规定所填内容最大长度) 密码文本框(disabled:使用户在满足某些条件时(比如选中复选框)才能使用元素) 单选框(name:所给的值相同checked:在页面显示为默认的选项) 复选框(for与id:来控制多选，缺少其一完成不了) type = "number"表示填写数字类型,max,min:限定其长度下拉条(select:默认值multiple size:共同控制显示几行，若不设置size将会全部显示) 多行文本( style="resize: none;")可以限制多行文本的任意扩大确定按钮 重置按钮 提交按钮 按钮 <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 urlmultiple="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>
4.返回顶部其中#指代当前页面
当点击返回顶部时将会立马跳到我是顶部
（2）超链接(跳转到不同页面)
页面名
target = ""可以修改代开的方式（_self,_blank）
当点击页面名时会立马跳转到那个页面
5.
属性：
src="" :图片所在地址
alt="":提示此图片
width=""height="": 设置图片的宽高
align="center":图片所显示的位置本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
