关于HTML的相关标签

目录

一、HTML的骨架标签

文档类型

页面语言lang

字符集charset

二、HTML常用标签

(一)排版标签

1.标题标签

~h6>

 2.段落标签

 3.换行标签

​ 4.<div></div>和<span></span>

 5.文本格式化标签

6.注释标签

7.特殊字符 

(二)图像标签

 (三)超链接标签

(四)表格标签


(五)列表标签

1.无序列表(重点)

 2.有序列表

 3.自定义列表

(六)表单标签

1.表单域

2.控件

input

select

下拉列表

文本域

总结


一、HTML的骨架标签

代码如下(示例):

<!DOCTYPE html>

<!-- 页面中最大的标签 根标签 -->
<html lang="en">

<!-- 头部标签 -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- 标题标签 -->
   <title>Document</title>
</head>

 <!-- 文档的主体 -->
<body>
 ...
 ...  
 ... 
</body>
</html>
  • 文档类型<!DOCTYPE >

用来说明你用的XHTML或者HTML是什么版本。<!DOCTYPE html>告诉浏览器按照HTML5标准解析页面。

  • 页面语言lang

lang指定该html标签内容所用的语言

 <html lang="en">   en 定义语言为英语; zh-CN定义语言为中文

  • 字符集charset

UTF-8是目前最常用的字符集编码方式

二、HTML常用标签

(一)排版标签

1.标题标签<h1~h6> </h1~h6>

代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <h1>一级标题</h1>   
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>
</body>
</html>

 2.段落标签<p> </p>

把 HTML 文档分割为若干段落,代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>圣诞节当然少不了圣诞老人,根据圣经记载,书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢?</p>
    <p>相传在一千六百多年前,荷兰巴里地方有一个老人,名叫尼古拉斯,他一生最爱帮助贫穷的人。其中有一次他帮助三个贫穷的少女,送她们三袋金子以逃过被卖的不幸。</p>
    <p>到了一八二二年,由荷兰传教士把这位伟大慈善家的故事传到美国,装扮圣诞老人渐渐地流行于世界各国。根据调查,以上故事还有下文;当尼古拉斯偷偷把其中一袋金子送给其中一名女子时,他把金子从其中一个窗户扔进去,恰好掉进晾在壁炉上的一只长袜中。于是,将礼物放在圣诞袜子的送礼方法便传到至今。</p>
</body>
</html>

 3.换行标签<br>

代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    圣诞节当然少不了圣诞老人,<br>根据圣经记载,书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢?相传在一千六百多年前,荷兰巴里地方有一个老人,名叫尼古拉斯,他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女,送她们三袋金子以逃过被卖的不幸。到了一八二二年,由荷兰传教士把这位伟大慈善家的故事传到美国,装扮圣诞老人渐渐地流行于世界各国。根据调查,以上故事还有下文;当尼古拉斯偷偷把其中一袋金子送给其中一名女子时,他把金子从其中一个窗户扔进去,恰好掉进晾在壁炉上的一只长袜中。于是,将礼物放在圣诞袜子的送礼方法便传到至今。
</body>
</html>

 4.<div> </div>与<span> </span>

 这两个标签是没有语义的,一行只能放一个<div>,一行可以放多个<span>

代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div>今日股票</div>
   <span>百度</span>
   <span>新浪</span>
   <span>腾讯</span>
</body>
</html>

 5.文本格式化标签

语义标签说明
加粗<strong></strong>或<u></u><stong>更强烈
斜体<em></em>或<i></i><em>更强烈
删除线<del></del>或<s></s><del>更强烈
下划线<ins></ins>或<u></u><ins>更强烈

代码如下(示例):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <strong>特大新闻</strong><br>
  <b>特大新闻</b><br>
  <em>特大新闻</em><br>
  <i>特大新闻</i><br>
  <del>特大新闻</del><br>
  <s>特大新闻</s><br>
  <ins>特大新闻</ins><br>
  <u>特大新闻</u><br>
</body>
</html>

