web前端零基础教学html标签（HTML前端常用标签复习）

鬼舞蓝颜 2023-03-25 16:05:41

1. HTML 初识

所谓超文本，有2层含义：

标题标签 <hx></hx> 段落标签 <p></p> 水平线标签 <hr /> 换行标签 <br/> 无语义标签 <div></div> 和 <span></span> 注:这两个标签在后期经常使用

文本格式化标签

<b></b>和<strong></strong> 文字加粗 <i></i>和<em></em> 斜体 <s></s>和<del></del> 加删除线 <u></u>和<ins></ins> 加下划线

图片标签

<img src="图像URL" /> src 图像路径图像标签 <img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

属性:

alt 文本,图像不显示时显示文字 <img src="" alt="">

title 文本,鼠标悬停时显示内容 <img src="cz.jpg" title="文本" />

width 图像宽度 <img src="cz.jpg" width="300" height="300" />

height 图像高度 <img src="cz.jpg" width="300" height="300" />

border 设置图像边框宽度 <img src="cz.jpg" border="3" />

链接标签

<a href="#" target="目标窗口的弹出方式">文本或图像</a>

属性：

href (链接地址)必须写	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能			1. 外部链接需要添加 http:// www.baidu.com2. 内部链接直接链接内部页面名称即可比如 < a href="index.html"> 首页 </a >3. 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
target (默认当前窗口打开,可新建窗口打开)	用于指定链接页面的打开方式，其取值有self和blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

锚点标签

id=""

锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。

使用相应的id名标注跳转目标的位置。 (找目标)

base标签

base 可以设置整体链接的打开状态

base 写到 <head> </head> 之间

预格式化标签

标签可定义预格式化的文本。

所谓的预格式化文本就是，按照我们预先写好的文字格式来显示页面，保留空格和换行等。

表格标签

<table> 定义表格标签 <tr> 定义表格行 <td></td> 表格数据 </tr></table>	border	设置表格边框(默认border="0"无边框)	<table> <tr> <td>单元格内的文字</td> ... </tr> ...</table>
	cellspacing	设置单元格与单元格之间的空白间距 (默认2像素)
	cellpadding	设置单元格内容与单元格边框之间的空白间距 (默认1像素)
	width	设置表格的宽度
	height	设置表格的高度
	align	设置表格在网页中的水平对齐方式 (三个属性:left左 center中 right右 )	align="center" align="right"
	caption	caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。	<caption>个人信息表</caption>
	rowspan="合并单元格的个数"	跨行合并	合并的顺序我们按照先上后下先左后右的顺序
	colspan="合并单元格的个数"	跨列合并	<td colspan="3"> </td>
	<caption></caption>	表格标题标签
	<tr></tr><td></td>	标签，他就像一个容器，可以容纳所有的元素	<tr><td></td></tr>
	<th><td>	一般表头单元格位于表格的第一行或第一列，并且文本加粗居中	<th><td></td></th>
	<thead> 于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签！	以上标签都是放到table标签中。	更好的给表格划分结构
	<tbody> 用于定义表格的主体。放数据本体。	以上标签都是放到table标签中。
	<tfoot>放表格的脚注之类。	以上标签都是放到table标签中。

列表标签

列表(ul里面只能包含li ,li里面可以包含标签)	<ul><li></li></ul>	无序列表	1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。 3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！	里面只能包含li 没有顺序，我们以后布局中最常用的列表
	<ol><li></li></ol>	有序列表	所有特性基本与ul 一致。但是实际中比无序列表用的少很多。	里面只能包含li 有顺序，使用情况较少
	<dl> <dt>名词1</dt> <dd>名词1解释1</dd> </dl>	自定义列表		里面有2个兄弟， dt 和 dd

input控件

<input type="属性值" value="你好">	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	复选按钮
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文本域
name	由用户自定义	控件的名称	用户名:<input type="text" name=“username” />
value	由用户自定义	input控件中的默认问本值	用户名:<input type="text" name="username" value="请输入用户名">
size	正整数	input控件在页面中的显示宽度
checked 默认被选中	checked	定义选择控件默认被选中的项	<input type="radio" name="sex" value="女" />女
maxlength	正整数	控件允许输入的最多字符数

<label> </label>

<label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label>	第一种用法就是用label直接包括input表单。		当我们鼠标点击 label标签里面的文字时，光标会定位到指定的表单里面
<label for="sex">男</label><input type="radio" name="sex" id="sex">	第二种用法 for 属性规定 label 与哪个表单元素绑定。		当我们鼠标点击 label标签里面的文字时，光标会定位到指定的表单里面

文本域

通过textarea控件可以轻松地创建多行文本输入框.

cols="每行中的字符数" rows="显示的行数" 我们实际开发不用

select下拉列表

在option 中定义selected =" selected "时，当前项即为默认选中项。

form表单域

<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件</form>	action 属性值:url地址	用于指定接收并处理表单数据的服务器程序的url地址。
	method 属性值:get/post	用于设置表单数据的提交方式，其取值为get或post。
	name 属性值:名称	用于指定表单的名称，以区分同一个页面中的多个表单。