首页 > 其他分享> 文章详细

超全html笔记

2021-05-18 15:29:56 阅读：118 来源： 互联网

标签：HTML 超全元素定义笔记表单 html 文档属性

html学习笔记

文章目录

html学习笔记

学习资料

https://www.w3school.com.cn/html/index.asp

最常用的标签

标题： <h1> - <h6>

段落：<p>

链接：<a>

图像：<img>

水平线：<hr />

空行/换行：<br />

节或区域：<div>

行内小块：<span>

表格：<table>

网页中网页：<iframe>

框架：<frameset>、<frame>(一个窗口几个页面)

JavaScript：<script>

表单：<form>

表单元素：<input>

元素：

从开始标签到结束标签的所有代码。

<p> 元素：定义了 HTML 文档中的一个段落。

<body>元素：定义了 HTML 文档的主体。

<html> 元素：定义了整个 HTML 文档

语义元素

非语义元素的例子：<div> 和 <span> ，无法提供关于其内容的信息。

语义元素的例子：<form>、<table>以及 <img> ，清晰地定义其内容。

div、span元素容器

块元素

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>, <p>, <ul>,<table>

内联元素

内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>

<div>：块级元素

用于组合其他HTML元素。
可用于对大的内容块设置样式属性。（配合css）
可用于页面布局

<span>：内联元素

用于组合其他HTML元素。
可用于对大的内容块设置样式属性。（配合css）

页面布局

定义页面不同部分的语义元素：

语义元素	描述
header	定义文档或节的页眉，用作介绍性内容的容器
nav	定义导航链接的容器，不过并非链接都应该位于nav中
section	定义文档中的节
article	定义独立的自包含文章
aside	定义内容之外的内容（比如侧栏）
footer	定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
details	定义额外的细节
summary	定义 details 元素的标题
article	规定独立的自包含内容，应用于论坛、博客、新闻等。
figcaption	在`<figure>`中，`<imag>`定义图标，`<figcaption>`定义标题
figure	将图片和标题组合放在figure元素中，应用于书籍、报纸，与图片搭配的标题
main	规定文档的主内容
mark	定义重要的或强调的文本
time	定义日期/时间

HTML5 语义元素

<!DOCTYPE html>
<html>

<head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;	      
}
#section {
    width:350px;
    float:left;
    padding:10px;	 	 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;	 	 
}
</style>
</head>

<body>

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">
Copyright ? W3Schools.com
</div>

</body>
</html>

使用表格进行页面布局

<html>

<head>
<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp td {
    width:40px;
}
</style>
</head>
<body>

<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    The table element was not designed to be a layout tool.
  </td>
</tr>
</table>

</body>
</html>

head元素容器

<head>是所有头部元素的容器。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 、 <style>。

<title>：（必须）定义工具栏/收藏夹/搜索引擎显示标题。

<base>：为页面上的所有链接规定默认地址或默认目标（target）：

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

<link>：定义文档与外部资源之间的关系

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

<style> ：定义样式信息。

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

<meta>：文档元数据信息。（不会显示在页面上，机器可读）

meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
```
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<meta name="keywords" content="HTML, CSS, XML" />
.
```

属性	值	描述
content	文本	定义与 http-equiv 或 name 属性相关的元信息，是必须属性
http-equiv	content-type expires refresh charset set-cookie	把 content 属性关联到 HTTP 头部。只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。
name	author description keywords generator revised others	把 content 属性关联到一个名称。
scheme	some_text	定义用于翻译 content 属性值的格式。

<script>：定义客户端脚本，比如JavaScript

属性：

总是在开始标签中规定。
总是以名称/值对的形式出现，比如：name=“value”。
属性值时中被包括在双引号中。（也可以是单引号）

每个 HTML 元素可使用的合法属性的完整列表：完整的 HTML 参考手册

更多关于标准属性的信息，请访问：HTML 标准属性参考手册

class、id属性

class：对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

