HTML进阶

回顾

常用的标签梳理

常用的标签有：
<div>块标签、<span>文本标签、<link>链接一个外部样式表、<h1>-<h6>标题、<a>超链接、<img>图片、<button>按钮、<input>输入框、<br>换行、<p>换段落、<ul>无序列表、<hr>水平分割线、<table>表格

元素的分类

已经学过的块元素有：h1~h6；hr；ul；li；p；table；div
内联元素：不会产生换行效果，会和其他元素并联排列；font；b；i；img……

html5表单新增属性

email：

提交表单的时间验证输入是否满足email的格式
示例代码：

<input type="email" name="email">

url

提交表单的时候验证输入值是否满足url的格式
示例代码：

<input type="url" name="url">

number

根据你的设置提供选择数字的功能，其中 min 为最小值，max 为最大值，value 为默认值，step 为点击箭头时数字的变化量。

<input type="number" name="number" min=2 max=100 step=5 value="52"/>

range

会以一个滑块的形式表现包含一定范围内数字值的输入域，max 为最大值，min 为最小值，value 为默认值，如果没有设置 max 和 min，默认值是 1-100。

<input type="range" name="range" min=20 max=200 value="60"/>

日期和时间类型

（1）date：选取日、月、年

<input type="date" name="date"/>

（2）month：选取月、年

<input type="month" name="month"/>

（3）week：选取周、年

<input type="month" name="month"/>

（4）time：选取小时、分钟

<input type="week" name="week"/>

search

用于搜索域，若加上 result="s"属性，则会在搜索框前面加一个搜索图标

<input type="search" name="search" result="s"/>

color

color 类型会提供颜色拾取器，供用户选择颜色，并将用户选择的颜色填充到此元素中

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

语义化

1. 什么是语义化
   · 每一个 HTML 元素都有具体含义。
   · 所有元素于展示效果无关。
   · 元素展示到页面中的效果，应该由 CSS 决定。
   · 因为浏览器带有默认的 CSS 样式，所以每个元素有一些默认样式。
   · 选择什么元素，取决于内容的含义，而不是显示出的效果．
2. 为什么 HTML5 这么强调语义化
   (1) 为了搜索引擎优化(SEO)
   搜索引擎：百度 搜搜 Bing Google．
   每隔一段时间，搜索引擎会在整个互联网中抓取页面源代码
   (2) 为了让浏览器理解网页
3. 对于 html 语义化，需要注意的地方
   · 我们应该果断舍弃那些仅仅为了定义样式而存在的 HTML 标签。如果仅仅是为了改 变样式，我们应该使用 CSS来实现，不要使用 HTML 标签。
   · 在不同的页面部分，我们优先使用正确的语义化标签。如果没有语义标签可用，才去考虑 div 和 span 等无语义标签。
4. 常见的语义化标签：label、换行符<br />、无序列表 ul、加粗标签 strong、倾斜 em、del 删除线标签、ins 下划线等。

新增的语义化标签

header----头部标签
nav----导航标签
article—内容标签
section—块级标签
aside----侧边栏标签
footer—尾部标签

扩展标签

内联框架

<iframe></iframe>

属性：

width 宽
height 高
scrolling 规定是否在框架中显示滚动条
src 规定在iframe中引入的URL

滚动标签

<marquee>滚动字幕</marquee>

属性：
direction：方向 (left、right)
behavior：滚动方式 (scroll、slide、alternate)
crollamount：速度，值是正数默认为 6
scrolldelay：时间，值是正数默认为 0。单位毫秒
οnmοuseοver=“stop()” ：鼠标悬浮停止移动
οnmοuseοut=“start()”：鼠标离开开始移动