html笔记

html是什么

HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。

1.超文本

也即超越纯文本，这意味着 HTML 文档不仅能包含文本（文字），还能包含图片、音视频、表格、列表、链接、按钮、输入框等高级内容。

2.标记语言

HTML 是一种计算机语言，但它不能编程，只能用来标记网页中的内容。HTML 通过不同的标签来标记不同的内容、格式、布局等，例如：

- <img> 标签表示一张图片；

- <a> 标签表示一个链接；

- <table> 标签表示一个表格；

- <input> 标签表示一个输入框；

- <p> 标签表示一段文本；

- <strong> 标签表示文本加粗效果；

- <div> 标签表示块级布局。

示例：

HTML 页面的基本结构如下所示，其中包含了各种创建网页所需的标签（例如 doctype、html、head、title 和 body 等）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML演示</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
    <p>这是另一个段落</p>
    <a href="http://c.biancheng.net/" target="_blank">这是一个链接，指向C语言中文网首页</a>
    <ul>
        <li>HTML教程</li>
        <li>CSS教程</li>
        <li>JavaScript教程</li>
    </ul>
    <input type="text" placeholder="请输入内容" />
</body>
</html>

语法说明如下：

- <!DOCTYPE html>：这是文档类型声明，用来将文档声明为 HTML 文档（从技术上来说它并不是标签），doctype 声明不区分大小写；
- <html> </html>：该标签是 HTML 页面的根标签，其他所有的标签都需要在 <html> 和 </html> 标签之间定义；
- <head> </head>：该标签中用来定义 HTML 文档的一些信息，例如标题、编码格式等等；
- <meta charset="UTF-8">：用来指明当前网页采用 UTF-8 编码，UTF-8 是全球通用的编码格式，绝大多数网页都采用 UTF-8 编码；
- <title> </title>：该标签用来定义网页的标题，网页标题会显示在浏览器的标签栏；
- <body> </body>：该标签用来定义网页中我们能通过浏览器看到的所有内容，例如段落、标题、图片、链接等等；
- <h1> </h1>：该标签用来定义标题；
- <p> </p>：该标签用来定义段落；
- <a> </a>：该标签用来定义链接；
- <ul> </ul>：该标签用来定义列表；
- <li> </li>：该标签用来定义列表项；
- <input type="text" />：用来定义一个输入框。

html标签的语法格式

自闭合标签

示例：

<img src="./logo.png" alt="C语言中文网Logo" />  <!-- 图像 -->
<hr />  <!-- 分割线 -->
<br />  <!-- 文本换行 -->
<input type="text" placeholder="请输入内容" />  <!-- 文本输入框 -->

嵌套html标签

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML标签的嵌套</title>
</head>
<body>
    <h1>C语言中文网<font size="4" color="#666">简介</font></h1>
    <p>
        C语言中文网，一个在线学习<b>编程</b>的网站，目前已经发布了将近 <font color="red">50<sup>①</sup></font> 套教程，包括<i>C语言</i>、<i>C++</i>、<i>Java</i>、<i>Python</i> 等，请<a href="http://c.biancheng.net/sitemap/" target="_blank">猛击这里</a>查看所有教程。
        <hr />
        <small>注①：C语言中文网会持续更新优质教程，教程数量将远远超过 50 套。</small>
    </p>
</body>
</html>

对代码的说明：

- 第 8 行代码，在 <h1> 标签中嵌套了 <font> 标签。<font> 标签用来设置文本样式，此处我们使用 size 属性设置了文本大小，使用 color 属性设置了文本颜色。
- 第 9~13 行代码，在 <p> 标签中嵌套了多种标签，其中：
  - <b> 标签用来加粗文本。
  - <sup> 标签用来设置上角标。
  - <i> 标签用来设置斜体文本。
  - <a> 标签用来设置超链接，其中 target 属性用来指明打开方式，`_blank`表示从新标签中打开。
  - <hr> 标签用来设置分割线，它是一个自闭合标签。
  - <small> 标签用来呈现小号字体。
<font> 是一种不被建议使用的标签，HTML 5 已经不再支持，请尽量使用 CSS 来设置文本样式。

html属性的概念及使用

专用属性

HTML 属性有很多，大体可以分为两类：

有些属性适用于大部分或者所有 HTML 标签，我们将这些属性称为通用属性；
有些属性只适用于一个或者几个特定的 HTML 标签，我们将这些属性称为专用属性。

HTML 中的标签就有 src 和 alt 两个专用属性，标签也有 href 和 target 两个专用属性，如下例所示：

