HTML语法体系

最新推荐文章于 2024-03-24 15:26:44 发布

wmd墨染倾城

最新推荐文章于 2024-03-24 15:26:44 发布

阅读量1k

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/wmdjltx/article/details/108746281

版权

HTML基本信息

HTML是什么

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

VSCode编辑器常用插件

Elm Emmmet
HTML CSS Support
HTML Snippets
Sublime Text Keymap and Settings Importer

HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

开始标签	元素内容	结束标签
<p	This is a paragraph
<a href=“default.htm”	This is a link
<br /

元素的语法：

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

HTML 属性

属性总是以名称/值对的形式出现，比如：name=“value”。
属性总是在 HTML 元素的开始标签中规定
使用小写属性，且始终为属性值加引号

下面列出了适用于大多数 HTML 元素的属性：

属性	值	描述
class	classname	规定元素的类名（classname）
id	id	规定元素的唯一 id
style	style_definition	规定元素的行内样式（inline style）
title	text	规定元素的额外信息（可在工具提示中显示）

HTML样式（CSS）

样式的三种使用方法：

1 .外部样式表。
- 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。通过head标签的link引入
- ```
  <head>
  	<link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
```
2.内部样式表
- 当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过


<body style="background-color:yellow">
    
    ## background-color 属性为元素定义了背景颜色：
    <h2 style="background-color:red">This is a heading</h2>
    <p style="background-color:green">This is a paragraph.</p>
    
    ##font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：
    <h1 style="font-family:verdana">A heading</h1>
    <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
    
    
    
    ##text-align 属性规定了元素中文本的水平对齐方式：
    <h1 style="text-align:center">This is a heading</h1>
</body

常用标签

Head标签及其中的标签

标签	描述
<head	定义html的文档信息
<title	定义页面的标题
<base	定义页面链接的默认链接地址
<link	定义html和外部资源的关系
<meta	定义html文档的元数据
<script	定义客户端的脚本文件
<style	定义html文档的样式文件（css文件）

1.base标签：

href属性：定义页面中所有的相对链接的基准URL.包括a标签、image标签等有 href属性的标签。

target属性：规定所有的超链接和表单在何处打开，该属性会被每个链接中的target属性覆盖。_blank、__self、_top等

注意：最多能使用一个元素。标签必须位于元素内部。

<base href="http://www.runoob.com/images/" target="_blank">

<img src="logo.png" loading="lazy" width="24" height="39" alt="Stickman">
<a href="http://www.runoob.com">runoob.com</a>

2.link标签：

href属性：URL，定义被链接的文件的位置。

rel属性：必须。定义了被链接的文档和当前文档的关系

stylesheet表示导入的是样式表即css文件

icon表示导入该文档的图标。

type属性：规定了链接的文档类型（MIME）

提示： MIME-types 实例： “text/css”, “text/javascript”, “image/gif”, 等。

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

举例：元素不仅可以显示文本，也可以在左侧显示logo等图片。
<link rel="shortcut icon" href="图片url">

3.meta标签：

charset属性：定义文档的字符编码

name属性：取值有application-name author description generator keywords 。把content属性关联到一个名称

http-equiv属性：取值：content-type default-style refresh。把content属性关联到HTTP头部

content属性：该属性要与http-equiv属性和name属性配合使用表示这两个属性的元信息。取值文本就行:“text”

实例 1 - 定义文档关键词，用于搜索引擎：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

实例 2 - 定义web页面描述：
<meta name="description" content="Free Web tutorials on HTML and CSS">

实例 3 - 定义页面作者：
<meta name="author" content="Hege Refsnes">

实例 4 - 每30秒刷新页面：
<meta http-equiv="refresh" content="30">

4.script标签

src属性：外部脚本的UTL

type属性：MIME-type：“text/css”, “text/javascript”, “image/gif”

charset属性：规定脚本中使用的字符集（仅适用于外部脚本）

