一、网页结构
文档声明:告诉浏览器我们写的代码是按照html文档类型来写的。
<!DOCTYPE html>
根标签:一个页面就一个根标签,所有的内容都要写在根标签里面。
<html>
头部标签:帮助浏览器编译代码,里面的内容,用户一般看不到。
<head></head>
身体标签:body标签:是书写网页主体内容,用户看到的所有内容文字,图片,音视频等等都写在body
<body></body>
</html>
扩展:jw+数字是随机汉语
lorem+数字是随机英文
lang="en"设置编写代码语言
title标签:网站的标题,可以帮助推广部门进行网站推广,非常重要,一般具体内容都是推广部门来定的。
seo 搜索优化
sem 竞价推广
meta标签:是根据其配置的属性和属性值来确定功能
utf-8字符集的类型-万国码
<meta charset="utf-8"/>
二、实体
1.什么是实体:
额外的字符
2.实体的语法:
&实体的名字;(英文的)
3.常用的实体:
空格 大于号 >小于号 <版权符号 ©
三、常用的标签
1.标题标签:h1-h6
默认样式:字体加粗,从h1-h6,字体是逐步放小,行与行之间的间距比较大,独占一行
语义:表示一个标题,可以帮助推广部门做推广, 其中h1的语义最重般情况下一个页面就一个h1
2.段落标签:p
默认样式:行与行之间有间隔,独占一行
语义:表示一个段落
注意:p中间一般只放文本或者图片
3.强调标签
strong 文字加粗强调 em文本倾斜强调
面试题:strong em都是强调标签,两者的区别是什么
1、默认样式上有区别:一个是加粗,一个是倾斜。
2、语义有区别: storng强调文本内容,em强调语音语调
实际开发过程中,我们一般不做区分。
4.center
语义:使内容居中 默认样式:会独占一行
5.br 强制换行
6.hr 分割线
7.del 删除线
8.div 独占一行
9.span 不独占一行
三、标签的分类
面试题:什么是块元素、行内元素,都有哪些
标签的分类:
1.形式上 :
双标签和单标签
2、特点上:
2.1块标签(元素)主要用来布局
2.1.1会独占一行
2.1.2默认情况,块标签宽度是父元素的100%,高度是被内容撑开的
2.1.3可以设置宽高
例如:div、h1-h6、p、center····
2.2行内标签(元素) 主要用来包裹文字
2.2.1不会独占一行
2.2.2默认情况,行内标签宽高是被内容撑开的
2.2.3不可以设置宽高,宽高只会被内容撑开
例如:span、strong、em、del···
2.3 行内块标签(行内块元素)
2.3.1兼具块标签和行内标签的特点,即是不会独占一行,可以设置宽高
2.3.2标签和标签之间有大概3像素的空白间隙
例如:img
四、结构标签
面试题:html5新增的结构标签,就用来布局,都是块元素
header 表示网页的头部区域
main 表示网页的主体区域
footer 表示网页的底部区域
nav 表示网页的导航区域
aside 表示网页的侧边栏
article 表示网页文章区域
section 表示一个区块,没有特殊的语义 类似div