HTML基础知识(三) 标签知识

目录

一、标签理解

二、基本结构标签

 三、常见标签

1.标题标签<h1>-<h6>(head的缩写)

2.段落标签<p>(paragraph的缩写)

3.换行标签<br>(break的缩写)
4.文本格式标签(为文字设置粗体,斜体或下划线等效果,语义:突出重要性)

5.divspan标签(没有语义,是一个盒子,用来装内容 division span)

一、标签理解

1.HTML标签由尖括号包围关键词。通常是成对出现的,称为双标签。例如<html>(开始标签)和</html>(结束标签)。有些特殊标签为单个标签,称为单标签。例如<br/>

2.标签关系有包含关系和并列关系

3.标签的含义(语义):标签是用来干嘛的。(在适合的地方给一个合理的标签可以使页面结构更清晰)

4.每个网页都会有一个基本的结构标签(也称为骨架标签),HTML页面也称为HTML文档

二、基本结构标签

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_15,color_FFFFFF,t_70,g_se,x_16

 1.<html>标签是根标签,页面中最大的标签

2.<head>标签是文档的头部,在<head>标签内必须设置<title>标签

3.<title>标签是文档的标题,网页的标题

4.<body>标签是文档的主体,文档的所有内容,网页内容

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_13,color_FFFFFF,t_70,g_se,x_16

 三、常见标签

1.标题标签<h1>-<h6>(head的缩写)

(1)  语义:作为标题使用,并依据重要性递减(2)  特点:a.加了标题标签文字会变粗,字号依次变大  b.一个标题独占一行watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_17,color_FFFFFF,t_70,g_se,x_16watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_11,color_FFFFFF,t_70,g_se,x_16 

 2.段落标签<p>(paragraph的缩写)

(1)  语义:可以把HTML文档分割为若干段落

(2)  特点:a.一个段落根据浏览器窗口的大的自动换行   b.段落之间有大的空隙watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_20,color_FFFFFF,t_70,g_se,x_16

3.换行标签<br/>(break的缩写) 

(1)  语义:强制换行

(2)  特点:a.<br/>是个单标签   b.<br/>只是简单重新开始一行与段落不同

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_9,color_FFFFFF,t_70,g_se,x_16

4.文本格式标签(为文字设置粗体,斜体或下划线等效果,语义:突出重要性)

(1)  加粗:<strong></strong>或<b></b>  推荐使用<strong>标签,语义更强烈

(2)  倾斜:<em></em>或<i></i>  推荐使用<em>标签,语义更强烈(emphasize)

(3)  删除线:<del></del>或<s></s>   推荐使用<del>标签,语义更强烈(delete)

(4)  下划线:<ins></ins>或<u></u>   推荐使用<ins>标签,语义更强烈(insert)

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_12,color_FFFFFF,t_70,g_se,x_16

5.<div>和<span>标签(没有语义,是一个盒子,用来装内容 division span)

特点:a.<div>标签用来布局,一行只能放一个<div>,是个大盒子  b.<span>标签用来布局,一行可以有多个<span>,是个小盒子

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_20,color_FFFFFF,t_70,g_se,x_16watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_20,color_FFFFFF,t_70,g_se,x_16

6.图像标签和路径

(1)  <img>标签用于定义图像,src为必须属性

(2)  特点:属性采取键值对的格式,即key="value"

(3)  路径

a.目录文件夹和根目录(目录文件夹的第一层)

b.相对路径:以引用文件所在位置为参考基础而建立出的目录路径

c.绝对路径

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_20,color_FFFFFF,t_70,g_se,x_16

 7.超链接标签<a>(用于定义超链接,作用是从一个页面链接到另一个页面)

(1) a. href用于指定链接目标的url地址,为必须属性  b.target:用于指定链接页面的打开方式,_self为默认值在本窗口打开,_blank为在新窗口中打开方式

(2)   链接方式(解释如图)

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_20,color_FFFFFF,t_70,g_se,x_16

 8.表格标签

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_20,color_FFFFFF,t_70,g_se,x_16

(1)  <table>标签定义表格的标签

(2)  <tr>标签定义表格中的单元格,嵌套在<table>中

(3)  <td>标签定义表格中的单元格,嵌套在<tr>中

(4)  <th>标签为表头单元格

(5)  <thead>标签为表头区域,内部必须有<tr>标签

(6)  <tbody>标签为表格主体

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_12,color_FFFFFF,t_70,g_se,x_16

 9.列表标签(无序列表,有序列表和自定义列表)

(1)  无序列表<ul><li>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_4,color_FFFFFF,t_70,g_se,x_16

 (2)  有序列表<ol><li>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_15,color_FFFFFF,t_70,g_se,x_16

 73ed9b6cd1d24e48aad993976eb3efa7.png

 (3)  自定义列表<dl><dt>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_16,color_FFFFFF,t_70,g_se,x_16

85cb3e3088f94fb5a799bf554db8d182.png

 10.表单标签(表单域,表单控件,提示信息)

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5L6d5penaTI0OA==,size_11,color_FFFFFF,t_70,g_se,x_16

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值