<head>
    <style>
        .xxx{
            backgroud-color:black;
            margin:20px;
            padding:20px;
        }
    </style>
</head>
<body>
    <p class="xxx">xxxxxx</p>
</body>

id：用于为元素指定唯一的标识

区别：同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用

#xxx 使用
可用于设置样式
可用于创建书签
在JavaScript中设置动作：
- getElementById()访问特定id的元素

<head>
    <style>
        #xx {
            background-color: lightblue;
            color: black;
            padding: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 id="xx">My Header</h1>
</body>

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

src属性

文件路径

使用：网页、图像、样式表、JavaScript

相对路径:

前面没有/等：从当前.html路径出发

以/开始：从当前站点根目录路径开始

以./开始：当前.html上一级路径开始

以…/开始：当前.html上两级路径开始

绝对路径：完整URL

<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">

样式：

HTML5代码规定：

始终在文档的首行声明文档类型：

<!DOCTYPE html>

大小写不敏感，推荐使用小写。属性值推荐加引号
保持关闭空元素的习惯（/）
始终对图像使用alt属性，当图片无法显示时，该属性很重要
不推荐省略<head>、<body>，元数据中的<title>是必须的

访问样式表：

<link rel="stylesheet" href="styles.css">

加载JavaScript：

<script src="myscript.js">

通过JavaScript访问HTML：

var obj = getElementById("Demo")

文件名大小写敏感，使用小写文件名，或者保持好自己的习惯。

插入样式方法

外部样式表：css文件

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表：style标签

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式：style属性

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

常用的样式

背景颜色：background-color

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

字体：font-family

字体颜色：color

字体大小：font-size

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

文本对齐方式：text-align

左边距：margin-left

颜色

由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

例如：黑色（#000000）红色（#FF0000）白色（#FFFFFF) …

颜色名：仅仅有 16 种颜色名被 W3C 的标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。

查询颜色：https://www.w3school.com.cn/html/html_colornames.asp

文本格式化

加粗：<b>

大号:<big>

着重:<em>

斜体:<i>

小号:<small>

加重语气:<strong>

下标/上标:<sub>/<sup>

代码:<code>

缩写:<abbr>

…

引用

短:<q>

<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>

长:<blockquote>

<p>以下内容引用自 WWF 的网站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>

缩略词:<abbr>

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

定义项目或缩写:<dfn>

<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>

联系信息:<address>

著作标题:<cite>

链接

使用<a> 标签在 HTML 中创建链接。

<a href="url">Link text</a>

href属性：指向另一个文档的链接
name属性：规定锚（anchor）的名称，书签对读者不可见
target属性：定义被链接的文档在何处显示

锚(书签)

作用：命名锚经常用于在大型文档开始位置上创建目录/导航。

创建：

<a name="tips">基本的注意事项 - 有用的提示</a>

指向：

<! --  从当前页面指向  -->
<a href="#tips">有用的提示</a>
<! --  从其他页面指向  -->
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

图像

图像由 <img> 标签定义。必备属性：src、alt

src属性：图像源
alt属性：为图像定义一串预备的替换文本
其他属性：
- height高度、width宽度
- ismap将图像定义为服务器图像映射
- longdesc只想包含长的图像描述文档的URL
- usemap将图像定义为客户端图像映射

图像映射

<map>标签

带有可点击区域的图像。

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

图片的ismap属性

将图片设置为图像映射：

当用户在 ismap 图像上单击了某处时，浏览器会自动把鼠标的 x、y 位置（相对于图像的左上角）发送到服务器端。点击坐标会以 URL 查询字符串的形式发送到服务器。

<a href="demo_form.asp">
<img src="tulip.gif" ismap />
</a>

注意：只有<img> 元素属于带有有效 href 属性的 <a> 元素的后代时，才允许 ismap 属性

图片的usemap属性

<img src="planets.gif" alt="Planets" usemap="#planetmap" />

表格

表格：<table>

表头：<th>

行：<tr>

列：<td>

