Python项目-Day32-HTML5-语义化标签-智能表单-选择器

HTML5是什么?

HTML5是一个新的网络标准，目标是取代现有的HTML 4.01和XHTML 1.0 标准。它希望能够减少互联网富应用（RIA)对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。

HTML5的标识
```
<!DOCTYPE html>#该句为HTML5标识
<html lang="en">
<head><meta charset="UTF-8">
```

meta标签

meta标签的作用

\ 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

\ 标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。
HTML 与 XHTML 之间的差异

在 HTML 中，标签没有结束标签。

在 XHTML 中，标签必须被正确地关闭。
提示和注释：

注释：标签永远位于 head 元素内部。

注释：元数据总是以名称/值的形式被成对传递的。

必需的属性

属性	值	描述
content	some_text	定义与 http-equiv 或 name 属性相关的元信息

meta详细讲解

meta举例

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信,数码,汽车,手机,财经,科技,相册" />
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

HTML5语义化标签

作用:创建结构清晰的页面可以建立良好的语义化基础，也降低了使用css的难度,也能针对搜索引擎和更新频度的描述和关键词。
- header标签
  
  header标记一般放置在页面的顶部，或者页面中某个区块元素的顶部，包含整个页面或区块的标题、简介等信息。
  
  一篇文档中可以包含多个header标记
  
  可以为body、article、section、aside标记增加header标记
  
  header标记未必位于页面的顶部
- footer标签
  
  footer标记一般放置在页面的底部，或者页面中某个区块元素的底部。
- nav标签
  
  nav标记表示页面的导航，可以通过导航连接到网站的其它页面，或当前页面的其它部分。
- aside标签
  
  aside包含的内容不是页面的主要内容，具有独立性，是对页面内容的补充。
  
  应用:
  
  页面的侧边栏
  
  文章引语（内容摘要）
  
  广告
  
  友情链接
- article
  
  article标签表示的是一个独立完整的内容区域，比如一张报纸的某个独立版块。
  
  应用:
  
  一篇博客
  
  一个论坛帖子
  
  一片新闻报道
  
  一个用户论坛
- section标签
  
  section表示一个主题性的内容分组，通常包含一个头部（header），可能还会有一个尾部（footer）。
- figure标签
  
  figure表示页面中的插图，通常结合figcaption一起使用。
- time标签
  
  time表示一个日期、时间，或日期和时间值。
  可以被搜索引擎、屏幕阅读器等识别。
- main标签
  
  main标签定义一个页面的主要内容，在一个页面中只能使用一次。
- html语义化示例
```
<div class="container"><header><div class="logo"></div><nav></nav></header><div class="main"><aside></aside><section><article><header></header><div class="content"></div><h6></h6></article></section></div><footer></footer>
</div>
```
- H5中section和article标签之间的区别
详细的HTML5语义化标签
智能表单

H5新增input的form属性，用于指向特定form表单的id，实现input无需放在form标签之中，即可通过表单进行提交。
```
<FORM id=foo>…
</FORM><INPUT … form="foo">
```
input标签有:button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week

HTML：Input元素标签的详细介绍

input标签配合datalist标签，能实现自动补全的效果
```
<input type="search" list="search">
<datalist id="search"><option >黑老师的由来</option><option >男人缘何肾虚</option><option >佳佳婕婕不得不说的故事</option>
</datalist>
```

HTML5的选择器

属性选择器

/*<!--属性选择器-->*/
.container [id^='book00']{color: #0d78ff;
}
.container [id='book001']{color: red;
}
.container [id$='4']{color: black;
}
.container [id*='5']{color: #4C4C4C;
}/* =直接相等 ^以什么开头 $以什么结尾 *包含什么内容  */

Element[attr]

Element[attr = “value”]

Element[attr ^= “value”]：以value开头

Element[attr $= “value”]：以value结尾

Element[attr *= “value”]：只要包含value

Element[attr ~= “value”]：必须有value这个词，

Element[attr |= “value”]：属性值以value-开头，比如：zh-cn