async属性：是否异步执行脚本

<script src = "URL" type="text/javascript">
    js代码
</script>

**注释：**如果使用 “src” 属性，则

注释： 有多种执行外部脚本的方法：

如果 async=“async”：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer=“defer”：脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

5.style标签

type属性：MIME-type：text/css", “text/javascript”, “image/gif”

scoped属性：如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。

<head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title>
    <style type="text/css">
        h1 {color:red;}
        p {color:blue;}
    </style>
</head>
 
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>

h1-h6标题标签

标签	描述
<h1	标题，最大标题
…	…
<h6	标题，最小标题
<html	定义html文档
<head	定义html文档的头
<body	定义html文档的主体
	注释
<hr单标签	水平线
<br单标签	换行
<b	加粗标签
<i	斜体

注释: 浏览器会自动地在标题的前后添加空行。将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

p标签

标签	描述
<p	定义一个段落

注意：您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

文本文档的格式化标签

文档格式标签	描述
<b	粗体文本
<em	着重文字
<i	斜体文字
<samll	小号文字
<strong	加重语气
<sub	下标
<sup	上标
<ins	插入字
<del	删除字
<center	这段文字会居中显示
引文、引用
<pre	按照输入的原格式显示
<address	定义引用地址
<abbr	定义缩写
<q	定义小段的引用
<cite	定义书籍、歌曲、电影、绘画的名字标题
<blockquote	定义大块的引用


<p>
    My favorite color is <del>blue</del> <ins>red</ins>!
</p>

The<abbr title="World Health Organization">WHO</abbr> was founded in 1948.

<address>
    Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
</address>

<!--通常浏览器会把blockquote元素呈现为一段左右两侧缩进(40px)的文本。
	blockquote元素中一般嵌套p元素，用于标记被引用的文本，这些引用文本并不是直接位于blockquote元素中
	那么可以在<blockquote>标签的cite（引用）属性中指明原始来源的URL。
-->
<blockquote cite="http://www.worldwildlife.org/who/index.html">
	For 50 years, WWF has been protecting the future of nature. The world's leading conservation 				organization, WWF works in 100 countries and is supported by 1.2 million members in the United States 		and close to 5 million globally.
</blockquote>

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

<p>WWF's goal is to: 
    <q>Build a future where people live in harmony with nature.</q>
    	We hope they succeed.
</p>

引文、引用和定义元素

标签	描述
<abbr	定义缩写或首字母缩略语。
<address	定义文档作者或拥有者的联系信息。
<bdo	定义文本方向。
<blockquote	定义从其他来源引用的节。
<dfn	定义项目或缩略词的定义。
<q	定义短的行内引用。
<cite	定义著作的标题。

## <q> 用于短的引用。浏览器通常会为 <q> 元素包围 --引号--。
<p>
    WWF 的目标是：<q>构建人与自然和谐共存的世界。</q>
</p>
    
    
## 用于长引用的<blockquote>。 <blockquote> 元素定义被引用的节。浏览器通常会对 <blockquote> 元素进行-- 缩进-- 处理。
<p>
    以下内容引用自 WWF 的网站：
</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
    五十年来，WWF 一直致力于保护自然界的未来。
    世界领先的环保组织，WWF 工作于 100 个国家，
    并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>
    
 
##  用于缩略词的 <abbr>。<abbr> 元素定义缩写或首字母缩略语。
<p>
    <abbr title="World Health Organization" > WHO </abbr> 成立于 1948 年。
</p>
    
    
## <dfn> 元素定义项目或缩写的定义。
	1. 如果设置了 <dfn> 元素的 title 属性，则定义项目：	
	<p>
        <dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。
    </p>
    
    2. 如果 <dfn> 元素包含具有标题的 <abbr> 元素，则 title 定义项目：
    <p>
        <dfn>
            <abbr title="World Health Organization">WHO</abbr>
        </dfn> 成立于 1948 年。
    </p>
    
