web前端 - HTML入门 第二课 - HTML标签

一.文字类标签

1.文字容器类

标签名	作用
h1-h6	标题标签（由大到小）
p	段落标签

演示代码：

<h1>这是一个h1标签</h1>
<h2>这是一个h2</h2>
<p>这是一个段落</p>

效果：

2.文字修饰类

标签名	作用
em,i	斜体
b，strong	黑体
br	换行符
del	删除线

演示代码：

<em>这是一个斜体标签</em>
<b>这是一个黑体b标签</b>
<strong>这是一个黑体的strong标签</strong>
<del>这是一个删除线</del>

效果：

二. 布局类标签

布局类标签名	用途
div	块容器
span	内联容器
nav	导航栏

三. 列表类标签

1.无序列表 ul-li

代码：

        <ul>
			<li>无序第一项</li>
			<li>无序第二项</li>
        </ul>

效果：

2.有序列表ol-li

代码：

<ol>
		这是一个有序列表
			<li>这是序号1</li>
			<li>这是序号2</li>
</ol>

效果:

四.图像标签

演示代码：

<img src="react.jpg" alt="这是一张图片"/>

1. src内放置图片地址

可放入本地图片和图片链接两种，本地图片又分为绝对地址和相对地址。
    
>绝对地址：从根目录到当前文件地址C：/user/img.png       

>相对地址：从当前文件到需要的文件地址  当前目录  ./  上级目录../

2. alt内放置代替图片的文本，当图片无法加载时显示。

效果：

五.超链接

演示代码：

<a href=" #" target="_blank">回到顶部</a>

1. href 放入链接地址，指向有四种

a. URL：统一资源定位符 http://www.baidu.com
b. URI：统一资源标志符 tel:12345
c. 文件路径 ./
d. 跳转锚点 #page

(URL: 输入域名通过DNS服务器转化成IP地址。再访问对应的服务器。
URI:value主要负责将数据传入服务器中。)

2.target中放入链接打开方式，指向有两种

a. _blank 在新的空白窗口打开
b. _self 在本页面中打开 （一般默认为它）

效果：

六.表格标签

演示代码：

<table border="10" cellpadding="20" cellspacing="30">
			<tr>
				<th>收入</th>
				<th>支出</th>
				<th>剩余</th>
			</tr>
			<!--th这为一个表头-->
			<tr>
				<td>5000</td>
				<td>2000</td>
				<td>3000</td>
			</tr>
			<!--这为一个表单-->
		</table>

表格属性	作用
border	边框 （黄色）
cellpadding	表格填充 （橙色）
cellspacing	表格间距 （红色）

效果：

七.表单标签

1. form表单标签

<form method="get" action="" target=""></form> 

method有两种提交方式：get和post

action为提交地址

2. input 输入框标签（要内嵌入form表单中）

<input type="text" name="" value="这是一个输入框类型为text的input标签" placeholder="" />
<input type="text" name="" value="123" placeholder="请输入用户名" />
<input type="text" name="" value="" placeholder="请输入用户名" />
<!--输入框类型为text文本框-->

<input type="submit" name="" value="这是一个输入框类型为submit的input标签" placeholder="" />
<!--输入框类型为submit提交按钮-->

<input type="range" name="" value="这是一个输入框类型为range的input标签" placeholder="" /> 
<!--输入框类型为range进度条-->
<input type="checkbox" name=""/>

a. 输入框类型type有许多种，下边给出常见的几种。

tpye	说明
text	输入框：文本
password	输入框：密码
button	按钮
radio	单选框
checkbox	多选框
submit	提交

b. value主要负责将数据传入服务器中

c. name 方便归类

效果：

八. button标签

演示代码：

<button type="button">这是一个button标签</button> <br />

类型type有两种：button 或 submit

九.字符实体

为了显示预留字符，如大于、小于号、空格等，则需要使用字符实体

< p >< p >

效果

空格字符实体

   

十.html标签通用属性

style （css属性标签）

id

class

这三种属性都可以应用到各类html标签中，为通用属性。