<img src="./logo.png" alt="C语言中文网Logo" width="100" height="50">
<a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>

对代码的说明：

- <img> 标签中的 src 属性用来定义图像的路径，alt 属性用来定义图像的描述信息，当图像出现异常无法正常显示时就会显示 alt 中的信息。
- <a> 标签的 href 属性用来定义链接的地址，target 属性用来定义新页面在浏览器中的打开方式。

通用属性介绍

1.id

为标签定义 id 属性可以给我们提供很多便利，比如：

如果标签中带有 id 属性作为唯一标识符，通过 id 属性可以很方便的定位到该标签；
如果 HTML 文档中包含多个同名的标签，利用 id 属性的唯一性，可以很方便的区分它们。
注意：在一个 HTML 文档中 id 属性的值必须是唯一的。

示例代码：

<input type="text" id="username" />
<div id="content">C语言中文网</div>
<p id="url">http://c.biancheng.net/</p>

2.class

与 id 属性类似，class 属性也可以为标签定义名称（标识符），不同的是 class 属性在整个 HTML 文档中不必是唯一的，我们可以为多个标签定义相同的 class 属性值。另外，还可以为一个 HTML 标签定义多个 class 属性值，如下所示：

<div class="className1 className2 className3"></div>
<p class="content">C语言中文网</p>
<div class="content">http://c.biancheng.net/</div>

3.title

title 属性用来对标签内容进行描述说明，当鼠标移动到该标签上方时会显示出 title 属性的值，如下例所示：

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示文档</title>
</head>
<body>
    <a href="http://c.biancheng.net/html/" title="HTML教程">HTML教程</a>
</body>
</html>

4.style

使用 style 属性我们可以在 HTML 标签内部为标签定义 CSS 样式，例如设置文本的颜色、字体等，如下例所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示文档</title>
</head>
<body>
    <p style="color:red;">http://c.biancheng.net/html/</p>
    <img src="./logo.png" style="height:50px;" alt="C语言中文网LOGO">
    <div style="padding:10px;border:2px solid #999;text-align:center;">C语言中文网</div>
</body>
</html>

html段落标签

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML段落标签演示</title>
</head>
<body>
    <p>C语言中文网，一个在线学习编程的网站，网址：<a href="http://www.biancheng.net/" target="_blank">http://www.biancheng.net/</a></p>
    <p>C语言中文网目前已经发布了将近 <b>50</b> 套教程，包括 HTML、CSS、JavaScript 等，您可以<a href="http://c.biancheng.net/sitemap/" target="_blank">猛击这里</a>查看所有教程。</p>
    <p>我们的 Slogan：千锤百炼，只为大作；精益求精，句句斟酌；这种教程，看一眼就倾心。</p>
</body>
</html>

html文本格式化

常用格式化文本的标签：

标签	描述
...	加粗标签中的字体
...	强调标签中的内容，并使标签中的字体倾斜
...	定义标签中的字体为斜体
...	定义标签中的字体为小号字体
...	强调标签中的内容，并将字体加粗
_...	定义下标文本
^...	定义上标文本
...	定义文档的其余部分之外的插入文本
~~...~~	在文本内容上添加删除线
`...`	定义一段代码
`...`	用来表示文本是通过键盘输入的
`...`	定义程序的样本
`...`	定义变量
...	定义预格式化的文本，被该标签包裹的文本会保留所有的空格和换行符，字体也会呈现为等宽字体
...	用来表示标签中的内容为缩写形式
...	用来定义文档作者的联系信息，被该标签包裹的文本通常会以斜体呈现，并在文本前面换行
...	定义标签中的文字方向
...	定义一段引用的文本，例如名人名言，文本会换行输出，并在左右两边进行缩进
...	定义一段短的引用，浏览器会将引用的内容使用双引号包裹起来
...	表示对某个文献的引用，例如书籍或杂志的名称，文本会以斜体显示
...	用来定义一个术语，标签中的文本会以斜体呈现

html超链接标签

标签的语法格式如下：

<a href="url"  target="opentype">链接文本</a>

target属性

target 是可选属性，用来指明新页面的打开方式。默认情况下，新页面在当前浏览器窗口中打开，我们可以使用 target 属性来改变新页面的打开方式。常见的打开方式如下表所示：