## HTML <address> 元素定义文档或文章的联系信息（作者/拥有者）。此元素通常以--斜体--显示。大多数浏览器会在此元素前后添加折行。
    
<address>
    Written by Donald Duck.<br> 
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
</address>
    
    
## <cite> 元素定义著作的标题。浏览器通常会以斜体显示 <cite> 元素。
<p>
    <cite>The Scream</cite> by Edward Munch. Painted in 1893.
</p>

HTML 计算机代码格式

通常，HTML 使用可变的字母尺寸，以及可变的字母间距。
在显示计算机代码示例时，并不需要如此。
, , 以及元素全都支持固定的字母尺寸和间距。
这些标签不可以改变其中的元素的样式。

标签	描述
<code	定义计算机代码文本
<kbd	定义键盘文本
<samp	定义计算机代码示例
<var	定义变量
<pre	定义预格式化文本

a标签

标签	描述
	定义一个超链接

a标签的属性：
1.href属性：点击以后跳转的地址
2.target属性：_blank表示在新窗口打开该网页，_self在本网页打开网页
3.title属性：表示鼠标划上去去提示文字，
4.id属性/name属性：创建在同一个HTML文档中的锚点，用于跳转使用。使用#id来跳转带某一个锚点。
注意：您可以使用 id 属性来替代 name 属性，命名锚同样有效。

<a href="https://www.runoob.com/" target="_blank" >访问菜鸟教程!</a>


<a href="#C4">查看章节 4</a>
<h2>
    <a id="C4">章节 4</a>
</h2>
<p>这边显示该章节的内容……</p>

注意：
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。在标签中使用了href属性来描述链接的地址。默认情况下，链接将以以下形式出现在浏览器中：一个未访问过的链接显示为蓝色字体并带有下划线。访问过的链接显示为紫色并带有下划线。点击链接时，链接显示为红色并带有下划线。

ol或者ul列表：

列表的所有标签	描述
<ol	定义有序列表
<ul	定义无序列表
<li	定义列表项
<dl	自定义列表的开始标志
<dt	自定义列表项目
<dd	自定义列表项目的描述

ul标签的type属性：disc实心圆、circle空心圆、square实心方块
ol标签的type属性：1代表数字、a小写字母、A大写字母、i小写罗马字、I大写罗马字
list item 列表的一行，表示列表构成的元素
自定义列表：

开始列表项
列表项的定义
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以
标签开始。每个自定义 列表项以开始。每个自定义 列表项的定义以
开始

#无序列表
<ul type = "disc">
    <li>Coffee</li>
    <li>Milk</li>
</ul>

#有序列表
<ol type = "a">
    <li>Coffee</li>
    <li>Milk</li>
</ol>

#自定义列表
<dl>
    <dt>Coffee</dt>
    	<dd>- black hot drink</dd>
    <dt>Milk</dt>
    	<dd>- white cold drink</dd>
</dl>


<h1>焦点新闻&nbsp;<img src = "img/news.jpg" height="30px" width="40px"></h1>
<hr>

//无序列表
<ul>
    <li>
        <a href = "https://news.cctv.com/2020/09/09/eOHyfw7fj200909.shtml" target ="_blank">8月份乘用车</a>
    </li>
    <li>
        <a href = "https://news.cctv.com/2020/09/09/ARTIKaTvAZwQVbfEokZon1IS200909.shtml">8月CPI</a>
    </li>
</ul>

img标签：

img标签的属性
1.src属性：图片的相对路径或者绝对路径。或者网络上的URL
2.alt属性：图片在没有加载的时候显示的内容
3.height和width属性：设置图片的高度和宽度。可以通过width和height来设置图片的长度和宽度。如果只设定一个值。那么图片会自动的等比例的放大或者缩小。调整图片属性让他不出现滚动条，而是填充满整个窗口，100%：表示撑满整个窗口
4.style属性：设置图片的css
注意：图片在网页上的排放顺序是从左到右依次排放的，并且默认底部对齐。当最后位置放不下图片时，就会换行排列。
可以通过width和height来设置图片的长度和宽度。如果只设定一个值。那么图片会自动的等比例的放大或者缩小

