HTML有关标签的学习

HTML

基本标签

加粗

<b></b>
<strong></strong>

倾斜

<i></i>
<em></em>

下划线

<u></u>

删除线

<s></s>
<del></del>

上角标,下角标

<sup></sup>
<sub></sub>

网页中标题标签h1-h6

<h1></h1>

div和span标签

div布局区块划分 默认排列纵向,独占父元素一整行
span独立文本修饰 默认排列方式横向

段落或换行

<p></p>
<br>或<br/>是一个单标签

列表

有序列表

<!-- 类型:1,A,a,I,i 数值表示从第几个开始 -->
<ol type="类型" start="数值">
    <li></li>
    <li></li>
</ol>

无序列表

<!-- 类型:disc黑色实心圆点 cricle空心圆 square黑色实心方块 none取消列表项 -->
<ul type="类型">
    <li></li>
    <li></li>
</ul>

自定义列表

<dl>
    <dt></dt>
    <dd></dd>
</dl>

图片标签 (单标签)

<!--
路径:
./当前文件目录
''/返回上一级
图片描述:
图片为破损文件的时候提示文本
宽高:
设置宽高会拉伸变形,只设置其中一个会等比例放大缩小
-->
<img src="路径" alt="图片描述" width="宽度" height="高度">

超链接

<!-- 
也可跳转到本地,注意:如果为网址需要带http://
超链接的打开方式:
_self自己,即当前页
_blank空白,即打开一个新的窗口
-->
<a href="网址" target="超链接的打开方式"></a>

表格

<!-- 
tr:table-row表格行
td:table-data表格数据,即列
table属性:
1.border:表格添加边框,里面的单元格也有边框
2.width:宽,单位如果为px,可以省略不写
3.height:高,单位如果为px,可以省略不写;高度直接使用百分比的话不能实现,因为body默认没有高度
4.bgcolor:背景颜色
取值:
颜色单词 red...
rgb红绿蓝三个颜色的取值范围0~255 rgb(0~255,0~255,0~255)
#6位16进制的颜色值0~9A~F #000000
5.bordercolor:边框颜色
6.cellspacing:单元格之间的距离
7.cellpadding:单元格与内容间的距离
8.align:表格在页面中的对其方式 左中右 left center right
9.ruls:规则,表格的横纵线 rows cols
10.frames:表格的外边线
void	不显示外侧边框。
above	显示上部的外侧边框。
below	显示下部的外侧边框。
hsides	显示上部和下部的外侧边框。
vsides	显示左边和右边的外侧边框。
lhs	显示左边的外侧边框。
rhs	显示右边的外侧边框。
box	在所有四个边上显示外侧边框。
border	在所有四个边上显示外侧边框。
-->
<table border="边框大小" bgcolor="背景颜色" bordercolor="边框颜色" celllspacing="单元格间的距离" cellpadding="单元格与内容间的距离" align="表格在页面中的对其方式" rules="表格的横纵线" frames="表格的外边线">
    <tr>
    	<td></td>
    </tr>
</table>

tr属性

上面说了table的一些属性,接下来,说下tr的属性

<!-- 
tr的属性:
1.height 能控制一行的高度
2.bgcolor 设置一整行的单元格颜色
3.align 设置一整行单元格里面的文本水平对齐方式
	left	左对齐内容。
	right	右对齐内容。
	center	居中对齐内容。
	justify	对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）
4.valign 一整行单元格里面的文本水平对齐方式
	top	对内容进行上对齐。
	middle	对内容进行居中对齐（默认值）。
	bottom	对内容进行下对齐。
	baseline	与基线对齐。
-->

td属性

td属性

<!--
td属性:
	th替换td 默认带有加粗居中的效果
1.bgcolor 给对应的单元格设置背景颜色
2.align
3.valign
4.width,hight 当前单元格宽度会影响一列的宽度,高度会影响一整行
5.合并单元格 
	水平合并colspan(规定单元格可横跨的列数) 水平合并的是列
	垂直合并rowspan(规定单元格可横跨的行数) 垂直合并的是行
-->

表格标题标签

<caption></caption>

分组标签

<!--
tbody 表格主体
thead 对表格头部内容进行分组
tfoot 对表格页脚内容进行分组
应用:购物车中
-->
<tbody></tbody>

空格

 
 
...

表单

表单作用:收集用户信息

表单组成:表单由一些表单控件组成

​ input类型

​ select类型

​ textarea类型

​ 其他类型

<!--
action 跳转地址
method 提交方法
-->
<form action="">
    
</form>

1.input类型

输入框类型

<!--
type类型有如下:
	text 单行文本框
	password 密码框
	radio 单选按钮,默认可共选,解决共选问题,只需给单选框添加name属性即可,起到一个分组作用,如下代码所示
	checkbox 复选框 有name属性,方便js获取的
	file 文件域
	hidden 隐藏域 有value属性,不显示
	button 普通按钮 value属性显示按钮内容
	submit 提交按钮 value属性显示按钮内容 当input设置属性acction时(当提交表单时向何处发送表单数据),点击按钮会跳转
	reset 重置按钮
	image 图片按钮 相当于提交按钮,其中有src属性和alt属性,和img标签同理
value 规定input元素的值
placeholder 用户填写输入字段的提示
checked 当input元素首次加载时应当被选中,有三种写法:
	1.checked="checked"
	2.checked="true"
	3.cehcked 在html5中,属性和属性值一致时,可以把属性当作属性值简写
-->
<input type="radio" name="sex" value="boy">男孩
<input type="radio" name="sex" value="girl">女孩

label标签

<!--
如果我们在单选按钮时,想点击文字就能选中,提高用户体验,我们可以使用label标签,利用其中的for属性和input中的id属性关联,代码如下所示
-->
<input type="radio" name="sex" value="boy" id="boy"><label for="boy">男孩</label>
<input type="radio" name="sex" value="girl" id="girl"><label for="girl">女孩</label>

button标签

普通按钮标签,应用在表单里面,也有提交功能

<button>
    普通按钮
</button>

2.select类型

下拉菜单类型

应用:地址选择等...

<!--
option 选项
	size 下拉列表中可见选项的数目
	multiple 可选择多个选项 只是用这个属性,默认加载数目为4个
value 值
selected 默认选中,书写方式也是三种
	1.selected="selected"
	2.selected="true"
	3.selected
-->
<select>
    <option></option>
</select>

3.textarea类型

文本域类型

<!--
多行文本输入框
rows控制行数
cols控制列数
多行文本输入框大小一般利用css设置宽高去控制
可以通过css设置resize属性控制元素调整大小
比如resize:none元素不能被用户缩放
-->
<textarea rows="" cols="">

</textarea>

4.表单字段集

表单控件的某一部分划分在一个区域里

<!--
字段集fieldset
字段集标题legend
-->
<fieldset>
    <legend>性别</legend>
    <input type="radio" name="sex">男
	<input type="radio" name="sex">女
</fieldset>

5.form表单提交方法

默认表单提交方式为明文提交(能看到所有提交数据信息)

<!--
method属性控制着表单的提交方式
取值有:
get 明文提交,安全性较低,提交数据量少,通常从服务器获取数据
post 密文提交,安全性较高,可提交大量数据,通常向服务器提交数据
做查询时建议Get 做增删改时,建议Post
-->

写在最后:这里只是列举了一些基本的标签,和一些常用的属性,并不够完全,详细标签属性等内容可查询文档