面试题必备-web页面基础

原创
2019/11/19 07:48
阅读数 132

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!

这是一个有质量,有态度的博客

7d927f18ebd05ea1d505a572393fbc87.jpg

展开阅读全文
RED
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部