首页  思维导图  详情

结构html

2020-04-29 15:52:48   13  举报





AI智能生成

个人前端学习

作者其他创作

大纲/内容

html5

html5新标签。（三类多媒体标签往上）都是div标签的衍生物

都不要嵌套在自身里面的标签

级别最高，通常放在最外层

<header>标记定义一个页面或一个区域的头部

<section>一个区域

<footer>一个页面或一个区域的底部

<article>标记定义一篇文章

<aside>页面内容部分的侧边栏，和article配合使用

<nav>导航链接

<hgroup>文件中一个区块的相关信息

<figure>一组媒体内容以及他们的标题

<figcaption>figure元素的标题

<dialog>一个对话框（会话框）类似微信

三类多媒体标签。标签意义：

多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验。

video 标记定义一个视频

src：提取音频地址

autoplay：是否自播放（值为autoplay自动播放）

loop：是否自动重复播放（值为-1则重复）

controls：是否显示控制器（值为controls显示控制器）

width：设置宽度

height：设置高度

audio 标记定义音频内容。

src 提取音频地址

autoplay 是否自播放值为autoplay则自动播放

loop 是否自动重复播放值为-1则重复

controls 音频播放控制器值为controls

不存在宽高

source 标记定义媒体资源。

<canvas>标记定义图片，但本意是：画布。他有强大的API，通过API可以定义很多很炫的特效。

Web应用标签

<meter> 状态标签(实时状态显示：气压，气温)（双标签）

value 必需。规定度量的当前值。

min 规定范围的最小值。

max 规定范围的最大值。

optimum 最佳值

high 规定被视作高的值的范围。

low 规定被视作低的值的范围。

<progress>状态标签，表示示任务的进度（进程），常见有下载，安装（单标签）

max 最大值

value 当前值

<datalist>----->>为input标记定义一个下拉列表，配合option，支持输入搜索选择。定义选项列表，需要通过input元素中的list属性和datalist中的id属性进行绑定，用来定义input可能的值

<details>----->>标记定义一个元素的详细内容，配合summary，里面第一行写summary标签，summary的内容会作为它显示的标题

open="open"内容展开

其他标签

<ruby>标记定义注释或音标

<rt>标记定义对ruby的注释内容文本

<rp> 告诉那些不支持ruby元素的浏览器如何去显示，一般是用rp把左括号和右括号分别抱起来

！！！！！！！注：<rp>不要放在<rt>标签内

<mark>----->>标记定义有标记的文本（黄色选中状态）

<output>----->>标记定义一些输出类型，计算表单结果配合oninput事件

*oninput 事件可以实时监听文本框的输入变化

*input type属性为number表示数值型

*input type属性为range表示范围（最大到100）

input新增类型

email类型的input元素是一种专门用来输入email地址的文本框。提交时如果该文本框中内容不是email地址格式的文字则不允许提交，但是并不检查email地址是否存在。提交时该文本框可以为空，除非加上required属性。

email类型的文本框具有一个mutiple属性，它允许在该文本框中输入一串以逗号分隔的email地址。

url类型的input元素是一种专门用来输入url地址的文本框。提交时如果该文本框中内容不是url地址格式的文字，则不允许提交。

tel类型的input元素被设计为用来输入电话号码的专用文本框。

number类型的input元素是一种专门用来输入数字的文本框，并且在提交时进行检查，检查其中内容是否为数字，如果其中内容不为数字，则将文本框中的内容作为空白进行提交。框右边会有上下箭头点击能+和-

min

max

step

<input type="datetime" /> Pc端和手机端皆不兼容，IOS版本越高越不兼容）

<input type="datetime-local" />（手机端不兼容）

PC端新增

range (拖动杆)

<input type="range" name="range" min="1" max="10">【若不设置min和max，默认0-100】

search （类似于搜索框，应用于搜索引擎）

<input type="search" name="search">

color （全色彩选择，可用来在线文本编辑器）

<input type="color" name="color">

（ESL色调，饱和度，亮度）

删除了的标签