<a href = "" target = "" alt = "" title = ""></a>

<a href = "http://www.baidu.com" target = "_blank">
    <img src = "img/6.png" width = "100px" height = "100px"> 
</a>

调整图片属性让他不出现滚动条，而是填充满整个窗口
100%：表示撑满整个窗口

<body>
    <img src="img/qianfeng01.png" width = "100%">
    <img src="img/qianfeng02.png" width = "100%">
    <img src="img/qianfeng03.png" width = "100%">
    <img src="img/qianfeng04.png" width = "100%">
    <img src="img/qianfeng05.png" width = "100%">
</body>

几个不是很常用的标签

<del>在这段文字上加上删除线</del>

10<sup>2</sup>

10<sub>4</sub>

<u>在这段文字下面加上下划线</u>

<center>这段文字会居中显示</center>

百度云盘制作

绝对路径和相对路径的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>three</title>
	</head>
	<body>
		<img src = "../../img/baidu.jpg" width = "100%" >
		<p>
			<a href = "../two.html">
				<img src = "../../img/return.jpg" width = "30px" >
			</a>
			
		</p>
		<p>
			<img src = "../../img/movie.png">
			<img src = "../../img/movie.png">
			<img src = "../../img/movie.png">
			<img src = "../../img/movie.png">
		</p>
	</body>
</html>

绝对路径和相对路径

路径	描述
img src=“picture.jpg”	picture.jpg 位于与当前网页相同的文件夹
img src=“images/picture.jpg”	picture.jpg 位于当前文件夹的 images 文件夹中
img src="/images/picture.jpg"	picture.jpg 当前站点根目录的 images 文件夹中
img src="…/picture.jpg"	picture.jpg 位于当前文件夹的上一级文件夹中

table表格

表格	描述
<table	定义表格
<captio	定义表格标题。
<th	定义表格的表头。
<tr	定义表格的行。
<td	定义表格单元。
<thead	定义表格的页眉。
<tbody	定义表格的主体。
<tfoot	定义表格的页脚。
<col	定义用于表格一列的属性。
<colgroup	定义表格列的组。。

表格单元的默认大小需要用内容撑开的。:代表每个单元格的宽度。单元格的高度
行合并和列合并：
1. 行合并，删除多余的单元格，colspan设置成合并单元格的个数
2. 列合并，删除多余的单元格，rowspan设置成合并的单元格个数
table的属性
1. border属性，如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
```
<table border="1">
    <col width = "200px">
    <tr align = "center">
    	<th>th表头</th>
        <th>th表头</th>
    </tr>
    <tr align = "center">
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>
```
  th表头 th表头
  Row 1, cell 1 Row 1, cell 2
2. cellspacing属性：规定单元格之间的空白（空隙）****。取值 : 像素( pixels)或者百分比(%)
3. cellpadding属性：规定单元边沿与其内容之间的空白。取值 : 像素( pixels)或者百分比(%)
4. table的其他属性见表格

th表头	th表头
Row 1, cell 1	Row 1, cell 2

属性	值	描述
align	left center right	不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x) colorname	不赞成使用。请使用样式代替。规定表格的背景颜色。
border	pixels	规定表格边框的宽度。
cellpadding	像素( pixels)或者百分比(%)	规定单元边沿与其内容之间的空白。
cellspacing	像素( pixels)或者百分比(%)	规定单元格之间的空白。
frame		规定外侧边框的哪个部分是可见的。
rules		规定内侧边框的哪个部分是可见的。
summary	text	规定表格的摘要。
width	像素( pixels)或者百分比(%)	规定表格的宽度。

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。
tfoot 元素应该与 thead 和 tbody 元素结合起来使用。
thead 元素用于对 HTML 表格中的表头内容进行分组，而 tbody 元素用于对 HTML 表格中的主体内容进行分组。
**注释：**如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
注释： 内部必须拥有标签！

