HTML总结
什么是HTML
- HTML是超文本1标记语言( HyperText Markup Language)
- HTML 用来构建 Web 页面,定义了网页的内容和结构
- HTML不是一种编程语言而是标记语言
一、一个HTML实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个HTML</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
实例解析
<!DOCTYPE html>
声明文档类型。<html></html>
元素是 HTML 页面的根元素,包括了整个页面,所有的元素都嵌套在里面。<head></head>
元素包含了文档的元数据,如<meta charset="utf-8">
定义网页编码格式为 utf-8。<title></title>
: 该元素描述了网页的标题,出现在浏览器标签上。<body></body>
: 包含页面可见的所有内容,包括文本,图片,音频,游戏等等内容。<h1></h1>
元素定义一个大标题,HTML 提供了从大到小6级标题2,分别是:<h1>
~<h6>
.<p></p>
定义元素段落
二、HTML元素
开始标签 | 元素内容 | 结束标签 |
---|---|---|
<!DOCTYPE html> | 文档声明类型 | </p> |
<html> | 根元素 | </html> |
<head> | 包含文档元数据的容器 | </head> |
<title> | 文档标题 | </title> |
<body> | 包含可见页面内容 | </body> |
<p> | 描述一个段落 | </p> |
<h1> | 这是一个标题 | </h1> |
<a href="https://www.baidu.com/" target="_blank"> | 链接 | </a> |
<img src="url" alt="some_text"> | 图片 |
三、文本格式
- HTML 使用标签
<b>
(“bold”) 与<i>
(“italic”) 对输出的文本进行格式, 如:粗体 or 斜体
这些HTML标签被称为格式化标签 - 除本此介绍的这些标签可用于文本的格式外,其它标签都不建议用来进行格式的设置。HTML 是用来表现页面内容而不是对页面进行修饰的,专门的页面美化需要使用 CSS 。
知道如下标签
标签 | 描述 |
---|---|
<b> | 粗体文本 |
<i> | 斜体文本 |
<em> | 着重文本 |
<del> | 删除文本 |
<ins> | 插入文本 |
<sub> | 下标文本 |
<sup> | 上标文本 |
<small> | 小号文本 |
<strong> | 大号文本 |
四、超链接
HTML使用标签 <a>
来设置超文本链接。当然,我们可以吧任何东西加上超链接,如文本、图像等。
1.HTML 链接语法
<a href="url" target="_blank">链接文本</a>
说明:
- href即为要跳转去的地址 URL(Uniform Resorce Locator)
- target属性为_blank表示在新的页面打开超链接(默认是在当前页面打开即_self)
2.锚点
锚点(id),也称书签。id属性可用于创建在一个HTML文档书签标记。通过锚点,可以在长页面内实现跳转。
注意:
- 元素的id值必须是唯一的。
- 超链接中的地址需要有#符号
<a id="tips">书签所在部分</a>
<a href="#tips">访问赎书签所在部分部分</a>
五、图像
1.图像
在页面插入图片:
<img src="url" alt="some_text" width="200" height="200">
- str属性指存储图像的位置,即图片文件的路径
- alt属性涌来了为图像定义一串预备的可替换的文本,替换文本的值是由用户定义的。当获取图片出现问题时,会显示替换文本。
- 图片可以指定高宽度,但是可能会导致图片变形。
2.文件路径
文件路径分为相对路径和绝对路径两种。
绝对路径例子:
- HTML文档:
<img src="https://i-blog.csdnimg.cn/blog_migrate/c207bbda52b345a4fc808a9f93ca8aa8.jpeg" alt="MDB Logo" width="200" height="200">
- 效果:
相对路径:
.表示在当前目录,…表示上一级目录。
标签 | 描述 |
---|---|
<img src="picture.jpg"> | 该图片文件与当前文档在同一目录中 |
<img src="./images/picture.jpg"> | 该图片文件在当前目录的images目录中 |
<img src="../picture.jpg"> | 该图片文件在上一级目录中 |
六、表格
表格实例
Header 1 | Header 2 |
---|---|
(1,1) | (1,2) |
(2,1) | (2,2) |
实例代码:
<table >
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
</tr>
<tr>
<td>(2,1)</td>
<td>(2,2)</td>
</tr>
</table>
其中,<tr>
表示表格的行, <td>
表示表格单元,<th>
是表头的单元(将会加粗显示)
七、列表
1、无序列表
无序列表使用<ul>
标签,每个项目前用粗体圆点进行标记。
代码:
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
效果:
- Coffee
- Milk
2、有序序列表
有序列表使用 <ol>
标签,每个项目前默认用数字进行标记。
代码:
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
效果:
- Coffee
- Milk
当然,还可以使用其他标志,比如大写字母A,小写字母a,罗马字母i等。
代码:
<ol type="a">
<li>Coffee</li>
<li>Milk</li>
</ol>
八、区块
区块元素
区块元素在浏览器显示时,通常会以新行来开始(和结束)。
比如: <h1>
, <pre>
, <p>
,<ul>
, <table>
,<div>
等。
<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>
内联元素
内联元素在显示时通常不会以新行开始。
比如: <span>
, <td>
,<input>
, <a>
, <img>
等。
<span>姓名:</span>
<input name="username">
<img src="https://i-blog.csdnimg.cn/blog_migrate/c207bbda52b345a4fc808a9f93ca8aa8.jpeg" alt="MDB Logo" width="200" height="200">
九、表单
表单用于收集当网站需要获取一些信息是,让客户进行填写或选择来用户的输入。表单元素使用<form>
标签来设置。输入标签是<input>
,输入类型由type来决定
<form>
<span>姓名:</span>
<input type="text" name="name"><br>
<span>密码:</span>
<input type="password" name="pwd"><br>
<p>单选:</p>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
<p>复选:c
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<p>日期:</p>
<input type="date"><br>
<p>文件:</p>
<input type="file" name="photo"><br>
<!-- 文本输入区域,注意 rows 和 cols 属性 -->
<p>文本框</p>
<textarea name="message" rows="5" cols="30">
</form>