<p data-text="one web-js">不走寻常路？美国迈入“特朗普时代”的5大猜想</p>
<p data-text="web-js one">不走寻常路？美国迈入“特朗普时代”的5大猜想</p><p data-text="two web-css">河北一假信用点卷走500户村民2000余万存款</p>
<p data-text="web-css two">河北一假信用点卷走500户村民2000余万存款</p><p data-text="three web-html">马来西亚警方捣毁一组织中国籍残疾人行乞团伙</p>
<p data-text="web-html three">马来西亚警方捣毁一组织中国籍残疾人行乞团伙</p><p data-text="four xxx">揭秘四川巡山骑警：听狼嚎追马贼 每次任务都是玩命</p>
<p data-text="five ccc xxx">成都地面沉降最快地方1.4厘米/年 专家剖析主因</p>
<p data-text="six ccc ttt">成都地面沉降最快地方1.4厘米/年 专家剖析主因</p>p{ line-height: 24px; font-size: 12px;}
p[data-text]{border-bottom: 1px solid #000;}
p[data-text = "one"]{background: pink;}
p[data-text ^= "t"]{background: green}
p[data-text $= "x"]{background: grey}
p[data-text *= "r"]{color: red}
p[data-text ~= "ccc"]{color: blue}
p[data-text |= "web"]{font-weight: bold; font-size: 20px;}

层级选择器
- 子选择器
```
.div-a>div
```
- 相邻兄弟选择器
```
.div-a+div
```
- 后代选择器
```
.div-a div
```
- 通用选择器
```
.div-a~div
```
子选择器与后代选择器的区别:

作用于元素的第一代后代，空格作用于元素的所有后代
伪选择器

befor选择器

“:before” 伪元素可以在元素的内容前面插入新内容。
```
.container:before{content: "";display: block;width: 200px;height: 200px;background-color: #1eff06;}
```
after选择器

“:after” 伪元素可以在元素的内容之后插入新内容。
```
.container:after{content: "";display: block;width: 200px;height: 300px;background-color: #4C4C4C;}
```
- 锚伪类
```
a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */
a: focus{color: #0000FF}  匹配当前获得焦点的元素
```
必须按照lvhc的顺序来写
- 结构性伪类选择器
  - first-chile伪类
```
.div01-css p:first-child
```
  - last-child伪类
    
    匹配最后一个字元素
  - only-child伪类
    
    子元素选择器，匹配父元素包含的唯一子元素
  - only-of-type
```
.div01-css h1:only-of-type
/*表示唯一的一个h1标签*/
```
  - : nth-child(n)
    
    匹配父元素中的第几个孩子
  - :nth-last-child(n)
    
    匹配父元素中倒数第几个孩子
  - : nth-of-type(n)
```
    .div01-css h1:nth-of-type(1)
```
    匹配顺数的第一个h1标签
  - : nth-last-of-type(n)
```
    .div01-css h1:nth-last-of-type(1)
```
    匹配顺数的第一个h1标签
- UI伪类选择器
  
  : enabled 匹配处于启用状态的元素
  
  : disabled 匹配处于禁用状态的元素
  
  : checked 匹配处于选中状态的元素
  
  : default 匹配默认状态的元素

伪类选择器详细讲解

Python项目-Day32-HTML5-语义化标签-智能表单-选择器相关推荐

html5语义化标签加粗,html5标签 H5标签
html> h5文本元素 1.文本元素 2.加粗文字 b 3.倾斜文字 i 4.删除文字 del 5.加粗文字2 strong 6.安全换行 wbr~~~ 7.强调倾斜元素 em 8.删除线2 ...
html5语义化规范,html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排一.使用案例 1. 头部--header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
HTML5语义化标签综合基础案例,HTML5语义化标签综合案例
HTML 标签声明必须是 HTML 文档的第一行,位于标签之前. 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 请始终向 HTML 文档添加 ...
html5语义化布局分割代码,HTML5语义化标签布局的兼容性.html
html5语义化标签布局兼容性调整 header, section, footer, aside, nav, main, article, figure { display: block; } bod ...
好程序员web前端分享常见html5语义化标签
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享常见html5语义化标签,我们知道,创建结构清晰的页面可以建立良好的语义化基础,也降低了使用css的难度,下面总 ...
什么是HTML语义化标签？为什么要用H5语义化标签？HTML5语义化标签有哪些
对于大部分初学者来说,可能无法理解,明明在学习的时候,用div标签就能构成页面,为什么要用h5语义化标签?可能有一些前端工作者对HTML标签语义化的概念也不是很清楚,那么究竟什么是HTML语义化标 ...
html5语义化标签及优点
html5语义化标签及优点 html5中的语义化标签 < h1~h6 >:标题,< h1 > 与 < title > 协调有利于搜索引擎优化. < heade ...
html标签语义化的好处,(2019)[前端]面试题[9]：HTML5语义化标签和新特性
问题知道语义化吗?说说你理解的语义化,如果是你,平时会怎么做来保证语义化? 说说你了解的HTML5语义化标签,HTML5新增了那些新特性? Hello,欢迎来到我的博客,每天一道面试题,我们共同进步 ...
html语义化有利于seo,HTML5语义化标签对SEO的影响
问:html5语义化标签对SEO有什么影响? 答:html5语义化标签不会对SEO造成重大的影响,它并不会影响你的网站排名以及抓取:语义化标签主要是为了让搜索引擎更加的懂你,更加的明白你的网站:不用h ...

Python项目-Day32-HTML5-语义化标签-智能表单-选择器

Python项目-Day32-HTML5-语义化标签-智能表单-选择器

Python项目-Day32-HTML5-语义化标签-智能表单-选择器相关推荐

最新文章

热门文章