面试题必备-web页面基础
html标签是由<>包围的关键词
html标签是成对出现的
有部分标签是没有结束标签的，叫单标签，
页面中所有的内容，都是要放在HTML标签中的
HTML标签分三部分：
标签名称
标签内容
标签属性
HTML标签具有语义化
语义化就是仅通过标签名就能判断出该标签的内容
语义化的作用：
网页结构层次更清晰
更加容易被搜索出来
更加让屏幕阅读器读出该页面的内容
标签的内容就是在一对标签内部的内容
标签的内容可以是其他标签
标签元素全局标准属性
class属性：用于定义元素的类名
id属性：用于指定元素的唯一id
style属性：用于指定元素的行内样式
title属性：用于指定元素的额外信息
accesskey属性：
用于指定激活元素的快捷键
tabindex属性：用于指定元素在tab键下的次序
dir属性：用于指定元素中内容的文本方向
属性值为ltr 或 rtl，left to right 和 right to left
leng属性：
用于指定元素内容的语言。
全局事件属性
onload:在页面加载结束之后触发
onunload：在用户从页面离开时发生，如点击跳转，页面重载，关闭浏览器窗口等。
form表单事件
onblur:当元素失去焦点时触发
onchange:在元素的元素值被改变时触发
onfocus:当元素获得焦点时触发
onreset:当表单中的重置按钮被点击时
onselect:在元素中文本被选中后触发
onsubmit:在提交表单时触发
keyboard键盘事件
onkeydown:在用户按下按键时触发
onkeypress:在用户按下按键后，按着按键时触发，该属性不会对所有按键生效
不生效的有：alt, ctrl, shift, esc
onkeyup:当用户释放按键时触发
Mouse鼠标事件
onclick:当在元素上发生鼠标点击时触发
onblclick: 当元素上发生鼠标双击时触发
onmousedown:当元素上按下鼠标按钮时触发
onmousemove:当鼠标指针移动到元素上触发
onmouseout:当元素指针移出元素时触发
onmouseover:当鼠标指针移动到元素上时触发
onmouseup: 当在元素上释放鼠标时触发
media:媒体事件
onabort:当退出时触发
onwaiting:当媒体已停止播放但打算继续播放时触发
HTML的标签
文本标签
段落标签<p></p>
段落标签用来描述一段文字
标题标签<hx></hx>
标题标签用来描述一个标题
标签标签总有六级。
<h1></h1>标签在每个页面通常只出现一次
强调语句标签
<em></em>
用于强调某些文字的重要性
更加强调标签<strong></strong>
和<em>标签一样，用于强调文本，但它的强调更强一些
无语义标签<span></span>
该标签没有语义
短文本引用标签<q></q>
简短文字的引用
长文本引用标签
<blockquote></blockquote>
定义长的文本引用
换行标签<br/>
<br/>标签作用相当于word文档中的回车，起到文字换行的作用。
多媒体标签
链接标签<a></a>
图片标签<img/>
视频标签<video></video>
<video src="da.mp4" controls="controls">
音频标签<audio></audio>
<audio src="a.mp3"></audio>
列表
无序列表标签
<ul><li></li></ul>
<li></li>代表无序列表中的每一个元素
有序列表
<ol><li></li></ol>
定义列表<dl></dl>
<dt></dt>定义列表中的项目
<dd></dd>描述列表中的项目
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
表格：
表格标签<table>
表格的行<tr>
表头<th>
单元格<td>
表格合并
同一行内，合并几列colspan="2"
同一列内，合并几行rowspan="2"
表单标签<form>
<form></form>表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
<form method="传送方式" action="服务器文件">
action:浏览者输入的数据被传送到的地方，比如一个php页面
method:数据传送的方式
输入标签<input>
input
name为文本框命名，用于提交表单，后台接收数据用
value为文本输入框设置默认值
type通过定义不同的type类型，input的功能有所不同
type功能：
text，password，radio，checkbox，file，button，reset，submit，email，url，number，range，date，color
<button>按钮：
button标签的功能与input按钮功能相同，button是双标签，内部可以嵌套其他行内元素。
下拉选择框select
<select>
<option value="book"></option>
<option value="go" selected="selected"> go </option>
<option value="sport"></option>
</select>
文本域textarea
cols:多行输入域的列数
rows:多行输入域的行数
其他语义化标签
div盒子
俗称盒子,division分割
在网页制作过程中，可以把一些独立的逻辑部分划分出来，放在一个div标签中，这个div标签的作用就是相当于一个容器。
什么是逻辑部分，它是页面上相互关联的一组的元素，如网页中的独立的栏目版块，就是一个典型的逻辑部分。
网页头部header
html5新增语义化标签，定义网页的头部
主要用于布局，分割页面的结构
底部信息footer
html5新增语义化标签，定义网页的底部
主要用于布局，分割页面的结构
导航nav
html5新增语义化标签，定义一个导航
主要用于布局，分割页面的结构
文章article
html5新增语义化标签，定义一篇文章
主要用于布局，分割页面的结构
侧壁栏aside
语义化标签，定义主题内容外的信息
主要用于布局，分割页面的结构
时间标签time
语义化标签，定义一个时间
网页结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>定义文档类型，告知浏览器用哪一种标准解释HTML。
<html></html>可告知浏览器其自身是一个Html文档。
head定义文档的头部
头部元素title,script,style,link,meta
title定义文档的标题
link标签将css样式文件链接到html文件内
meta定义文档的元数据
每个网页都是由不同的功能模块组成的，因此在将制作网页的时候，我们要将网页的每个功能模块分开
常见多由头部区，展示图片区域，主题区域，底部信息区域组成。
网页由上到下，由内到外
div,header,footer,nav,article,aside等标签多用于模块划分
css全称为层叠样式表，它主要用于定义HTML内容在浏览器内的显示样式，如文字的大小，颜色，字体加粗等。
css代码通常存放在style标签内
css样式由选择符和声明组成，而声明由属性和值组成
选择符{属性：值}
选择符，叫选择器
css放置
直接书写在标签的style属性中，不建议使用
内联样式表
外联样式表
css中的继承
不可继承样式：
display,margin,border,padding,background,height,min-height,max-height,width,min-width,max-width,overflow,position,left,right,top,bottom,z-index,float,clear
可以继承的样式
letter-spacing,word-spacing,white-space,line-height,color,font,font-family,font-size,font-style,font-variant,font-weight,text-decoration,text-transform,direction,visibility,cursor
选择器的种类
标签选择器
通配符选择器
属性选择器
后代选择器
一级子元素选择器
id选择器
class选择器
伪类选择器
选择某个父元素的直接子元素
后代选择器是选择父元素的所有子孙元素，一级子元素原则器只选择第一级子元素。
:hover鼠标移入某个元素
.box:hover{
color:red;
}
:before在某个元素的前面插入内容
div:before{
content: '内容';
background-color: yellow;
color: red;
font-weight: bold;
}
:after在某个元素的后面插入内容
div:after{
content: '内容';
background-color: yellow;
color: red;
font-weight: bold;
}
群组选择器
可以对多个不同的选择器设置相同的样式
选择器的优先级：
权重计算方式：
标签选择器：1,
class选择器：10,
id选择器：100,
行内样式：100,
!important最高级别，提高样式权重，拥有最高级别
就近原则
css样式属性
background-color
background-image
background-position
背景图片不会占位
背景图片重复background-repeat
background-repeat: no-repeat
no-repeat: 设置图像不重复，常用
round: 自动缩放直到适应并填充整个容器
space:以相同的间距平铺且填充满整个容器
背景图片定位
background-attachment
background-attachment:fixed
背景图像是否固定或者随着页面的其余部分滚动
background-attachment的值可以是scroll跟随滚动，fixed固定。
字体
font-family字体
font-size
font-weight: normal,bold,bolder,lighter,100-900(400=normal,700=bold)
color字体颜色
字体斜体font-style
normal文本正常显示
italic文本斜体显示
oblique文本倾斜显示
文本属性
行高line-height
文本水平对齐方式
text-align
left,center,right
文本所在行高的垂直对齐方式vertical-align
baseline默认
sub垂直对齐文本的下标
super垂直对齐文本的上标
top对象的顶端与所在容器的顶端对齐
text-top对象的顶端与所在行文字顶端对齐
middle元素对象基于基线垂直对齐
bottom对象的底端与所在行的文字底部对齐
text-bottom对象的底端与所在行文字的底端对齐
文本缩进text-indent
text-indent: 2em;
字母之间的间距letter-spacing
单词之间的间距word-spacing
文本的大小写：
text-transform
capitalize:文本中的每个单词以大写字母开头
uppercase:定义仅有大写字母
lowercase:定义仅有小写字母
文本的修饰text-decoration
none默认
underline下划线
overline上划线
line-through中线
自动换行word-wrap
word-wrap: break-word;
基本样式：
width
height
cursor鼠标样式：
定义鼠标的样式cursor:pointer
default:默认
pointer:小手形状
move:移动形状
透明度opacity
opacity:0.3
可见性：visibillity
visibility: hidden
visible 元素可见
hidden 元素不可见
collapse:当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。
溢出隐藏overflow
设置当对象的内容超过其指定高度以及宽度时如何显示内容
visible默认值，内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看
边框颜色：
outline
input文本框入框自带边框，我们可以通过outline修改边框
outline: 1px solid #ccc;
outline: none 清除边框
样式重置：
一开始没有css样式，为了界面美观，很多元素自带margin,padding等样式，但这些样式在不同浏览器的值都是不一样的，需要将css样式重置，保证在不同浏览器中显示一致。
清除元素的margin和padding
去掉自带的列表符
去掉自带的下划线
* { margin:0; paddding: 0;}
ul,ol {list-style: none;}
a{ text-decoration: none;}
img,input { border: none; }
关于目前文章内容即涉及前端，PHP知识点，如果有兴趣即可关注，很荣幸，能被您发现，真是慧眼识英！也感谢您的关注，在未来的日子里，希望能够一直默默的支持我，我也会努力写出更多优秀的作品。我们一起成长，从零基础学编程，将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯。
若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。
请点赞！因为你们的赞同/鼓励是我写作的最大动力！
欢迎关注达达的CSDN！
这是一个有质量，有态度的博客