标签及属性：

HTML 表单中有两种类型的单元格：
- 表头单元格 - 包含表头信息（由 th 元素创建）
- 标准单元格 - 包含数据（由 td 元素创建）
th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。

属性	值	描述
abbr	text	规定单元格中内容的缩写版本。
align	left right center justify char	规定单元格内容的水平对齐方式。
axis	category_name	对单元格进行分类。
bgcolor	rgb(x,x,x) colorname	不推荐使用。请使用样式替代它。规定表格单元格的背景颜色。
char	character	规定根据哪个字符来进行内容的对齐。
colspan	number	设置单元格可横跨的列数。
rowspan	number	规定单元格可横跨的行数。

注意：

a标签不能嵌套a标签
p标签不能嵌套p标签
h1-h6也不能嵌套

form表单

form表单的作用：

用于手机用户输入的数据

form表单的属性

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。
id	input输入框写在了form表单外，可以通过加入到form表单中

form表单的method属性

method有两个取值get和post。
get和post的区别
1. get请求通常获取数据
2. post通常表示提交数据
3. get发送的数据在地址栏显示，post用户不可见
4. get不能提交大数据，比如视频，但post请求可以提交大数据。

form表单中的元素标签——表单元素

标签	描述
单标签：	最重要的表单元素，可以根据不同的type变化各种形态
标签：标签：	定义下拉列表定义下拉列表的选项列表通常会把首个选项显示为被选选项。
标签：	定义多行输入字段（文本域）文本输入的单行输入字段
标签：	定义可点击的按钮的专门标签
标签，要与和配合使用	元素为元素规定预定义选项列表。用户会在他们输入数据时看到预定义选项的下拉列表 <*input> 元素的 list* 属性必须引用元素的 id 属性**

input标签的type属性的取值

注意：

表单必须有提交submit才能提交，button仅仅是一个按钮。不具备提交功能。

input的type取值	描述
<input type=“text”	定义供文本输入的单行输入字段：
<input type=“password”	定义密码字段：
<input type=“submit”	定义提交表单数据至表单处理程序的按钮。表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面在表单的 action 属性中规定表单处理程序（form-handler）
<input type=“button”	定义按钮 onclink属性是当点击按钮后出现的动作。
<input type=“reset”	定义form表单中所有的输入框的重置按钮
<input type=“radio”	定义单选按钮,只能选一个 Male checed是默认被选的属性
<input type=“checkbox”	定义复选框。复选框允许用户在有限数量的选项中选择零个或多个选项。
<input type=“number” name=“quantity” min=“1” max=“5”	用于应该包含数字值的输入字段。您能够对数字做出限制。
<input type=“date”	用于应该包含日期的输入字段。选择年月日
<input type=“color”	用于应该包含颜色的输入字段
<input type=“range” name=“points” min=“0” max=“10”	用于应该包含一定范围内的值的输入字段。滑动取值。
<input type=“month”	允许用户选择月份和年份。选择年月
<input type=“time”	允许用户选择时间（无时区）选择时分秒
<input type=“email”	用于应该包含电子邮件地址的输入字段能够在被提交时自动对电子邮件地址进行验证。某些智能手机会识别 email 类型，并在键盘增加 “.com” 以匹配电子邮件输入
<input type=“file”	文件选择框
…

input标签的属性：用一定要写的是 type、name、value。

加下划线的属性只有key值不用谢value的值。

