本文介绍了HTML的基本概念，包括它作为超文本标记语言的角色，以及如何通过标记来构建网页结构。内容涵盖了HTML的元素如标题、文本格式、超链接、锚点、图片、表格、列表和表单的创建方法，这些都是网页制作的核心知识点。
掌握的 HTML 知识的总结
1.定义
HTML是超文本标记语言（HyperText Markup Language）的缩写。
是一种用于定义内容结构的标记语言。
在浏览器中看到的任何网页背后都是一个 HTML 文档，只要在网页上点击鼠标右键->查看源代码就可看到。
2.基础知识笔记概括
-
HTML结构特点
后缀为 .html 的文件
HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video> 等等。
整个 HTML 就由一个个元素组成（可以嵌套），而元素则一般由一对标签（tag）构成。
例如：<!DOCTYPE html> <html> <head> <h1>一个Web页</h1> </head> </html> -
标题
HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>，如下所示：
This is heading 1
This is some text.
This is heading 2
......
-
文本格式
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.This line of text is meant to be treated as no longer accurate.This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
-
超链接
基本上，我们可以把任何东西加上超链接，不过常用的是文本、图片等
超链接语法：<a href=“https://www.baidu.com/” target=“_blank”>百度一下</a> 效果如下
百度一下
说明：
1.href为 Hypertext Reference 的缩写，表示要跳转去的地址 URL(Uniform Resorce Locator)
2. target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
3.超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的
-
锚点
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
<!-- 文档其余部分 --> <h2 id="C4">第四章 论零号病人的重要性</h2> <!-- 文档其余部分 --> <a href="#C4">跳到第四章</a> <!-- 文档其余部分 -->例如跳转到标题
-
图片及文件路径
在页面插入一张图片如下：
<img src=“https://mdbootstrap.com/img/logo/mdb192x192.jpg” alt=“MDB Logo” width=“200” height=“200”>
1.src属性为要显示图片文件的位置 URL，即图片文件的路径
2.alt属性当获取图片出现问题时显示的文字（占位符）
3.可为图片指定高宽度，但不建议（可能导致图片变形）文件路径
为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。上面图片的例子即为绝对路径。
<img src=“picture.jpg”> 该图片文件与当前文档在同一目录中
<img src=“./images/picture.jpg”> 该图片文件在当前目录下的images目录中
<img src=“…/picture.jpg”> 该图片文件在上一级目录中
<img src=“/picture.jpg”> 该图片文件在网站 根目录中 -
表格及列表
有时，页面的内容需要用表格来进行呈现。我们使用<table>等标签即可：
Firstname Lastname Age Jill Smith 50 Eve Jackson 94 代码中，<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示）
无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。<ul type="square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>- Coffee
- Tea
- Milk
有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。
<ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>- Coffee
- Tea
- Milk
-
表单
当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。
当提交时，表单中没有name属性的元素将不会提交，比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。<form> <!-- 文本框，注意有 placeholder 提示符 --> 用户名：<br> <input type="text" name="name" placeholder="请输入用户名" required><br> <!-- 密码框 --> 密码：<br> <input type="password" name="ps" placeholder="请输入密码" required><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> -
区块元素、内联元素、预设格式、特殊字符
区块元素 ：
区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<\div> 等。
<h2>区块元素</h2> <div>Hello</div> <div>World</div> <p>单独一行</p>区块元素
HelloWorld单独一行
内联元素 ：
内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <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">下面的元素将在一行中显示
姓名： 哈哈哈 Google
预设格式 :
如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用pre标签。在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）
特殊字符 : 特殊字符可参考ISO-8859-1 字符实体手册
扫一扫
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