6.注释标签

<!-- 注释语句 --> 

注释内容前后各一个空格字符,注释位于要注释代码的上面,单独占一行

快捷键是:    ctrl + /   或者 ctrl +shift + / 

7.特殊字符 

(二)图像标签<img>

<img src="cz.jpg" width="300"  height="300" border="3" title="这是个小蒲公英" />

属性属性值说明
src图片路径

必须属性

alt文本替换文本,当图片显示不出来而显示的文本
title文本

提示文本,鼠标放在图片上显示的文本

width像素图像的宽度,宽度和高度设置一个即可
height像素图像的高度
border像素图像的边框粗细
  • 什么是属性?

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

  1. 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。
  2. 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
  3. 采取  键值对 的格式   key="value"  的格式
  • src图片路径怎么写?(一般用相对路径)

 (三)超链接标签<a> </a>

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

属性作用
href

用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能

target

于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,指在当前窗口打开链接,_blank为在新窗口中打开链接。

  • 外部链接: <a href=" http:// www.baidu.com ">百度 </a>
  • 内部链接:直接链接内部页面名称即可, 比如 < a href="index.html"> 首页</a>
  • 空链接:如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”,即<a href="#">首页</a>
  • 下载链接:如果href里的地址是一个文件或压缩包,会下载这个文件,<a href="img.zip">下载文件</a>
  • 网页元素链接:不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。<a href="http://www.baidu.com"><img src="img.jpg"></a>
  • 锚点链接:通过创建锚点链接,用户能够快速定位到目标内容
  • 1. 使用相应的id名标注跳转目标的位置。 (找目标)  <h3 id="two">第2集</h3> 
    2. 使用<a href="#id名">链接文本</a>创建链接文本(被点击的) <a href="#two">   

  • 代码如下(示例)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vscode</title>
    </head>
    <body>
        <h2>目录</h2>
        1.<a href="#experience">早年经历</a><br />
        2.<a href="#actor">演艺经历</a><br />
        
      <h4 id="experience">早年经历</h4>
        <p>刘德华出生于香港新界,在家中排行老四,幼时随家人搬到了九龙钻石山的木屋区居住,并和姐弟一起帮助家里打理卖稀饭的生意 [20]  。1973年,刘德华随家人搬入香港蓝田邨第15座14楼 [21]  。刘德华从黄大仙天主教小学毕业后升读可立中学 [22]  。在可立中学读书期间,刘德华积极参加校内学校剧社的表演,在老师杜国威的指导下学习戏剧方面的知识。此外,他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E(中文读本A)的成绩。中六上学期后,他到香港电视广播有限公司的艺员训练班受训,从而开始了演艺之路 [23]  。</p>
      <h4 id="actor">演艺经历</h4>
        <p>1981年,刘德华考进第10期无线电视艺员训练班 [24]  。同年,出演个人首部电视剧《江湖再见》,在剧中饰演以贩卖妇女为生的小混混阿龙;该剧获得美国电视节电视剧特别奖 [25]  。</p>
        <p>刘德华以甲级成绩从艺员训练班毕业后正式签约TVB [26]  。同年在喜剧《花艇小英雄》中饰演败家仔钱日添。12月,与叶德娴搭档主演时装警匪剧《猎鹰》,凭借卧底警察江大伟一角获得关注 [27]  。</p>
        <p>1983年,主演金庸武侠剧《神雕侠侣》,在剧中饰演外貌俊俏、倜傥不羁的杨过 [28]  ;该剧在香港播出后取得62点的收视纪录。同年,与黄日华、梁朝伟、苗侨伟、汤镇业组成“无线五虎将” [29]  。</p> <a href="#">返回顶部</a>
    
    </body>
    </html>

    (四)表格标签<table> </table>

<table>

   <caption>我是表格标题</caption>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

标签

定义

说明

<table></table>

表格标签

定义一个表格标签

<tr></tr>

表格行标签

用于定义表格中的行,必须嵌套在 table标签中,有几对<tr>就代表几行。