一，纯表现的元素 { 注： html(结构层）css(表现层）}

Basefont（最基本的字体）,big（放大后的字体）,center（居中对齐）,font（定义字体的）,s，strik，tt，u。

二，对可用性产生负面影响的元素（注：html5是向下兼容的）（后台经常用到，属于框架型元素）

frame,frameset,noframes;（取而代之的是iframe。）

三，产生混淆的元素

acronym,applet,isindex,dir;

重定义标签

<b>粗体，无意义

<i>斜体，无意义

<dd>同details与figure使用包含文本 dialog也可用

<dt>可以同details和figure一同使用，汇总细节，dialog也可用（标题)

<hr> 不仅表示水平线，还表示主题结束，显示效果相同

<menu> 重新定义用户界面的菜单，配合command或者menuitem使用

<small> 表示小字体，例如打印注释或者法律条款

<strong> 表示重要性而不是强调符号

新属性

input和form的

placeholder 属性：让提示文字，在用户输入时，自动清除、用户清除输入的文字时，自动显示。

required属性用于表单提交验证，required 属性规定必需在提交之前填写输入字段。大大滴减少js代码！

eg:<input type="text" required="required"/>

使用了该属性，则此输入框是必填（或必选）的。

PS：适用于input标签type属性值为：text/search/url/tel/email/password/date pickers/number/checkbox/radio/file

autocomplete自动完成：
用在form或者input

<form action="audio.html" autocomplete="on">

可以使刷新页面后，点输入框显示之前输入的历史并选择，若不想显示，input里也可以使用置为off

autofocus

规定页面在加载的时候，域自动地获得焦点，就是会自动点击这个域

multiple属性：规定输入域可选择多个值

PS：multiple 属性适用于以下类型的<input>标签：

<input type="file/email" multiple="multiple"/>

也可用于email属性上传多个邮箱，邮箱之间用，逗号隔开：通过“，”逗号的分隔，分为两个字段

file

可以用于file上传属性上传多个值

链接a的新增属性

sizes:

icon：图像，所以type是image,格式是gif,根绝不同分辨率引入不同的sizes,显示也不同。例如sizes:<link rel="icon" href="icon.gif" type="image/gif" sizes="16*16"/>

target:

base标签写在<head></head>标签内，自动加上这段，target="_blank",默认所有超链接都弹出一哥新窗口，不添加target属性时默认_slef

media:

a:media=" " （表示对设备进行优化，handheld和tv分别对手持和电视设备进行支持）

hreflang:

a:hreflang="zh" （设置语言，这里设置语言是中文，如接下来跳转的页面是中文，增加页面渲染性能）

zh-cn简体中文，zh-uk香港 , zh-tw台湾

rel:

a:rel="external" (设置超链接的引用，这里超链接为外部链接，即对超链接的语义化说明）

其他属性

script 新增属性

defer : 全部页面加载完后执行（只兼容IE），好处是速度快

<script defer src="URL" ></script>

async：脚本加载完后执行，双线程加载，加载脚本同时加载网页（主流都支持）

<script async src="URL"></script>

ol有序列表新增加的属性

start——起始值，就是改变标签数字从几开始

reversed——倒序排列，就是改变标签数字变成倒序

html新增属性

.html中

manifest="cache.manifest" (定义页面离线应用文件）

<html manifest="cache.manifest">

----------------解决断网问题

index.manifest 给出一个列表，包含css,html,js，

我们在联网的时候，index.manifest就会自动我们所需要的三个文件放在本地，离线时依旧可以正常显示网页

style新增属性。没事别用，违背了结构和表现分离

style :内嵌css.在文档的任意部分都可以写css,<style scoped></style>

一般提倡html与css分开两个文件写，不赞成这么写，与结构表现分离是背道而驰的

看大图

新布局

新布局的意义

1.语义化

H5可以让很多更语义化的结构化代码标签代替大量的无意义的div标签。

(1)这种语义化的特性提升了网页的质量和语义

(2)减少了以前用于CSS调用的class和id属性

2.对搜索引擎的友好：

新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好

结构层html

li标签是最不利于搜索引擎搜索的尽可能少用。

导航条直接用nav标签来设置（h5新增）

<samp> 标签表示一段用户应该对其没有什么其他解释的文本字符。以浅色显示

表现层css

header

footer 加一个大于号> 子选择器。css3新增的

banner横幅

1.overflow：hidden指的是溢出的部分隐藏（它也可以清除浮动）

2.父级ul设置为position: relative;，子级设置position: absolute;，是为了方便定位（居中妙计）:

3.设置了position: absolute;之后，可以用lrtb来控制位移，包括负值（-）

main主体

text-decoration:underline下划线

first-of-type:选择其父元素中的第一个元素

last-of-type: 选择其父元素中的最后个元素(这里是第二个也是最后一个)

footer

兼容问题的解决方法

把HTML5的新增标签变为块级元素即可

html基础。HTML是英文Hyper Text Mark-up Language(超文本标记语言)

<html>根标签

标签的通用属性

title提示信息

style样式操作

id制定唯一标识。同一个网页里不同标签id值不能相同，id里不能有空格，只能有一个值

class制定样式类名，同一个网页里class值可以相同

<head>头部标签

meta元标签

页面编码

跳转

页面缓存

关键字keyword，便于搜索引擎抓取

描述description

link

stylesheet

icon图标

script

<body>主题标签

行内标签，一行里面，不换行宽高无效

span行内容器标签，没有实际意义，为了应用样式

a超链接标签。<a href="绝对路径：链接；相对路径：#id" 。

target

_self在当前窗口下打开

_blank在新窗口下打开

子主题

title光标放在链接上提示的文字

name添加锚名。锚标签<a name="锚名"></a>只是用于定位设置锚名

<a href="网页名称#锚名:>..........</a> 第二个页面的网页名称。用于寻找不同网页的锚的位置

；<a href="#锚名"></a>用于设置寻找同网页内相对应的锚的位置链接。

发送邮件 <a href="mailto邮箱地址"></a>

下载文件 <a href="下载文件的地址"></a>

行内块元素，img图片标签，单标签。<img src="图片地址" alt="当图片显示不出来的时候显示的文字"/>。同级：./文件名称。向上：../文件名称。向下：文件夹名称1/文件夹名称2/.../文件名称。要display：block才不会有缝隙

label标签。1将文字和控件包在一起，2控件一个id属性，label的for属性关联这格id

select

行内块元素input

b加粗i斜体u下划线s删除线,

strong加粗，em倾斜，small变小

<pre></pre>预格式标签，输入的格式与文字是什么样的，显示的内容就是什么的

下标：<sub>。上标：<sup>

块级标签，独占一行，换行，默认的宽度是它所在父元素的宽度

div容器标签

fieldset

h1-h6标题标签

p段落标签

hr创建分割线，是单标签（单标签<hr/>）

br换行，是单标签

table表格标签。表格结构：thead表头，tbody表的身体，tfoot表尾。无论书写顺序如何，总是按照caption、thead、tbody、tfoot的顺序显示表格。使用这三个表格结构是为了分别加载，不用等整个table加载完才显示

tr行数，td列数，th表头，th和td一样也是列，但是内容会加粗和居中，快捷写法tr*n>td*n(创造n行n列的表格

align规定单元格内容水平如何摆放，left/center/right；valign规定单元格内容水平如何摆放。top/middle/bottom/baseline。

caption标题。放在table开头写表格之前

rowspan跨行，colspan跨列

表格属性

border边框属性，

width宽度属性，

height高度，

cellpadding单元格的内容到边框的距离，

cellspacing单元格和单元格之间空白

align 表格相对周围元素对齐的方式

frame：规定外部边框哪里是可见的

rules：规定内部边框哪里是可见的

列表标签

ol和li配合使用构成有序列表。type属性：1数字，a小写字母，A大写字母，i小写罗马字母，I大写罗马字母

ul和li配合使用构成无序列表,ul里只能加li。<ul>可有多个<li></li></ul>。type属性：指定前面点的样式，square方形，circle空心圆，disc实心圆

定义列表<dl>

<dt>定义列表项</dt>

<dd>列表项描述</dd>

<dd>列表项描述</dd>

</dl>。dd会自动缩进。dt和dd是同级标签

可变标签

button按钮

del

表单标签form

form的属性

action：URL 提交表单的目的地址或文件（后台文件php asp）

method:设置表单以何种方式发送到指定页面（get、post）

target：在什么地方打开action URL（_blank、_self、_parent、_top）

enctype:在表单发送之前如何对其进行编码

form可以提交的数据类型

input标签，单标签表单控件。属性type

text：单行文本输入域。

maxlength：用户输入最大值

size：显示的文本框长度

placeholder：提示文字。还没输入的时候作为文本框背景存在的文字

value：用户还没输入的时候文本框已经输入好的初始值

passwo密码输入框

value：用户还没输入的时候文本框已经输入好的初始值

maxlength：用户输入最大值

size：显示的文本框长度

placeholder：提示文字。还没输入的时候作为文本框背景存在的文字

color取色器

file文件上传控件，multiple指定可以多选

radio单选框

value的值作为最后提交上去的值

把要单选的多个选项的name设置成一样的就能单选

checked：使该单选框一直被选中

checkbox多选框

value的值作为最后提交上去的值

range拖动条

按钮，用value改变上面的字

submit提交按钮，默认文本为提交

reset重置按钮，默认文本为重置

button按钮，指定value

image用图片来填充提交按钮，本质是提交按钮，value没有用

hidden隐藏域

用户看不到，会在按提交按钮的时候把value里的内容传送给服务器

textarea留言，就是多行文本域。

属性列rows

属性列cols

placeholder提示信息，放在文本域里面呈现灰色作为背景

select下拉列表。

option下拉菜单和列表项目标签，option第一个为初始显示后面为选项。disabled属性，禁用

size属性指定下拉列表高度，就是显示选项可见数

multiple指定可以多选，加了之后就变成列表而不是下拉菜单了。

用option添加选项

option选项加上selected可以设为默认选项

optgroup下拉菜单和列表项目分组标签。用在select里

label属性可以设置分组名

iframe框架标签，用于在一个网页里打开另外一个网页。属性：src指定打开网页的地址，width宽度，height高度，frameborder0、1对应是否显示边框，scrolling是否显示滚动条

自定义属性

自定义标签

<!DOCTYPE html>规定html的版本，Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

DTD:可定义合法的XML（扩展标记语言）文档构建模块，它使用一系列合法的元素来定义文档的结构。

在html中DTD规定了标记语言的规则，这样浏览器才能正确地呈现内容。

html5不基于SGML，所以不需要引用DTD

HTML元素和文档类型：http://www.w3school.com.cn/tags/html_ref_dtd.asp

转义字符

&nbsp 空格

&lt 小于<

&gt >大于

&copy 版权符号

&amp &