php内联与外联技巧_前端的面试的细节分享面试题必备web页面根本最周全

文章目录 [+]

html标签是由<>包围的关键词 html标签是成对涌现的有部分标签是没有结束标签的，叫单标签，页面中所有的内容，都是要放在HTML标签中的

HTML标签分三部分：

php内联与外联技巧_前端的面试的细节分享面试题必备web页面根本最周全

标署名称

（图片来自网络侵删）

标签内容

标签属性

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>

音频标签<audio></audio>

列表无序列表标签

<li></li>代表无序列表中的每一个元素

有序列表

定义列表<dl></dl> <dt></dt>定义列表中的项目 <dd></dd>描述列表中的项目

表格：表格标签<table> 表格的行<tr> 表头<th> 单元格<td>

表格合并

同一行内，合并几列colspan="2"

同一列内，合并几行rowspan="2"

表单标签<form>

<form></form>表单是可以把浏览者输入的数据传送到做事器端，这样做事器端程序就可以处理表单传过来的数据。

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

文本域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> <div> </div></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固定。