共计 2015 个字符,预计需要花费 6 分钟才能阅读完成。
html 即 超文本标记语言,其中,超文本是指连贯单个网站内或多个网站间的网页的链接
切记:html 不是编程语言,它只是一种标记语言
1、根本的构造标签
html 中的根本构造标签是指 页面中的最根本的标签,也称为骨架标签,包含 <html>
、<head>
、<title>
、<body>
其关系为:
<html>
<head>
<title> 骨架构造 </title>
</head>
<body>
<div>Hello world!</div>
</body>
</html>
<html>
元素:蕴含整个页面中的内容,也称为根元素、根标签<head>
元素:文档头部,该内容对用户是不可见的,其中包含:搜索引擎的搜寻关键字、页面形容、字符编码申明、页面题目以及 CSS 样式表<title>
元素:文档头部,显示页面标签上,也作为珍藏的形容文字,放在<head>
中<body>
元素:页面主体内容,包含文本、图像、多媒体等等,是用户能够看见的内容
2、页面开发的根本骨架
<!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> 页面的根本骨架 </title>
</head>
<body>
未曾与你分享的工夫,我在提高!</body>
</html>
这就是页面开发的根本骨架,包含了根本根本标签和一些申明
-
<!DOCTYPE html>
:文档类型申明,通知浏览器我想要采纳HTML5
版本来显示页面1、
<!DOCTYPE>
申明标签必须卸载文档的最后面2、留神:
<!DOCTYPE>
不是一个 HTML 标签,而是一个文档申明标签
<html lang="">
:定义以后文档显示的语言,en
为英语,zh-CN
为中文
-
<meta>
:形容 HTML 文档的元数据charset
属性来定义 HTML 文档要应用哪种文字编码,默认定义为UTF-8
- 能够指定页面的形容、搜索引擎关键词、文档最初批改工夫等等
3、罕用标签
题目标签
h1 ~ h6
6 级标签,h1
最大,h6
最小
div
和 span
标签
块级标签:div
行内标签:span
这两个是用得最多的标签,然而当初提倡用 html5 的语义化标签了
段落换行分隔标签
段落标签:<p>
换行标签:<br />
分隔标签:<hr>
<p> 未曾与你分享的工夫,我在提高!</p>
<br />
<hr>
文本格式化标签
语义 | 标签 | 阐明 |
---|---|---|
加粗 | <strong></strong> 或者 <b></b> |
举荐应用 <strong> 加粗标签,语义更加强烈 |
歪斜 | <em></em> 或者 <i></i> |
举荐应用 <em> 歪斜标签,语义更加强烈 |
删除线 | <del></del> 或者 <s></s> |
举荐应用 <sel> 删除标签,语义更加强烈 |
下划线 | <ins></ins> 或者 <u></u> |
举荐应用 <ins> 下划线标签,语义更加强烈 |
须要留神一下:文本格式化标签是行内标签
图像标签
<img>
:图像标签,在 HTML 中,该标签用于定义 HTML 页面中的图片
<img src="图片门路">
<img>
标签的属性:
属性 | 属性值 | 阐明 |
---|---|---|
src | 图像门路 | == 必须属性 == |
alt | 文本 | == 替换文本 ==;图片不能显示时,就显示该文本 |
title | 文本 | == 提醒文本 ==;鼠标放在图像上时,显示的文字 |
width | 像素 | 设置图片的宽度 |
height | 像素 | 设置图片的高度 |
border | 像素 | 设置图片的边框粗细 |
<img src="./image/images1/01.jpg" alt="加载失败" title="图片" width="50px" border="5">
- 宽高是要任意设置一个,另一个会等比例缩放
超链接
<a href='url' target=''> 文本或图形 </a>
href
:就是连贯指标的 url 地址-
target
:指定链接页面关上的形式_self
:在以后页面关上(默认)_target
:在新窗口中关上
表格、列表、表单
表格
表格标签的根本语法
<table>
<tr>
<td> ... </td>
</tr>
...
</table>
<table></table>
:定义表格的标签<tr></tr>
:定义表格的行<td></td>
:定义行中的格
个别咱们为了更加语义化,会这样写:
<table>
<thead>
<tr>
<th> ... </th>
</tr>
</thead>
<tbody>
<tr> <td> ... </td> <tr>
....
</tbody>
<table>
<thead></thead>
:表头<th></th>
:表头的行(会主动加粗)<tbody></tbody>
:表格的主体
合并表格
- 跨行合并:
rowspan= 合并单元格的个数
- 跨列合并:
colspan= 合并单元格的个数
间接写在单元格上,如:<td rowspan='2'> </td>
列表
表单
正文完