属性值	说明
_self	默认，在现有窗口中打开新页面，原窗口将被覆盖。
_blank	在新窗口中打开新页面，原窗口将被保留。
_parent	在当前框架的上一层打开新页面。
_top	在顶层框架中打开新页面。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML &lt;a&gt;标签演示</title>
</head>
<body>
    <p>
        <a href="http://c.biancheng.net/html/" target="_blank">HTML教程（新窗口打开）</a><br>
        <a href="http://c.biancheng.net/css3/">CSS教程（当前窗口打开）</a><br>
        <a href="http://c.biancheng.net/js/">JS教程（被点击过）</a>
    </p>
</body>
</html>

锚链接

示例：

<body>
<a name="top">顶部</a>
<a href="https://www.baidu.com">
    <img src="resources/imags/1.jpg" alt="发票" width="300" height="300">
</a>
<p>
    <a href="https://www.baidu.com">
        <img src="resources/imags/1.jpg" alt="发票" width="300" height="300">
    </a>
</p>
<p>
    <a href="https://www.baidu.com">
        <img src="resources/imags/1.jpg" alt="发票" width="300" height="300">
    </a>
</p>

<a href="#top">回到顶部</a>

html插入图片

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML插入图片</title>
</head>
<body>
    <!-- 使用绝对路径插入网络图片 -->
    <img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994" alt="C语言中文网Logo"> <br>
    <!-- 在当前 HTML 文档的上层目录中有一个 images 文件夹，该文件夹下有一张图片 html5.png -->
    <img src="../images/html5.png" alt="HTML5 Logo">
</body>
</html>

在标签中可以使用 width 和 height 属性来指定图片的宽度和高度。默认情况下，这些属性的值都是以像素为单位的。

<img src="./logo.gif" alt="C语言中文网Logo" width="150" height="150"><img src="./html5.png" alt="HTML5 Logo" width="100" height="100">

除此之外，您也可以使用 style 属性指定图片的宽度和高度，如下所示：

<img src="./logo.gif" alt="C语言中文网Logo" style="width: 100px; height: 100px;"><img src="./html5.png" alt="HTML5 Logo" style="width: 150px; height: 150px;">

html的table标签

示例：

<table border="1">
   <tr>
     <th>名称</th>
     <th>官网</th>
     <th>性质</th>
   </tr>
   <tr>
     <td>C语言中文网</td>
     <td>http://c.biancheng.net/</td>
     <td>教育</td>
   </tr>
    <tr>
     <td>百度</td>
     <td>http://www.baidu.com/</td>
     <td>搜索</td>
     </tr>
   <tr>
      <td>当当</td>
     <td>http://www.dangdang.com/</td>
      <td>图书</td>
    </tr>
</table>

代码解释：

这是一个 4 行 3 列的表格。第一行为表头，其余三行为内容。

在上述代码中，我们使用了<table>、<tr>、<td> 及 <th> 四个标签：
<table> 表示表格，表格的所有内容需要写在 <table> 和 </table> 之间。
<tr> 是 table row 的简称，表示表格的行。表格中有多少个 <tr> 标签就表示有多少行数据。
<td> 是 table datacell 的简称，表示表格的单元格，这才是真正存放表格数据的标签。单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式。
<th> 是 table heading 的简称，表示表格的表头。<th> 其实是 <td> 单元格的一种变体，本质上还是一种单元格。<th> 一般位于第一行，充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本。
   
默认情况下，表格是没有边框的。但是我们可以使用 <table> 标签中的 border 属性来设置表格的边框宽度，单位是像素（px）。本例中我们将表格的边框宽度设置为 1px。注意，px 是默认的单位，不用显式指明。

1.表格边框合并

我们可以利用 CSS 中的 border-collapse 属性来设置表格的边框。border-collapse 是“边框塌陷”的意思，当属性值为 collapse 时，可以使表格的双边框变为单边框。

<table border="1" style="border-collapse: collapse;">

2.表格的标题

HTML 允许使用标签来为表格设置标题，标题用来描述表格的内容。

示例：

<table border="1" style="border-collapse: collapse;">
  <caption>这是表格的标题</caption>

3.单元格的合并

rowspan：表示跨行合并。在 HTML 代码中，允许我们使用 rowspan 特性来表明单元格所要跨越的行数。
colspan：表示跨列合并。同样的，在 HTML 中，允许我们使用 colspan 特性来表明单元格所要跨越的列数。

示例：

<table border="1" style="border-collapse: collapse;">
    <tr>
       <th>名称</th>
     <th>官网</th>
     <th>性质</th>
    </tr>
    <tr>
      <td>C语言中文网</td>
     <td>http://c.biancheng.net/</td>
     <td>教育</td>
    </tr>
    <tr>
      <td rowspan="2">百度</td>
      <td>http://www.baidu.com/</td>
      <td>搜索</td>
    </tr>
    <tr>
      <td colspan="2">http://www.dangdang.com/</td>
    </tr>