属性	描述
name属性	规定识别input的名称。
value属性：	规定输入字段的初始值。即输入空中的默认文字如果要正确地被提交，每个输入字段必须设置一个 name 属性。
readonly属性	属性规定输入字段为只读（不能修改）,当表单提交的时候会提交该字段 readonly 属性不需要值。它等同于 readonly=“readonly”
disabled属性	disabled 属性规定输入字段是禁用的，被禁用的元素是不可用和不可点击的被禁用的元素不会被提交 disabled 属性不需要值。它等同于 disabled=“disabled”
size属性	属性规定输入字段的尺寸（以字符计）。即输入框的大小
maxlength属性	属性规定输入字段允许的最大长度。即输入文本的最大长度控件不会接受超过所允许数的字符
autofocus属性	如果设置，则规定当页面加载时元素应该自动获得焦点。即鼠标或屏幕中的输入指示符自动定位到该输入框。
form属性	form 属性规定元素所属的一个或多个表单属于id= FormIdable的表单如需引用一个以上的表单，请使用空格分隔的表单 id 列表。
height 和 width 属性	height 和 width 属性仅用于。属性规定元素的高度和宽度。把图像定义为提交按钮，并设置 height 和 width 属性：
list属性	list 属性引用的元素中包含了元素的预定义选项。取值是datalist的id的属性值。
min 和 max 属性	min 和 max 属性规定元素的最小值和最大值。 min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。具有最小和最大值的元素
step 属性	step 属性规定元素的合法数字间隔。 step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围。 step 属性适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

#step属性
<input type="number" name="points" step="3">

#mix和max属性
<input type="date" name="bday" max="1979-12-31">   
<input type="date" name="bday" min="2000-01-02">   
<input type="number" name="quantity" min="1" max="5">


#list属性
<input list="browsers" name = "dlvalue">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

# form的id和input的form属性配合使用
<form action="action_page.php" id="form1">
   <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
</form>
 <input type="text" name="lname" form="form1">


#自动获取焦点autofocus
First name:<input type="text" name="fname" autofocus>

注意：

form必须要有action属性，表示数据提交的地址
所有需要提交的数据，input必须要有name属性。
input按钮的文字，使用value属性表示
input必须放在form表单中才能提交

容器标签：没有特定含义

标签	描述
div>	定义文档中的分区或节（division/section）。块级元素
span>	定义 span，用来组合文档中的行内元素。内联元素

块级元素和内联元素的区别

块级元素在浏览器显示时，通常会以新行来开始（和结束）。例子：
,
,
- ,
内联元素在显示时通常不会以新行开始。例子：, , ,

span和div块标签

span，一个容器标签，不具备任何特殊功能，仅当容器来使用。用于包裹一段文本，便于为部分文本或者整个文本设置样式属性。
当用span标签包裹其一段文本的时候，就相当于给这段文字的周围套上了一个隐形的看不见的容器
div，一个通用的容器标签，不具备特殊功能，仅当容器来使用，可以包裹任何内容，也可以容器相互包裹。由于它属于块级元素，浏览器会在其前后显示换行。如果与 CSS 一同使用，

元素可用于对大的 内容块设置样式属性。
div

元素的另一个常见的用途是 文档布局。代替table的老式布局。

 <div style = "text-algin:center; margin:auto; backgroud-color:gray; font-size:24px">

style的属性	描述
text-algin:center	让内部元素水平居中，
margin:auto	让元素本身水平居中，要是指该元素的宽度，不然宽度撑满整个屏幕
backgroud-color:gray	设置背景颜色
font-size:24px	设置字体大小

注意：div容器的特点：一个空的div容器其宽度是100%，其高度是0。当向空的容器内添加内容时，内容才会将div容器撑开。

所有标签的4个重要属性id、class、name、value

属性	作用
id	id必须是唯一的，以便浏览器在分析和处理网页时可以找到id的位置 1、元素的风格(style sheet)选择。 2、脚本语言使用id属性作为标记来查找id所在的单位。 3、用作声明对象的单元的标识
class	对 HTML标签进行分类（class属性），使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式，或者为不同的类设置不同的样式。
name
value

name 和value属性的对比介绍

