HTML知识总结
1、何为HTML
文本标记语言（HyperText Markup Language），定义了网页内容的含义和结构。
相关
CSS：描述一个网页的表现与展示效果
JavaScript：描述功能与行为
HTML、 CSS（Cascading Style Sheets 级联式样式表) 和 JavaScript 是构建广泛使用的Web程序的三剑客。
2、HTML基础入门
-
HTML 文件以.htm或.html为扩展名
-
HTML 结构标签
| 标签 | 描述 |
|---|---|
<HTML> | 定义HTML文档 |
<head> | 定义关于文档的信息 |
<title> | 定义文档的标题 |
<body> | 定义文档主体 |
<!DOCTYPE html> | 声明文档类型。出于历史原因需要，现在可有可无。 |
<meta charset="utf-8"> | 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。 |
- HTML 标签不区分大小写
- HTML 标签属性值，单双引皆可
- HTML 语法松散
- 在 code 软件中，输入
Ctrl + /即可快捷的进行注释！ - 一般来说，元素都拥有开始标签，内容，结束标签
- 有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如
<br>, <hr>, <input>, <img>, <a>等等。我们称其为空元素 - 元素是可以有相关属性的；属性包含元素的额外信息
3、HTML基础标签
3.1文本格式
| 标签 | 描述 |
|---|---|
<h1>~<h6> | 定义标题 |
<p> | 定义段落 |
<mark> | 定义highlight文本 |
<del> | 定义删除的文本 |
<s> | 定义不再精确的文本（同 |
<ins> | 定义文本下划线（同类似）；表示插入的文本 |
<small> | 定义较小号字体文本 |
<strong> | 定义加粗文本，类似于 |
<em> | 定义斜体文本，类似于 |
- 文本格式语法
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
3.2超链接
基本上，我们可以把任何东西加上超链接，不过常用的是文本、图片等。
| 标签 | 描述 |
|---|---|
<a> | 超链接 |
| 标签属性 | 描述 |
|---|---|
href | 要跳转去的地址URL |
target | 属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self） |
- 超链接语法
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
锚点
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
<!--先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。--> <!-- 文档其余部分 --> <h2 id="C4">第四章 论零号病人的重要性</h2> <!-- 文档其余部分 --> <a href="#C4">跳到第四章</a> <!-- 文档其余部分 --> ...
3.3图片及文件路径
| 标签 | 描述 |
|---|---|
<img> | 定义图片，文件 |
| 标签属性 | 描述 |
|---|---|
src | 要显示图片文件的位置 URL，即图片文件的路径 |
alt | 当获取图片出现问题时显示的文字（占位符） |
width | 定义相关元素宽度 |
height | 定义相关元素高度 |
- 图片及文件路径语法
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
提示： 对于小尺寸的图片，现在可采用 base64 编码进行，可提高页面加载速度，提升用户体验。可前往一试。
-
文件路径
例子 解释 <img src="picture.jpg">该图片文件与当前文档在同一目录中 <img src="./images/picture.jpg">该图片文件在当前目录下的 images目录中<img src="../picture.jpg">该图片文件在上一级目录 <img src="../../picture.jpg">该图片文件在上两级目录中
.表示当前目录，..表示上一级目录
图片的存储大小对网页的加载有重要的影响，从而影响用户体验。因此，在不明显改变图片质量的情况下压缩图片是提高 Web站点速度的重要手段。请前往WebsitePlanet 以及 TinyPNG 试试！
3.4表格
| 标签 | 描述 |
|---|---|
<table> | 定义表格 |
<tr> | 定义表格中的行 |
<th> | 定义表格中的表头 |
<td> | 定义表格行中的单元 |
-
表格语法
<table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
当前这个表格比较简陋，有关表格的美化可在 CSS 部分学习
3.5列表
| 标签 | 描述 |
|---|---|
<ul> | 定义无序列表，默认使用实心圆点作为每项的标志 |
<ol> | 定义有序列表，默认使用数字作为每项的标志 |
-
无序列表语法
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> -
有序列表语法
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
无序列表：其它的标志可以是空心圆
circle，实心方块square以及不出现标志。<ul type="square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>有序列表：其它的标志可以是大写字母
A，小写字母a，罗马字母i等。<ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
3.6表单
当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。
| 标签 | 描述 |
|---|---|
<form> | 定义表单 |
<input> | 定义表单项，通过type属性控制输入形式 |
<label> | 为表单项定义标注 |
<select> | 定义下拉列表 |
<option> | 定义下拉列表的列表项 |
<textarea> | 定义文本域 |
-
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="18"><br> <!-- 单选按钮, 注意 checked 属性 --> 性别：<br> <input type="radio" name="gender" value="male" checked> 男<br> <input type="radio" name="gender" value="female"> 女<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>
提示： 当提交时，表单中没有name属性的元素将不会提交，比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。
3.7其他
-
区块元素：区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：
<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"> -
预想格式：如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用
pre标签。<pre> 我如果爱你—— 绝不象攀援的凌霄花， 借你的高枝炫耀自己； </pre> -
特殊字符
- 当你希望在页面显示一段 HTML 的源代码，你打算用标签
<pre>
<pre> <h1>这是个一级标题</h1> <p>这是一个段落<p> <a href="https://twitter.com/">眼见何事，情系何处，身处何方，心思何人</a> <pre>以上代码将得不到你想要的结果。
原因是：在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）<p>有多 远，滚 多远！</p> <hr> <h2>test.html</h2> <pre> <h1>这是个一级标题</h1> <p>这是一个段落<p> <a href="https://twitter.com/">眼见何事，情系何处，身处何方，心思何人</a> <pre> - 当你希望在页面显示一段 HTML 的源代码，你打算用标签
4、HTML学习心得
- 学习html需要多动手编写html代码，并且测试。
- 多自己去看网上的一些简单网页的源代码，比如看到自己喜欢的网站，可以右键查看源码获取其相关信息。
2439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
