目录
~h6>
4.<div></div>和<span></span>
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>
用来说明你用的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" …> 内容 </标签名>
- 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。
- 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
- 采取 键值对 的格式 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> |
| <ul>中只能嵌套<li>,直接在<ul>标签中输入其他标签或者文字的做法是不被允许的。<li>与</li>之间相当于一个容器,可以容纳所有元素。 |
有序 | <ol type="1"> <li>列表一</li> <li>列表二</li> </ol> |
| <ol>标签中的type属性值为排序的序列号,不添加type属性时,有序列表默认从数字1开始排序。 常用的type属性值分别为是1,a,A,i,I <ol reversed="reversed">中的reversed属性能够让有序列表中的序列倒序排列。 <ol start="3">中的start属性值为3,有序列表中的第一个序列号将从3开始排列。 |
自定义 | <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>
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的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实现
总结