按钮中用的value 指的是按钮上要显示的文本 比如“确定”“删除”等
复选框用的value 指的是这个复选框的值
单选框用的value 和复选框一样
下拉菜单用的value 是列表中每个子项的值
隐藏域用的value 是框里面显示的内容

在后台如果你想得到复选框的内容就是value 来取当你在接收表单数据的页面中获取数据时，得到的就是value的值

name是控件的名称（多个控件可以取同一个名称），value是控件的值；
并不是所有控件的value都会显示出来，比如 checkbox, radio, hidden；
定义控件的 name和value 就可以在服务器上获取这个控件和它的值；
没看到 submit 的name，并不表示浏览器忽略了它的 name，在提交之前它也被浏览器定义了 name，在服务器上一样可以得到它的 name 和 value；
控件不定义name/value也可以显示，只是为了方便在服务器接收和区别，才定义它的 name/value，当然按钮的 value 不光是存放它的值，也用来显示

网页布局

1.使用
标签进行布局。
元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。
2.使用H5的语义化标签进行布局。HTML5 提供的新语义元素定义了网页的不同部分。还要借助CSS定位

布局标签	作用
header	定义文档或节的页眉
nav	定义导航链接的容器
section	定义文档中的节
article	定义独立的自包含文章
aside	定义内容之外的内容（比如侧栏）
footer	定义文档或节的页脚
details	定义额外的细节
summary	定义 details 元素的标题

3.使用表格的 HTML 布局。元素不是作为布局工具而设计的。
元素的作用是显示表格化的数据。使用
元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式

框架：通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

框架结构标签：
- 该标签定义窗口如何分割。
- 每个frameset都定义了一系列的行和列
- rows和columns（cols）的值规定值每行或者每列占据屏幕的面积。
框架标签
- frameset设置的每一个行或者列就是一个frame
- Frame 标签定义了放置在每个框架集中的 HTML 文档。
内联框架：定义内联的子窗口（框架）

属性	值	描述
align	leftrighttopmiddlebottom	不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。
frameborder	10	规定是否显示框架周围的边框。
height	pixels%	规定 iframe 的高度。
longdesc	URL	规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight	pixels	定义 iframe 的顶部和底部的边距。
marginwidth	pixels	定义 iframe 的左侧和右侧的边距。
name	frame_name	规定 iframe 的名称。
sandbox	""allow-formsallow-same-originallow-scriptsallow-top-navigation	启用一系列对中内容的额外限制。
scrolling	yesnoauto	规定是否在 iframe 中显示滚动条。
seamless	seamless	规定看上去像是包含文档的一部分。
src	URL	规定在 iframe 中显示的文档的 URL。
srcdoc	HTML_code	规定在中显示的页面的 HTML 内容。
width	pixels%	定义 iframe 的宽度。

#内联框架的语法
<iframe src="URL"></iframe>


#iframe - 设置高度和宽度 height 和 width 属性用于规定 iframe 的高度和宽度。  属性值的默认单位是像素，但也可以用百分比来设定#（比如 "80%"）。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>


#Iframe - 删除边框。frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 "0" 就可以移除边框：
<iframe src="demo_iframe.htm" frameborder="0"></iframe>

<html>
    <body>
        <iframe src="url（html文件）"></iframe>
    </body>
</html>

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

注意：

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在标签中加入：noresize=“noresize”
为不支持框架的浏览器添加标签。

<frameset cols="50%,*,25%">
  <frame src="/example/html/frame_a.html" noresize="noresize" />
  <frame src="/example/html/frame_b.html" />
  <frame src="/example/html/frame_c.html" />
</frameset>


<html>
    <frameset cols="25%,50%,25%">
         <frame src="/example/html/frame_a.html">
         <frame src="/example/html/frame_b.html">
         <frame src="/example/html/frame_c.html">

        <noframes>
        <body>您的浏览器无法处理框架！</body>
        </noframes>
    </frameset>
</html>

