HTML学习总结
HTML定义
HTML是超文本标记语言（HyperText Markup Language）的缩写，是为“网页创建和其它可在网页浏览器中看到的信息“，HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。 HTML 来构建 Web 页面即所谓的网页。
HTML文档
建立文档
新建工作目录
运行该软件VScode,并打开/新建一个工作文件
一般不放在c盘中，并选择自动保存。
新建 HTML 文件
在该文件夹下新建一个 后缀名为html 的文件
查看结果
输入
文档结构以及相关内容
文档结构
HTML元素（elements）
HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示
| 标签 | 表示 |
|---|---|
| 开始 | < p> |
| 结束 | < /p> |
剖析 HTML 文档
< !DOCTYPE html >: 声明文档类型。出于历史原因需要，现在可有可无。
< html>< /html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
<head></head>: <head>元素。 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)
<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
<body>
HTML文档相关说明
注释
如同大部分的编程语言一样，在 HTML 中有一种可用的机制来在代码中书写注释 。为了将一段 HTML 中的内容置为注释，你需要将其用特殊的记号 包括起来
例如
```<p>我在注释外，可以显示！</p>
<!-- <p>我在注释内！浏览器将忽略我</p> -->
提示： 在 code 软件中，输入Ctrl + /即可快捷的进行注释！
在 code 软件中，输入Ctrl + /即可快捷的进行注释！
空元素
一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西
代码片段
<!-- 换行 -->
<p>我可以<br>换行</p>
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>
元素属性
元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。
一个属性必须包含如下内容：
一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
属性名称，后面跟着一个 = 号。
一个属性值，由一对引号 “” 引起来。
代码片段
<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">
html标题
HTML 提供了从大到小6级标题，分别是：< h1> ~ < h6>
代码
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
文本格式
代码
<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>
运行结果如下
超链接
超链接–万维网（World Wide Web）。基本上，我们可以把任何东西加上超链接，不过常用的是文本、图片等。
代码
```<a href="https://www.baidu.com/" target="_blank">百度一下</a>
说明：
href即为要跳转去的地址 URL（Uniform Resorce Locator)
target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的
锚点
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
代码
<!-- 文档其余部分 -->
<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->
图片及文件路径 (img)
说明：
src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）
可为图片指定高宽度，但不建议（可能导致图片变形）
## 表单属性
Action 属性
action 属性定义提交表单时要执行的操作。
通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中。
在下面的例子中，表单数据被发送到名为 “action_page.php” 的文件。该文件包含处理表单数据的服务器端脚本：
Target 属性
target 属性规定提交表单后在何处显示响应。
target 属性可设置以下值之一：
| 值 | 描述 |
|---|---|
| _blank | 响应显示在新窗口或选项卡中。 |
| _self | 响应显示在当前窗口中。 |
| _parent | 响应显示在父框架中。 |
| _top | 响应显示在窗口的整个 body 中。 |
| \framename | 响应显示在命名的 iframe 中 |
默认值为 _self，这意味着响应将在当前窗口中打开。
Method 属性
method 属性指定提交表单数据时要使用的 HTTP 方法。
表单数据可以作为 URL 变量（使用 method=“get”）或作为 HTTP post 事务（使用 method=“post”）发送。
提交表单数据时，默认的 HTTP 方法是 GET。
HTML块
HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。
编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>,<p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子：<b>,<td>, <a>, <img>
HTML元素<div>
HTML<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML元素<span>
HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
扫一扫
417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