</table>

通过运行结果可以发现：

rowspan 属性表示向下合并单元格，colspan 属性表示向右合并单元格。
每次合并 n 个单元格都要少写 n-1 个标签。

提示：即使一个单元格中没有任何内容，我们仍需使用 <td> 或 <th> 元素来表示一个空单元格的存在，建议在 <td> 或 <th> 中加入  （空格），否则低版本的 IE 可能无法显示出这个单元格的边框。

html列表标签

示例

<body>

<!--有序列表-->
<ol>
    <li>java</li>
    <li>go</li>
    <li>python</li>
</ol>
<hr>
<!--无序列表-->
<ul>
    <li>java</li>
    <li>go</li>
    <li>python</li>
</ul>
<!--自定义列表-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>go</dd>
    <dd>python</dd>

    <dt>份数</dt>
    <dd>90</dd>
    <dd>80</dd>
    <dd>70</dd>
</dl>

</body>

列表的默认样式

浏览器会对列表设置一些默认样式，包括外边距、内边距和列表项标记，我们可以通过 CSS 样式表的 margin、padding 和 list-style 属性来修改它们，请看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改HTML列表的默认样式</title>
</head>
<body>
    <p style="margin:0px auto;">煮米饭的步骤：</p>
    <ol style="margin:0px auto; padding-left:20px; list-style:upper-latin;">
        <li>将水煮沸</li>
        <li>加入一勺米</li>
        <li>搅拌均匀</li>
        <li>继续煮10分钟</li>
    </ol>
    <p style="margin-bottom:0px;">早餐的种类：</p>
    <ul style="margin:0px auto; padding-left:20px; list-style:square;">
        <li>鸡蛋</li>
        <li>牛奶</li>
        <li>面包</li>
        <li>生菜</li>
    </ul>
    <dl style="margin-bottom:0px;">
        <dt><b>HTML</b></dt>
        <dd style="margin:auto auto 10px 0px;">HTML 是一种专门用来开发网页的标记语言。</dd>
        <dt><b>CSS</b></dt>
        <dd style="margin:auto auto 10px 0px;">CSS 层叠样式表可以控制 HTML 文档的显示样式，用来美化网页。</dd>
        <dt><b>JavaScript</b></dt>
        <dd style="margin:auto auto 10px 0px;">JavaScript 简称 JS，是一种用来开发网站（包括前端和后台）的脚本编程语言。</dd>
    </dl>
</body>
</html>

对 CSS 样式的说明：

margin:0px auto;将上下外边距设置为 0 像素，将左右外边距设置为自动。
margin-bottom:0px;将下方外边距设置为 0 像素。
margin:auto auto 10px 0px;将上方和右侧外边距设置为自动，将下方外边距设置为 10 像素，将左侧外边距设置为 0 像素。
padding-left:20px;将左侧内边距设置为 20 像素。
list-style:upper-latin;将列表项标记设置为大写拉丁字母。
list-style:square;将列表项标记设置为实心方块。

html表单:form标签

单属于 HTML 文档的一部分，其中包含了如输入框、复选框、单选按钮、提交按钮等不同的表单控件，用户通过修改表单中的元素（例如输入文本，选择某个选项等）来完成表单，通过表单中的提交按钮将表单数据提交给后端程序。

在 HTML 中创建表单需要用到<form>标签，具体语法如下所示：

<form action="URL" method="GET|POST">
  表单中的其它标签
</form>

对属性的说明：

action 属性用来指明将表单提交到哪个页面；
method 属性表示使用哪个方式提交数据，包括 GET 和 POST 两种方式，它们两者的区别如下：
- GET：用户点击提交按钮后，提交的信息会被显示在页面的地址栏中。一般情况下，GET 提交方式中不建议包含密码，因为密码被提交到地址栏，不安全。
- POST：如果表单包含密码这种敏感信息，建议使用 POST 方式进行提交，这样数据会传送到后台，不显示在地址栏中，相对安全。

表单属性

HTML 为<form>标签提供了一些专用的属性，如下表所示：

属性	可选值	描述
accept	MIME_type	HTML5 中不再支持，设置服务器要接收的文件类型
accept-charset	character_set	设置表单数据的字符集（默认为 HTML 文档字符集）
action	URL	设置要将表单提交到何处（默认为当前页面）
autocomplete	on、off	设置是否启用表单的自动完成功能（默认开启）
enctype	application/x-www-form-urlencoded、 multipart/form-data、 text/plain	设置在提交表单数据之前如何对数据进行编码（适用于 method="post" 的情况）
method	get、post	设置使用哪种 HTTP 方法来提交表单数据（默认为 get）
name	text	设置表单的名称
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证
target	_blank、_self、_parent、_top	设置在何处打开 action 属性设定的链接（默认为 _self）