<td></td>

单元格标签

用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,<tr>中有几对<td>就代表有几列。

<th></th>

表头单元格标签

一般表头单元格位于表格的第一行或第一列,并且文本加粗居中,只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

<caption></caption>

表格标题标签

标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在 表格里面才有意义。

<thead></thead>

表格头部

<table>标签的子元素,需出现在 <caption>、<colgroup> 元素之后;<tbody>,<tr>或<tfoot>元素之前。<thead>标记内应至少包含一行<tr>元素。

 <tbody></tbody>

表格主体<table>标签的子元素,

<tfoot></tfoot>

表格脚注<table>标签的子元素,

属性(了解,CSS实现)写到属性值说明
align<table>标签left,center right

表格对齐,而不是表格里边的内容

border<table>标签1或者“ ”

有或无边框,默认为无

width<table>标签像素值宽度
cellspacing<table>标签像素值

单元格之间的空白

cellpadding<table>标签像素值

单元边沿与内容的空白

clospan 和 rowspan<td>标签数字

1.确定跨行rowspan还是跨列colspan?跨行就合并到上边的,跨列就合并到左边的单元格

2.找到目标单元格:合并方式=合并单元格的数量<td colspan="2"></td>

3.删除多余<td>单元格

(五)列表标签

种类格式效果说明
无序<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>
  • 列表项1
  • 列表项2

<ul>中只能嵌套<li>,直接在<ul>标签中输入其他标签或者文字的做法是不被允许的。<li>与</li>之间相当于一个容器,可以容纳所有元素。

有序<ol type="1"> 
  <li>列表一</li>
  <li>列表二</li>
</ol>
  1. 列表1
  2. 列表2
     

<ol>标签中的type属性值为排序的序列号,不添加type属性时,有序列表默认从数字1开始排序。

常用的type属性值分别为是1,a,A,i,I

<ol reversed="reversed">中的reversed属性能够让有序列表中的序列倒序排列。

<ol start="3">中的start属性值为3,有序列表中的第一个序列号将从3开始排列。

自定义

<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>

关于我们

新浪微博

官方微信

联系我们

定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。

1.无序列表<ul> </ul>(重点)

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

 2.有序列表<ol> </ol>

<ol type="A"> 
  <li>列表项1</li>
  <li>列表二</li>
  <li>列表三</li>
</ol>

 3.自定义列表<dl> </dl> 

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

(六)表单标签

1.表单域<form> </form>

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

属性属性值作用
actionurl地址

用于指定接收并处理表单数据的服务器程序的url地址。

method

get/post

用于设置表单数据的提交方式,其取值为get或post。

name

名称

用于指定表单的名称,以区分同一个页面中的多个表单。

2.控件

  • <input>

<form>

性别:<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女 

</form>

属性说明作用
type

表单类型

用来指定不同的控件类型

text、password、submit、reset、button(和js结合)、file、radio(单选,要求每一个选项都有相同的name属性)、checkbox(多选,要求每一个选项都有相同的name属性)

value

表单值

表单里面默认显示的文本,必然属性

name

表单名字

页面中的表单很多,name主要作用就是用于区别不同的表单,必然属性

checked

默认选中

表示那个单选或者复选按钮一开始就被选中了

maxlength最大长度

输入字符的最大长度

  • <label> </label>

 增大面积,点到靠近区域就能选中元素;label的for属性和相关元素的id属性要相同

<form>

性别:<input type="radio" name="sex" id="nan"> <label for="nan">男</label>

<input type="radio" name="sex" id="nv"> <label for="nv">女</label>

</form>

  • 下拉列表<select> </select>

<form>

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option selected="selected">选项3</option>
  ...
</select>

</form>

 select="selected" 设置默认选中项,如果不写这句话则第一个为选中项。

  • 文本域<textarea> </textarea>

<form>

<textarea >
    文本内容
  </textarea>

</form>

  • cols="每行中的字符数" rows="显示的行数"  实际开发用css实现

 

总结

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值