border属性：边框。
$nbsp：空位符
<caption>：标题
对表格进行分组：

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
- <thead>：表头行
- <tbody>：表格主题
- <tfoot>：表格尾行
表格列的属性
- <col>
- <clogroup>

<html>
<body>

<table width="100%" border="1">
  <caption>表格标题</caption>
  <colgroup span="2" align="left"></colgroup>
  <colgroup align="right" style="color:#0000FF;"></colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td>$47</td>
  </tr>
</table>

</body>
</html>

列表

无序列表：

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表：

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

自定义列表：dt列表项，dd列表项的解释

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

表单form

表单用于搜集不同类型的用户输入

<form>标签：

定义HTML表单：

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

表单元素：input

type属性（input类型）：文本输入类型（text）、单选按钮（radio)、提交按钮（submit）

<!DOCTYPE html>
<html>
	<body style="font-size:16px">

		<!-- 文本输入  -->
		<form>
		 账号:<br>
		<input type="text" name="id" value="请输入账号">
		<br>
		 密码:<br>
		<input type="text" name="owd" value="请输入密码">
		</form> 

		<!-- 单选按钮  -->
		<form>
		<input type="radio" name="sex" value="male" checked>Male
		<br>
		<input type="radio" name="sex" value="female">Female
		</form> 

		<!-- 提交  -->
		<br><br>
		<input type="submit" value="Submit">
		</form> 
	</body>
</html>

其他表单元素：

<textarea>：定义多行的文本输入
<fieldset>：组合表单中的元素，将部分表单内容打包，生成一组相关表单的字段。

其中，<legend>标签为fieldset元素定义标题。
```
<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>
```
<fieldset>标签可包含属性：disabled（是否禁用）、form（规定所属表单，值为表单id）、name。
<label>：标签内的文本正常显示，无特殊效果。但是当用户鼠标点击该标签，浏览器会自动将焦点转到和标签相关的控件上。

for属性：值为表单id。

form元素属性：

action属性：
- 值是URL。
- 是form必须属性，规定了向何处发送表单数据
method属性：
- 规定了发送表单数据的http方法：post/get
- post：
  - 首先浏览器将与action属性中指定的表单处理服务器建立联系
  - 然后浏览器将按分段传输的方法将数据发送给服务器端。
- get：
  - 首先与表单处理服务器建立联系
  - 然后直接在一个传输步骤中发送所有的表单数据
  - （浏览器直接将数据附在表单的action URL之后，这两者之间用问号进行分隔。
- 如何选择post和get？
  - 简短字段小表单：get
  - 许多字段/长文本域表单：post
- 处理实例：
  
  表单接受了两个简单的参数：x、y。将被编码为：
```
x=28&y=66
```
  get方法，那么将会用问号链接放在（action规定的那个表单处理服务器）url后面
```
http://www.example.com/example/program?x=28&y=66
```

rel属性：

规定当前文档和被链接文档之间的关系。

值	描述
external	规定引用的文档不是当前站点的一部分。
help	链接到帮助文档。
license	链接到文档的版权信息。
next	集合中的下一个文档。
nofollow	链接到未经认可的文档，例如付费链接。（Google 使用 “nofollow” 来指定 Google 搜索蜘蛛不应跟踪该链接）
noopener
noreferrer	规定如果用户点击该超链接，则浏览器不应发送 HTTP 推荐标头。
opener
prev	集合中的上一个文档。
search	链接到文档的搜索工具。

属性	值	描
accept-charset	charset_list	规定服务器可处理的表单数据字符集。
action	URL	规定当提交表单时向何处发送表单数据。
autocomplete	on/off	规定是否启用表单的自动完成功能。
enctype	例如text/plain	规定在发送表单数据之前如何对其进行编码。
method	get/post	规定用于发送表单数据的HTTP 方法。
name	表单名称	规定表单的名称。
novaildate	novalidate	如果使用该属性，则提交表单时不进行验证。
rel	external help license next nofollow noopener noreferer opener prev search	规定链接资源和当前文档之间的关系。
target	`_blank` `_self` `_parent` `_top` framename	规定在何处打开 action URL。

