回归基础从新认识——HTML+CSS

时间:2023-01-27 16:50:50

前言

这段时间工作没那么繁杂,索性就想说来套系统的学习,之前去面试的时候,有被问及些基础的知识,居然回答不上来,也不能说是回答不上吧,回答的不全面。前端群上问了那个机构比较好,选择了慕课网。看了一段时间还是觉得不错的。

HTML

语义化标签

1. 更容易被搜索引擎收录。

2. 更容易让屏幕阅读器读出网页内容。

文章常用

<p>,添加段落

<hx>,h1、h2、h3、h4、h5、h6,添加标题

<strong>和<em>,但两者在强调的语气上有区别:<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。

<q>,短文本引用,网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么<q>标签是你所需要的。注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号

<blockquote>,对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。<q>标签是对简短文本的引用

<cite> ,标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。

设置单独样式

<span>标签是没有语义的,它的作用就是为了设置单独的样式用的

分行显示文本

<br />,xhtml1.0写法

<br>,html4.01写法

现在一般使用 xhtml1.0 的版本的写法(其它标签也是),这种版本比较规范

空格

输入空格,必须写入&nbsp;

水平横线

<hr>标签

地址信息

<address>,为网页加入地址信息,在浏览器上显示的样式为斜体。

编程代码

<code>,加入一行代码

<pre>,为你的网页加入大段代码

<var>,标签表示变量的名称,或者由用户提供的值,通常显示为斜体

列表

<ul>,无序列表,添加新闻信息列表

<ol>,有序列表,添加图书销售排行榜

<dl>,是定义列表,会默认前后层级关系

逻辑划分

<div>,设置div当作一个容器,把一些独立的逻辑部分划分出来

表格

<table>,整个表格以<table>标记开始、</table>标记结束

<tbody>,当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。

<tr>,表格的一行,所以有几对tr 表格就有几行

<td>,表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列

<th>,表格的头部的一个单元格,表格表头

表格中列的个数,取决于一行中数据单元格的个数

<caption>,为表格添加标题和摘要

<table summary="表格简介文本">,摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

链接

<a>,链接到另一个页面,title有利于seo。图像可以是GIF,PNG,JPEG格式的图像文件

图片

<img>,为网页插入图片

属性:

src:标识图像的位置;

alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

表单

<form>,为用户输入创建 HTML 表单

<input>,搜集用户信息,类型buttom(可点击按钮),checkbox(复选框),file(文件上传),hidden(隐藏的输入字段),image(图像形式的提交按钮),password(密码字段),radio(单选按钮),reset(重置),submit(提交),text(单行输入框)

<textarea>,文本域,可多行

同一组的单选按钮,name 取值一定要一致,才可以起到单选的作用。

<select>,下拉列表框,设置multiple="multiple"属性,就可以实现多选功能。

<label>,为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

HTML总结

之前面试有被问及:HTML标签可以怎么样分类?这里我简单的按照我的想法分下。

按照标签形态(常用):

块状元素:<div>,<p><h1>...<h6>,<ol>,<ul>,<dl>,<table>,<address>,<blockquote>,<form>。。。

内联元素:<a>,<span>,<br/>,<i>,<em>,<strong>,<lable>,<q>,<var>,<cite>,<code>。。。

内联块元素:<img>,<input>。。。

tip:为什么table是块元素,原理table的宽度并不是占一行,而是自适应子元素宽度的(但是当然下一个元素会换行,块状元素的特性),相当于一个宽度永远大于子元素的定宽块状元素,因此可以margin:0 auto;设置自己水平居中,子元素随之居中。可以删掉table中的子元素,并加上border试试,宽度随之变化。

按照使用场景(常用):

文章:<h1>...<h6>,<p>,<strong>,<em>,<q>,<blockquote>,<cite>,<img>。。。

表格:<table>,<tbody>,<tr>,<td>,<th>,<caption>。。。

列表:<ol>,<ul>,<li>,<dl>,<dt>,<dd>。。。

表单:<form>,<input>,<textarea>,<select>,<label>。。

编程代码:<core>,<pre>,<var>。。

标准分类(较详细):

