HTML学习
HTML学习总结
1.HTML简介
-
HTML 指的是超文本标记语言: HyperText Markup Language
-
HTML 不是一种编程语言，而是一种标记语言
-
HTML 是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
-
HTML语言主要分为两个部分，第一部分是“头部”，“头部”主要提供网页的基本信息，比如：标题、编码等等；第二部分是“主体”，主体部分提供的是网页的主题内容，即浏览器中显示的内容。
“头部”由**** 标签”来标记，“主体”部分由“ 标签”来标记。除了这两个部分，还有文档的类型声明，文档类型声明的作用就是告诉浏览器你用的是哪个html版本来编写的，浏览器才能成功的渲染。
-
文档类型的声明由“DOCTYPE”单词来完成，放在文档的第一行。文档类型声明后是标签，标签中才是“头部”和“主体”部分。如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<link rel="stylesheet" type="text/css" href="01.css">
<style>
.main{
text-align: center; /*让div内部文字居中*/
border-radius: 50px;
width: 400px;
height: 350px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body style="text-align: center;">
<div class="main">
<h1>第一个网页</h1>
</div>
<p style="text-align:center;">hello</p>
<audio controls>
<source src="hello.mp3" type="audio/ogg">
<source src="hello.mp3" type="audio/mpeg">
</audio>
<audio controls>
<source src="hello.2.mp3" type="audio/ogg">
<source src="hello.2.mp3" type="audio/mpeg">
</audio>
<div style="text-align: center;"><img src = 'https://f000.backblazeb2.com/file/24kimg/imgs/2021/03/e44aa85aa3145e4d.gif' />
</div>
<div style="text-align: center;"><img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b1ebbd3c-ca49-405b-957b-effe60782276/e19d052b-7563-4685-8d5a-e131ed4518df.jpg" width="258" height="420" /></div>
1. 声明为 HTML5 文档
2. 元素是 HTML 页面的根元素
3. 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
4.
5. 元素包含了可见的页面内容
6.
元素定义一个大标题
7.
元素定义一个段落
2.HTML元素
HTML元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| Hello World | ||
| <a herf=“default.html” | Hello World | |
| 换行 |
注释： 开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。
HTML元素语法
- HTML 元素以开始标签 起始
- HTML 元素结束标签 终止
- 元素的内容 是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭 （以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
3.HTML标题
HTML标题(Heading)是通过
~
标签进行定义的。最多只能定义六级标题。
定义最大的标签。
定义最小的标题。
<h1>最大的一级标题。</h1>
<h2>二级标题。</h2>
<h3>三级标题。</h3>
4.HTML文本格式化
HTML文本格式化，HTML 使用标签(“bold”) 与 (“italic”) 对输出的文本进行格式。
加粗字体 :
<b>加粗文本</b><br><br>
斜体文字 ：
<i>斜体文本</i><br><br>
电脑自动输出：
<code>电脑自动输出</code><br><br>
上下标：
<sub> 下标</sub> 和 <sup> 上标</sup>
5.超链接
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
HTML使用标签 来设置超文本链接。在标签 中使用了href属性来描述链接的地址。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时，链接显示为红色并带有下划线。
HTML链接语法
超链接的HTML代码比较简单，例如：
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
href 即为要跳转去的地址 URL（Uniform Resorce Locator)
target 属性为 _blank表示在新的页面打开超链接。
锚点
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
<h2 id="C4">第四章 论零号病人的重要性</h2>
<a href="#C4">跳到第四章</a>
注意：
- 元素的
id值必须是唯一的，也即页面不能再有其它元素的id值 - 超链接中的地址需要有
#符号
6.HTML图片及文件路径img
图片
在HTML中，图片由标签定义。
是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图片，你需要使用源属性（src）。src 指 “source”。源属性的值是图片的 URL 地址。
在页面中插入一张图片如下：
<img src='https://f000.backblazeb2.com/file/24kimg/imgs/2021/03/e44aa85aa3145e4d.gif' />
文件路径
为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。
上面图片的例子即为绝对路径。下面是相对路径的例子：
| 例子 | 解释 |
|---|---|
 | 该图片与当前文档在同目录 |
 | 该图片文件在当前目录下的images目录中 |
 | 该图片文件在上一级目录中 |
7.HTML表格
实例：
| 姓 | 名 | 年龄 |
|---|---|---|
| 张 | 三 | 20 |
| 李 | 四 | 18 |
| 杨 | 无 | 42 |
表格由
标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由| 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 |
<table border="1">
<tr>
<td>张三</td>
<td>李四</td>
</tr>
<tr>
<td>王五</td>
<td>小六</td>
</tr>
</table>
8.HTML列表
HTML支持有序、无序和定义列表：
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul>标签
<ul>
<li>苹果</li>
<li>橘子</li>
<li>樱桃</li>
</ul>
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项使用数字来标记。
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
9.HTML表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
<form>
<!-- 文本框，注意有 placeholder 提示符 -->
用户名：<br>
<input type="text" name="name" placeholder="请输入用户名"><br>
<!-- 密码框 -->
密码：<br>
<input type="password" name="ps" placeholder="请输入密码"><br>
年龄：<br>
<!-- 数字输入框，注意 min 和 value 属性-->
<input type="number" name="age" min="18" value="20"><br>
<!-- 单选按钮, 注意 checked 属性 -->
性别：<br>
<input type="radio" name="gender" value="male" checked> 男<br>
<input type="radio" name="gender" value="female" checked> 女<br>
<input type="radio" name="gender" value="other"> 其它<br>
<!-- 下拉列表，注意 selected 属性 -->
党派：<br>
<select name="party">
<option value="D">民主党</option>
<option value="R" selected>共和党</option>
<option value="N">无党派</option>
</select><br>
<!-- 多选框 -->
您有哪些交通工具：<br>
<input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
<input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
<input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
<input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
<!-- 日期选择器 -->
您的工作日期：<br>
<input type="date"><br>
<!-- 文件选择器 -->
上传您的照片:<br>
<input type="file" name="photo"><br>
<!-- 文本输入区域，注意 rows 和 cols 属性 -->
您的建议：<br>
<textarea name="message" rows="5" cols="30">
The cat was playing in the garden.
</textarea><br><hr>
<!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
<input type="submit" value="提 交">
<input type="reset" value="重 置">
</form>
10.其他
HTML 的元素可以以称为区块 或 内联的方式进行显示。
区块元素
区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。
<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>
内联元素
内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。
<h3>下面的元素将在一行中显示</h3>
<span>姓名：</span>
<input name="username">
<span>哈哈哈</span>
<a href="https://google.com/">Google</a>
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">
引用：
菜鸟教程
棋歌网
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