JavaScript

<script>标签：

可直接将脚本语句写在标签内
也可以通过src属性指向外部脚本文件

<noscript> 标签：

定义了替代内容，内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户。

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>抱歉，您的浏览器不支持 JavaScript！</noscript>

响应式web设计（RWD)

Bootstrap：最流行的开发响应式web的HTML、CSS、JS框架。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>

<div class="container">
<div class="jumbotron">
  <h1>W3School Demo</h1> 
  <p>Resize this responsive page!</p> 
</div>
</div>

<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>
  <div class="col-md-4">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>
</div>

</body>
</html>

HTML实体

字符实体

对于预留的字符，使用字符实体来表达。

&entity_name;
或者
&#entity_number;

例如小于号：&lt; 或 &#60;

HTML 中有用的字符实体：

注释：实体名称对大小写敏感！

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
’	撇号	' (IE不支持)	'
￠	分（cent）	¢	¢
£	镑（pound）	£	£
¥	元（yen）	¥	¥
€	欧元（euro）	€	€
§	小节	§	§
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷

其他：HTML 实体符号参考手册。

HTML编码

ASCLL

ASCII 使用 0 到 31（以及 127）之间的值作为控制字符。

ASCII 使用 32 到 126 的值表示字母、数字和符号。

ASCII 不使用 128 到 255 之间的值。
UTF-8

对于 0 到 127 的值，UTF-8 与 ASCII 相同。

UTF-8 不使用 12 8到 159 之间的值。

对于 160 到 255 之间的值，UTF-8 与 ANSI 和 8859-1 相同。

UTF-8 从值 256 继续，包含超过 10000 个不同字符。

如需深入研究，请阅读我们完整的 HTML 字符集参考手册。

@charset CSS

规定样式表中使用的字符编码

// 将样式表的编码设置为 Unicode UTF-8
@charset "UTF-8";

url

统一资源定位符/网址。

语法：

scheme://host.domain:port/path/filename
即http://ip:poot/服务器上资源路径/资源名称

scheme：定义因特网服务的类型

Scheme	访问	用于…
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页。加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		您计算机上的文件。

)。

HTML编码

ASCLL

ASCII 使用 0 到 31（以及 127）之间的值作为控制字符。

ASCII 使用 32 到 126 的值表示字母、数字和符号。

ASCII 不使用 128 到 255 之间的值。
UTF-8

对于 0 到 127 的值，UTF-8 与 ASCII 相同。

UTF-8 不使用 12 8到 159 之间的值。

对于 160 到 255 之间的值，UTF-8 与 ANSI 和 8859-1 相同。

UTF-8 从值 256 继续，包含超过 10000 个不同字符。

如需深入研究，请阅读我们完整的 HTML 字符集参考手册。

@charset CSS

规定样式表中使用的字符编码

// 将样式表的编码设置为 Unicode UTF-8
@charset "UTF-8";

url

统一资源定位符/网址。

语法：

scheme://host.domain:port/path/filename
即http://ip:poot/服务器上资源路径/资源名称

scheme：定义因特网服务的类型

Scheme	访问	用于…
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页。加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		您计算机上的文件。

标签：HTML,超全,元素,定义,笔记,表单,html,文档,属性
来源： https://blog.csdn.net/weixin_42150647/article/details/116990353

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

超全html笔记

html学习笔记

文章目录

学习资料

最常用的标签

元素：

语义元素

div、span元素容器

页面布局

head元素容器

属性：

class、id属性

src属性

文件路径

样式：

HTML5代码规定：

插入样式方法

常用的样式

颜色

文本格式化

引用

链接

锚(书签)

图像

图像映射

表格

列表

表单form

定义HTML表单：

表单元素：input

其他表单元素：

form元素属性：

JavaScript

响应式web设计（RWD)

HTML实体

HTML编码

url

HTML编码

url