重要提示：不能将标签与标签同时使用！不过，假如你添加包含一段文本的标签，就必须将这段文字嵌套于标签内。（在下面的第一个实例中，可以查看它是如何实现的。）

网页的背景：拥有两个配置背景的标签。背景可以是颜色或者图像。

背景颜色（Bgcolor）：背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
```
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
```
背景（Background）：背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制
```
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
```
注意： 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。
注意：应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性

脚本的引入：script


同时也可以是使用标签内的 **src属性**引入**外部脚本文件**。此时的**type属性**就必学是MIME 类型（https://www.w3school.com.cn/media/media_mimeref.asp）。

```html
<script type="text/javascript" src="myscripts.js">
</script>

js的用途：常用于图片操作、表单验证、内容动态更新。

script属性总结

属性	值	描述
type	MIME-type	指示脚本的 MIME 类型。注意必填属性
src	URL	规定外部脚本文件的 URL。

async	async	规定异步执行脚本（仅适用于外部脚本）。
charset	charset	规定在外部脚本文件中使用的字符编码。
defer	defer	规定是否对脚本执行进行延迟，直到页面加载为止。
language	script	不赞成使用。规定脚本语言。请使用 type 属性代替它。
xml:space	preserve	规定是否保留代码中的空白。

noscript标签：

noscript 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：

<noscript>
    Your browser does not support JavaScript!
</noscript>

HTMl中的字符实体

HTML 中的 预留字符 必须被替换为 字符实体 。
原因：在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

字符实体类似这样：
```
&entity_name;

或者

&#entity_number;


显示小于号

&lt; 
&#60;

空格（不间断空格non-breaking space）
&nbsp
```

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

URL

scheme://host.domain:port/path/filename

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

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

URL的编码

URL 只能使用 ASCII 字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。

HTML5的语义化：语义元素

语义元素：语义元素清楚地向浏览器和开发者描述其意义。

非语义元素的例子：

和 - 无法提供关于其内容的信息。

语义元素的例子：、

以及 - 清晰地定义其内容。

HTML的语义元素：

相当：于许多网站包含了指示导航、页眉以及页脚的 HTML 代码，例如这些：

HTML5 è¯ä¹‰åƒç´

HTML5中的语义元素

标签	描述
article>	定义文章。
aside>	定义页面内容以外的内容。
details>	定义用户能够查看或隐藏的额外细节。
figcaption>	定义元素的标题。
figure>	规定自包含内容，比如图示、图表、照片、代码清单等。
footer>	定义文档或节的页脚。
header>	规定文档或节的页眉。
main>	规定文档的主内容。
mark>	定义重要的或强调的文本。
nav>	定义导航链接。
section>	定义文档中的节。
summary>	定义元素的可见标题。
time>	定义日期/时间。

语义化：语义元素

语义元素：语义元素清楚地向浏览器和开发者描述其意义。

非语义元素的例子：

和 - 无法提供关于其内容的信息。

语义元素的例子：、

以及 - 清晰地定义其内容。

HTML的语义元素：

相当：于许多网站包含了指示导航、页眉以及页脚的 HTML 代码，例如这些：

[外链图片转存中…(img-GbO2KBuI-1600824882557)]

HTML5中的语义元素

标签	描述
article	定义文章。
aside	定义页面内容以外的内容。
details	定义用户能够查看或隐藏的额外细节。
figcaption	定义元素的标题。
figure	规定自包含内容，比如图示、图表、照片、代码清单等。
footer	定义文档或节的页脚。
header	规定文档或节的页眉。
main	规定文档的主内容。
mark>	定义重要的或强调的文本。
nav>	定义导航链接。
section	定义文档中的节。
summary	定义元素的可见标题。
time	定义日期/时间。

wmd墨染倾城

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML语法体系

HTML基本信息HTML是什么HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词，比如 HTML 标签通常是成对出现的，比如和标签对中的第一个
复制链接

扫一扫