HTML与CSS
- *html5: 废弃的标签
- 新添加的标签
1:新添加的标签
- strong, 定义重要性强调的文字， 替换 标签
- ins (inseted) : 定义插入的文字， 替换 标签
- em(emphasized) : 定义强调的文字 替换 标签
- del (deleted) : 定义被删除的文字 替换
标签 header footer section aside article address
2:html5 =>废弃的标签
早期的HTML中的标签只有一个作用， 就是用来添加语义
有一部分标签没有语义， 用来修改样式， 因此被淘汰， 修改样式应用CSS来替换
<br> 换行
<hr> 添加实线
<b>bold 字体加粗
<u>underlined 添加下划线
<i> italic 字体倾斜
<s> strikethrough 给文本添加删除线
font 字体
/* 不到万不得已， 不应该使用这些废弃的标签 */
可以一定要使用， 一般情况下用来做CSS的钩子 ( 如i 标签， 用来作为小图标)
标签
/* 块级元素， 独占一行， 设置宽高有效 */
div : 盒模型
header: 头部
footer: 尾部
article: 文章
aside: 侧边栏, 与文本主体无关的内容
section:
/文本/
p: 段落
h1-h6: 标题 (当一个段落同时出现多个标签时， 使用 hgroup 做父级)
为辅助SEO， H1只可使用一次，且用于整个网页的标题
/列表/
ol : 有序列表 配合li
ul : 无序列表 配合li
dl : 定义列表 配合 dt dd dt: definition title 定义标题 dd: definition descript , 定义描述
dl: 定义列表的作用 -给一堆数据添加列表语义
-应用场景：
- 做网站尾部的相关信息 -做图文混排
-注意点:
dl 和 dt/dd 是一个完整体， 一般不会单独出现
推荐 一个dt 带一个dd, 但dt下可以没有也可以有多个dd
footer,
header,
article,
address: 地址， 只允许使用在与该页面相关的地址
/* 表格 */
table ： 表格
caption : 表格标题
thead 表头
tbody 主体
tfoot 表尾
th: 一般使用在一个行或第一列代表该 行/列 ， 默认样式 为粗体
form : 表单
noframes : 不支持框架
noscript: 当浏览器不支持脚本时 会显示该标签中的文本
pre : 保留文本格式, 如 一段JS脚本代码在页面呈现的格式不自行改变
hr : 分隔线
/* 行内元素， 不会独占一行， 设置宽高无效， 需要display:block; 即可 */
a, 锚点
abbr, 缩略语
acronym,
b,
bdi （表示一段处于文字方向与其他内容隔离开的文字） ：
2 . “阿拉伯文”, 3: apple , (输出时阿拉伯文不会因语种不同而改变所在的位置，不使用bdi 则会出现打乱的现象)
bdo, （撇开默认的文字方向， 属性 dir= ltr / rtl）
big, （大写）
br, （换行）
cite, （引用其他文章标题）
code, （计算机编码）
dfn, （定义）
span, （ 表示一段一般性的内容）
i, （表示英文等其他语言）
em, （强调）
q, （引用自其他段落内容）
label,
small, (小字号）
select,
<base> 标签的使用
base 标签 ： 用于统一超链接打开方式， 适合全局属性 (基准地址)
实例
规定页面上所有链接的默认 URL 和默认目标：
<head>
<base href="//statics.w3cschool.cn/images/w3c/" target="_blank"></head>
<body>
<img src="logo.png" width="24" height="39" alt="w3cschool">
<a href="logo.png">w3cschool logo</a>
</body>
marquee标签 使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utp-8">
<meta name="descroption" content="meter">
<title>meter 气温气压 progress 加载标签</title>
<style>
.header{ width: 500px; height: 500px; margin: 100px auto; background-color: grey; text-align: center; line-height: 3;}
</style>
</head>
<body>
<div class="header">
<meter value="30" max="100"></meter>
<meter value="120" max="220" min="20" low="50" high="180"></meter>
<meter value="40" max="220" min="20" low="50" high="180"></meter>
<meter value="190" max="220" min="20" low="50" high="180"></meter>
<progress value="0.7"></progress>
<progress max="120"></progress>
</div>
</body>
</html>
input -daatime
data Picks Input类型
date 选取年、月、日
month选取月、年
week选取周、年
time选取时间（小时和分钟）
datetime utc时间 选取时间、年、月、日、
datetime-local选取时间（本地时间） 有兼容性问题
<1>datetime和<2>datetime-local的区别：
1.兼容性--datetime只有？和欧朋浏览器支持。datetime-local只有？和欧朋，谷歌浏览器支持。
2.一个本地时间，一个UTC时间
<input type="date" name="date">
<input type="datetime" name="datetime"> <input type="time" name="time">
<input type="month" name="month">
手机端引入以上四种效果，只有IPONE手机有
HTML 标签元素分为两类 ：
文本标签与容器；
(p,q,blockquote,i,em,strong,pre,var…)
(div,header,footer,aside,address…)
CSS 元素分为两类：
行内元素 与 块状元素
块状元素： 独占一行，有宽高
行内元素：不会独占一行， 且无宽高, 默认宽度与文本内容相等
块状元素 = 容器级标签 (有宽高)
div， ul， ol, li, dl, dt, dd , h
行内元素 = 文本标签
b, span, i, em, del, ins, strong (无宽高)
行内块元素：
不独占一行，但拥有宽高
页面布局 :
制作一个页面， 先对页面进行布局， 多少个容器， 容器的宽度是否相等， 相等的容器使用同样的类名， 而CSS的装饰只需要定义一次即可， 尽可能的减少代码沉淀。
自适应页面的布局， 在容器的高度尽可能不要给具体的大小， 容器的大小使用容器内的元素撑开， 使得页面大小都不会改变容器的布局;
CSS：
先定义 : 改变元素的位置， 宽高， 内边距， 外边距， 边框
在定义元素的 文本样式， 动画样式以及 层级
HTML 结构 由以下几部分组成:
<!DOCTORY HTML> DTD文档 字符集编码 元数据head: 头部
-用于给网站添加一些配置信息
-例如：
-指定网站的标题/ 指定网站的小图片（icon）
-添加网站的SEO相关的信息(指定网站的关键字)
-外部链接 CSS/JS文件
-添加一些浏览器适配的相关内容
字符集：
-字符的集合
-字符格式不同
DTD文档 : 文档类型 document text defind
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
