html入门学习---常用标签

什么是HTML

HyperTextMarkupLanguage:超文本标记语言
作用：负责搭建页面结构和内容
超文本：不仅仅是文本，还包括多媒体（音频、视频）
结构：
<标签名>标签内容</标签名>
or
<标签名/>

常用文本标签

标题标签

h1~h6:一级标题标签到六级标题标签
特点：独占一行
字体加粗
自带行间距

<h1>一级标题标签</h1>
<h2>二级标题标签</h2>

段落标签

p:段落
特点：独占一行，自带上下行间距

<p>段落标签</p>

加粗标签

b:加粗
特点：字体加粗

<b>加粗标签</b>

斜体标签

i:斜体
特点：字体变斜体样式

<i>斜体标签</i>

下划线

u:字体下方有线条

<u>下划线</u>

删除线

s:字体上有线条，表示删除

<s>删除线</s>

hr水平分割线

<hr>

br换行符

<br>

列表标签

有序列表：ol（ordered list）和li

<ol>
	<li>猪八戒</li>
	<li>悟空</li>
	<li>悟净</li>
</ol>

无序列表：ul（unordered list）和li

<ul>
	<li>第一行</li>
	<li>第二行</li>
	<li>第三行</li>
</ul>

列表嵌套：有序列表和无序列表可以任意无限嵌套

<ol>
	<li>计算机专业</li>
	<ul>
		<li>计科1班</li>
		<li>计科2班</li>
	</ul>
	<li>数学系</li>
	<ul>
		<li>数学与应用数学1班</li>
		<li>数学与应用数学2班</li>
	</ul>
</ol>

图片标签img

标签名：img
属性：

1. src：资源路径

2. 相对路径：访问站内资源使用

   • 资源与页面在同级目录：./资源名—其中‘./’可以省略

   • 资源在页面的上级目录：…/资源名

   • 资源在页面的下级目录：文件名/资源名

3. 绝对路径：访问站外资源使用。从http或https开始的网站绝对路径和从盘符开始的本级绝对路径。会存在图片盗链问题（图片找不到）

4. alt:当图片无法正常显示时显示的文本内容

5. title:当鼠标悬停在图片上时显示的文本内容

6. width/height:设置图片的宽度和高度

<img title="测试" alt='路径有误' width="100px" height="100px" src="img/q.jpg"/>

超链接a

href:资源路径，作用类似图片的src属性

<a href="test.html">百度一下</a>
<a href="https://www.baidu.com">
	<img title="测试" width="100px" height="100px" src="img/q.jpg"/>
</a>

表格标签

相关标签：table表格、tr行、td列、caption表标题、th表头
相关属性：border边框、colspan跨列、rowspan跨行
特点：表标题—居中显示，表头—居中，加粗

<table border="1" cellspacing="0" cellpadding="">
	<caption>学生基本信息表</caption>
	<tr>
		<th>学号</th>
		<th>姓名</th>
		<th>班级</th>
		<th>性别</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>2020115101</td>
		<td>Tom</td>
		<td>计科1班</td>
		<td>男</td>
		<td>23</td>
	</tr>
	<tr>
		<td>2020115101</td>
		<td>Tom</td>
		<td>计科1班</td>
		<td>男</td>
		<td>23</td>
	</tr>
	<tr>
		<td>2020115101</td>
		<td>Tom</td>
		<td>计科1班</td>
		<td>男</td>
		<td>23</td>
	</tr>
	<tr>
		<td>2020115101</td>
		<td>Tom</td>
		<td>计科1班</td>
		<td>男</td>
		<td>23</td>
	</tr>
</table>

input标签

属性:type–类型

• text：文本输入框
• password：密码输入框
• radio:单选框
• checkbox:复选框
• file:文件选择框
• date:日期选择器

		用户名：<input type="text" value="" placeholder="请输入用户名"/>
		密码：<input type="password" name="" id="" placeholder="请输入密码" />
		性别：
		<!--checked 默认选中-->
		<input type="radio" name="gender" id="" value="" />男
		<input type="radio" checked name="gender" id="" value="" />女
		爱好：
		<!--checked 默认选中-->
		<input type="checkbox" name="hobby" id="" value="" />篮球
		<input type="checkbox" name="hobby" id="" value="" />音乐
		<input type="checkbox" name="hobby" id="" value="" />羽毛球
		<input type="checkbox" name="hobby" id="" value="" />看美女
		<input type="checkbox" name="hobby" id="" value="" />rap
		照片：
		<input type="file" name="" id="" value="" />
		出生日期：
		<input type="date" name="" id="" value="" />

下拉框

select标签

<!-- 下拉选框 selected表示默认选中 -->
	出生地：
	<select name="">
		<option value="">云南省</option>
		<option value="">四川省</option>
		<option selected value="">湖北省</option>
		<option value="">湖南省</option>
		<option value="">重庆市</option>
	</select>

按钮

提交按钮

<!-- 提交按钮 -->
<input type="submit" name="" id="" value="提交1" />
<button type="submit">提交2</button>

重置按钮

<!-- 重置按钮 -->
<input type="reset" name="" id="" value="重置1" />
<button type="reset">重置2</button>

自定义按钮

<!-- 自定义按钮 -->
<input type="button" name="" id="" value="自定义按钮1" />
<button type="button">自定义按钮2</button>

提交表单

<form action="" method="">

</form>

action是提交信息的路径，method提交方式：get/post