文档标签:<html>,<head>,<body>,<title>,<meta>,<base>,<style>,<link>,<script>,<noscript>

框架标签:<frame>,<frameset>,<iframe>,<noframes>

布局标签:<div>

表格标签:<table>,<thead>,<tbody>,<tfoot>,<tr>,<td>,<th>,<col>,<colgroup>,<caption>

表单标签:<from>,<input>,<textarea>,<button>,<select>,<optgroup>,<option>,<label>,<fieldest>,<legend>

列表标签:<ul>,<ol>,<li>,<dl>,<dt>,<dd>

链接标签:<a>

多媒体标签:<img>,<map>,<area>,<object>,<param>

文章标签:<h1>...<h6>,<p>,<br/>,<span>,<bdo>,<pre>,<acronym>,<abbr>,<blockquote>,<q>,<ins>,<del>,<ins>,<address>

字体样式标签:<tt>,<i>,<b>,<big>,<small>,<em>,<strong>,<dfn>,<code>,<samp>,<kbd>,<var>,<cite>,<sup>,<sub>

特殊标签:<!DOCTYPE>,<!-- -->,<hr>

CSS

css 样式由选择符和声明组成,而声明又由属性和值组成

选择符:又称选择器,指明网页中要应用样式规则的元素

声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔

注释语句

/*注释语句*/——Html中使用<!--注释语句-->

CSS 样式代码插入的形式:内联式、嵌入式和外部式

内联式:style=""

嵌入式:写在<style> 标签对中

外部式:也称为外联式,就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内

注意:

1、css样式文件名称以有意义的英文字母命名,如 main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可修改。

3、<link>标签位置一般写在<head>标签之内。

4、层级大小:内联式 > 嵌入式 > 外部式,但是 嵌入式>外部式 有一个前提:嵌入式css样式的位置一定在外部式的后面

ID选择器,类选择符区别

1、为标签设置id="ID名称",而不是class="类名称"。

2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。

3、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。(虽然在浏览器还是能体现相同的效果,但是不符合W3C规则)

后代选择器(空格)与子选择器(>)的区别

子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。“>”作用于元素的第一代后代,空格作用于元素的所有后代。

伪类选择符

允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色——:hover

分组选择符“,”

分组选择符,当你想为html中多个标签元素设置同一个样式时——a,b{color:red}

CSS样式继承

CSS的某些样式是具有继承性的,继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代,例如:line-height;font-size;color

CSS权值

浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式

第一等:代表内联样式,如: style=””,权值为1000。

第二等:代表ID选择器,如:#content,权值为100。

第三等:代表类,伪类和属性选择器,如.content,权值为10。

第四等:代表类型选择器和伪元素选择器,如div p,权值为1。

通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0

回归基础从新认识——HTML+CSS

如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值?

层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。

!important 优先级

当网页制作者不设置css样式时,浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。

这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。注意:!important要写在分号的前面。

三大标签类型

前面就给标签分了类,下面就在说说特点:

块状元素(block):

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

内联元素(inline):

1、和其他元素都在一行上;

2、元素的高度、宽度及顶部和底部边距不可设置

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

内联块元素(inline-block):

1、和其他元素都在一行上;

2、元素的高度、宽度、行高以及顶和底边距都可设置

三种布局模型

1、流动模型(Flow)

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)

2、浮动模型 (Float)

3、层模型(Layer)

三种形式:绝对定位(position: absolute)、相对定位(position: relative)、固定定位(position: fixed)

font属性简写

使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值;在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

长度单位

总结:常用到px(像素)、em、% 百分比,要注意其实这三种单位都是相对单位。

1、像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位。

2、em。就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。

3、百分比。p{font-size:12px;line-height:130%}设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)。

W3C倡导结构、样式、行为分离

结构化标准语言(html和xml)

表现标准语言(css)

行为标准语言(dom和ECMAScript)

盒子模型层级

边框 > 内容+内边距 > 背景图片 > 背景颜色 > 外边距

绝对定位 ,如果父元素没有相对定位的话,会一直追溯,最后没有的情况想是根据根元素html定位,不是body。