action 和 method 是最常用的两个属性。

表达控件

控件/标签	描述
<input>	定义输入框
<textarea>	定义文本域（一个可以输入多行文本的控件）
<label>	为表单中的各个控件定义标题
<fieldset>	定义一组相关的表单元素，并使用边框包裹起来
<legend>	定义 <fieldset> 元素的标题
<select>	定义下拉列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个可以点击的按钮
<datalist>	指定一个预先定义的输入控件选项列表
<keygen>	定义表单的密钥对生成器字段
<output>	定义一个计算结果

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML form表单演示</title>
</head>
<body>
    <form action="./userinfo.php" method="POST">
        <!-- 文本输入框控件 -->
        <label>用户名： </label><input name="username" type="text"><br>
        <!-- 密码框控件 -->
        <label>密&emsp;码： </label><input name="password" type="password"><br>
        <!-- 下拉菜单控件 -->
        <label>性&emsp;别：</label>
        <select name="sex">
            <option value="1">男</option>
            <option value="2">女</option>
            <option value="3">未知</option>
        </select>
        <br>
        <!-- 复选框控件 -->
        <label>爱&emsp;好：</label>
        <input type="checkbox" name="hobby" value="1">听音乐
        <input type="checkbox" name="hobby" value="2">看电影
        <input type="checkbox" name="hobby" value="3">打游戏
        <br>
        <!-- 单选按钮控件 -->
        <label>学&emsp;历：</label>
        <input type="radio" name="education" value="1">小学
        <input type="radio" name="education" value="2">中学
        <input type="radio" name="education" value="3">本科
        <input type="radio" name="education" value="4">硕士
        <input type="radio" name="education" value="5">博士
        <br>
        <!-- 按钮 -->
        <input type="submit" value="提 交">&emsp;&emsp;
        <input type="reset" value="重 置">
    </form>
</body>
</html>

html文件域和文本域

示例：

文本域：
<p>反馈：
    <textarea name="textarea" cols="30" rows="10"></textarea>
</p>
<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
</p>

只读标签：

<p>名字：
    <input type="text" name="username" value="admin" readonly>
</p>

滑块：

<p>
    滑块：
    <input type="range" max="100" min="0" step="1">
</p>

禁用标签：

<p>爱好：
    <input type="checkbox" name="hobby" value="music" disabled>音乐
    <input type="checkbox" name="hobby" value="basketball">篮球
</p>

html头部标签

1.title标签

标签用来定义 HTML 文档的标题，只有包含 title标签的文档才算是一个有效的 HTML 文档。另外，一个 HTML 文档中仅允许存在一个 title 标签，并且 title标签必须放置在 head 标签中。

注意，在 <title> 标签内部仅允许包含纯文本内容，不能包含其他 HTML 标签。

title 标签的主要作用如下所示：

在浏览器标题栏或者任务栏中显示标题；
当将页面添加到收藏夹（书签）时提供标题；
在搜索结果中显示页面标题。

<head>
    <meta charset="utf-8">
    <title>C语言中文网：一个在线学习编程的网站</title>
</head>

2.base标签

标签用于为页面中所有相对链接指定一个基本链接，当您设置了基本链接后，当前页面中的所有相对链接都会使用这个基本链接作为前缀，如下例所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>&lt;base&gt;标签演示</title>
    <base href="http://c.biancheng.net/">
</head>
<body>
    <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="html/index.html">HTML教程</a></li>
    </ul>
</body>
</html>

注意，HTML 文档中的 <base> 标签必须出现在任何引用外部资源的标签之前，而且一个 HTML 文档中仅允许定义一个 <base> 标签。

3.link标签

标签经常用于引用外部 CSS 样式表，标签中包含两个主要的属性，分别是 rel 和 href。rel 属性用来指示引用文件的类型，href 属性用来设置外部文件的路径。示例代码如下：

<head>
    <title>此处书写标题</title>
    <link rel="stylesheet" href="common.css">
</head>

HTML <head> 标签中可以包含任意数量的 <link> 标签。

4.style标签

使用

标签：HTML,定义,标签,笔记,表单,Html,文本,属性
From： https://www.cnblogs.com/wjm0401/p/16924270.html

Html笔记