html常用标签
1、文档类性的声明
<!DOCTYPE html>声明该文档是一个html5的文档
xhtml是html以前版本的声明
注意:一些老网站可能用的还是老版本的文档类型比如XHTML之类的,但是我们学的是
HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则),所以大家放心的使用HTML5
的文档类型就好了。
2、字符集
<metacharset="UTF-8"/>最常用
了解:
BG2312简单中文包括6763个汉字
BIG5繁体中文港澳台等用
GBK包含全部中文字符是GB2312的扩展,加入对繁体字的支持,兼容GB2312
UTF-8则包含全世界所有国家需要用到的字符
3、常用的标签
(1)、标题标签 :h1-h6 head
特点:1、文本自动加粗加大
2、文本的字体大小与h后边的的数字成反比
3、自动换行
(2)、段落标签 paragraph p paragraph
特点:自动换行
(3)、水平线标签 hr horizon
特点:显示一条横线 单标签
(4)、换行标签 br
特点:1、单标签
2、可以在文本内容中随处换行
(5)、盒子标签 div
特点:用div来进行网页布局
(6)、组合行内元素标签 span
特点:最典型的行内元素,2、不会换行 不设宽高,不独占一行,水平可以加内边距和外边距,可以和相邻的行内块元素,行内元素在同一行上,有默认宽高。
4、文本语义化标签
加粗 b strong
斜体:i em
下划线:u ins
删除线:s del
区别:strong/em/ ins/del跟具有语气话及强调
5、图片标签
图片标签 img
src属性:图片的路径
jpg/png/gif/psd 注意添加后缀名
再浏览器展示图片的大小就是默认大小
图片的宽
height:图片的高度
title:图片的标题 光标移动到图片上显示对应的属性值
alt:图片不显示时,显示alt的属性值
相对路径:相对于当前位置
1、图片在当前文件夹下 ./ 或者不写
2、图片在当前文件的下一级目录
3、图片在当前文件的上一级目录../
绝对路径:路径是文件的整个目录
6、链接标签
(1)、anchor单词的缩写 锚及是a标签
href:跳转的路径
跳转方式
跳转线上
跳转本地
#暂时不知道往哪儿跳转
打开方式
跳转链接后,默认在当前的窗口打开
在新的窗口打开 target="_blank"
在当前窗口打开 target="_self"
(2)、锚点链接
给指定的内容添加id属性,其次在标题中添加链接标签,href的属性值用#与id名对应即可实现锚点定位
(3)、Base
base标签的target属性设置整个网页中所有a链接的跳转方式
7、列表标签
(1)、分类:无序列表(ul li)、有序列表(ol li)、自定义列表 (dl dt dd)
(2)、无序:特点:1、独占一行
2、没有顺序
3、每一行前有个小点
(3)、有序: 特点:1、独占一行
有顺序
每一行前有顺序数字
扩展:
1、标签语义化的理解?
a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
c. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
d. 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
2、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
声明位于文档中的最前面,处于 标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是,以该浏览器支持的最高标准运行。
在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
3、 各种Doctype文档类型?
标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。
Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,
Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。