HTML CSS基本知识点总结

本文主要是介绍HTML CSS基本知识点总结，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Html部分如下：

1.什么是html？
一种描述网页的语言。
但是需要注意它并不是一种编程语言，而是一种标记语言，通过一系列标签来描述网页。
2.html基础标签？
（1）标题类（或比较重要的东西）
通过 < h1> - < h6> 等标签进行定义的。
（2）图像类
一般是通过标签< img src="#" alt=" “>去写的
（3）链接类
使用标签< a>< /a >
（4）段落
HTML 段落是通过 < p> 标签进行定义的。
3.基本的html语法有？
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
4.如何实现某网页中的关键词跳转？
使用< a herf=”#名字"> + <标签 id=“名字”>
即可实现页面快速跳转
5.如何实现鼠标放到某图片上显示字体？
给< img >标签添加title属性，其值即为要显示的文字
注意：并不是alt属性，alt属性是在无法显示图片时，所要显示的文字
并且当无法显示图片时，你给它添加title属性的值仍然会起作用
-
6.为什么img标签是行内元素，但是它却可以设置宽高？

这里涉及到可替换元素与非可替换元素：

< img />img标签的一些特性：img标签属于行内元素，但是可以设置宽高因为它又是可替换元素，具有行内元素，行内块元素，块级元素的特性。
可替换元素与非替可换元素的区别：
可替换元素:
浏览器根据元素的标签和属性，来决定元素的具体显示内容
例如浏览器会根据 < img> 标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据 < input> 标签的type属性来决定是显示输入框，还是单选按钮等
(X)HTML中的 < img>、< input>、< textarea>、< select>、< object> 都是替换元素。这些元素往往没有实际的内容，即是一个空元素
如： < img src=“tigger.jpg”/>、< input type=“submit” name=“Submit” value=“提交”/>
可替换元素的性质同设置了display:inline-block的元素一致
对于img，当不指定它的宽高时，它的宽高会默认为：其图片自身的大小；
对于input的选框，会显示浏览器所默认的宽高。

7.HTML5中新增的语义化标签有哪些？

< article> 定义文档内的文章。应用场景：
----论坛
----博客
----新闻
< aside> 定义页面内容之外的内容。
< bdi> 定义与其他文本不同的文本方向。
< details> 定义用户可查看或隐藏的额外细节。
< dialog> 定义对话框或窗口。
< figcaption> 定义 < figure> 元素的标题。
< figure> 定义自包含内容，比如图示、图表、照片、代码清单等等。
< footer> 定义文档或节的页脚。
< header> 定义文档或节的页眉。
< main> 定义文档的主内容。
< mark> 定义重要或强调的内容。
< menuitem> 定义用户能够从弹出菜单调用的命令/菜单项目。
< meter> 定义已知范围（尺度）内的标量测量。
< nav> 定义文档内的导航链接。
< progress> 定义任务进度。
< rp> 定义在不支持 ruby 注释的浏览器中显示什么。
< rt> 定义关于字符的解释/发音（用于东亚字体）。
< ruby> 定义 ruby 注释（用于东亚字体）。
< section> 定义文档中的节。
< summary> 定义 < details> 元素的可见标题。
< time> 定义日期/时间。
< wbr> 定义可能的折行（line-break）。
8.如何在填写表单时，如何增大用户鼠标点击输入的范围？

使用< lable>标签，设置如下：
在使用时，input的id值应与lable中的for值相同，就会使二者建立联系没进而提升体验。
如此在点击lable或input时，鼠标光标会自动定位到可输入时。
9.如何提高input标签的checkbox的点击范围？

< div style=“width:100%;height:100px;”>< input type=“checkbox” οnclick=“All_None(this.checked)” style=“width:100%;height:100%;”></ div >

使用onclick属性去做，οnclick=“All_None(this.checked)”

这样在点击div这个标签的范围时，光标就会自动勾选了！

但需要注意：
onclick 属性不适用以下元素：< base>、< bdo>、< br>、< head>、< html>、< iframe>、< meta>、< param>、< script>、< style> 或 < title>。
它的值是script！！！

10.什么是 HTML5？
HTML5 是最新的 HTML 标准。

HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。

HTML5 拥有新的语义、图形以及多媒体元素。

HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。

HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。
11.如何确保html5中的新增元素也可以在老式浏览器中仍为块级元素？

在style标签中书写：
header, section, footer, aside, nav, main, article, figure {
display: block;
}
即可
12.什么是语义元素？

语义元素清楚地向浏览器和开发者描述其意义。

非语义元素的例子：< div> 和 < span> - 无法提供关于其内容的信息。

语义元素的例子：< form>、< table> 以及 < img> - 清晰地定义其内容。
13.如何在页面中使用svg图像？以及使用它的优点？在哪里获取？
（1）.引入：
使用 < iframe> 标签
< iframe> 标签可工作在大部分的浏览器中。
< iframe src=“rect.svg” width=“300” height=“100”>
</ iframe>
（2）.优点：（通俗来说就是不会失真）
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
（3）获取：
推荐阿里矢量图官网： https://www.iconfont.cn/.

14.如何获取用户地理位置？
使用HTML5 Geolocation API 来获得用户的地理位置。
代码如下：

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

二.CSS与CSS3部分

1.css中有哪些是可以继承的，哪些不可以继承？
–什么是继承？：
------子元素继承父元素的样式，但是并不是所有属性都是默认继承的。
– 不可以继承的属性有什么？
（1）.display，规定标签的类型，行内、块级、行内块元素等。
（2）.文本属性
vertical-align：垂直文本对齐

text-decoration：规定添加到文本的装饰

text-shadow：文本阴影效果

white-space：空白符的处理

unicode-bidi：设置文本的方向
（3）.盒子模型的属性
width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
（4）.背景属性
background、background-color、background-image、background-repeat、background-position、background-attachment
（5）.定位属性
float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
（6）.生成内容属性
content、counter-reset、counter-increment
常见于伪元素中。
（7）.轮廓样式属性
outline-style、outline-width、outline-color、outline
（8）.页面样式属性
size、page-break-before、page-break-after
（9）.声音样式属性
pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

可以继承的属性有什么？
（1）、字体系列属性

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

（2）、文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色

（3）、元素可见性：visibility

（4）、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

（5）、列表布局属性：list-style-type、list-style-image、list-style-position、list-style

（6）、生成内容属性：quotes

（7）、光标属性：cursor

（8）、页面样式属性：page、page-break-inside、windows、orphans

（9）、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
更多细节参考：
链接: https://www.cnblogs.com/duhuo/p/8018756.html.
2.css的选择器有哪些，他们对应的优先级是？
（1）.元素选择器：
元素选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
（2）.通配符选择器:
使用*{}来定义
（3）.类选择器：
使用给元素class=“”来定义
在使用时应当注意：
1）.它可以和其他的选择器搭配使用
2）.多类选择器（即可以给一个元素多个类名）
3）.通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）
例如：
.bb.cc{}
< div class=“bb cc”>埃利路亚</ div>

应注意：
.bb与.cc之间不能有空格！！！
（4）.id选择器
首先在定义时，用id=“”使用
在css样式时：#名字{}使用
应注意：
1）.id选择器只能使用一次
2）.id选择器不可以结合使用
3）.id相对于其他选择器可以包含更多的含义
4）.id选择器时区分大小写的！！
（5）.属性选择器
-如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
例如：*[title] {color:red;}
希望把所有含有title属性的元素变成红色
例如：a[href][title] {color:red;}
可以把标签a中含有href于title属性的颜色变为红色。
较复杂些的属性选择器：
例如：[title~=flower] 就是把所有含title属性并且属性值含有flower单词的选择出来!
例如： [lang|=en] 就是把lang属性中所有以en开头的选出来！
例如：[target=_blank] 就是把所有的target=“_blank”选出来
（6）.后代选择器
父元素与子元素之间应用 空格 隔开即可。
例如：h1 em {color:red;}
这里对 空格 进行解释
：在后代选择器中，不同选择器之间的空格其实是一种“结合符”！
每个空格可以解释为“…在…中找到”，但要求必须是从左至右读取！
（7）.子元素选择器
与后代选择器有些区别，子元素选择器只能选择它的亲儿子！！
例如：h1 > strong {color:red;}
（8）.相邻兄弟选择器
例子：h1 + p {margin-top:50px;}
（9）.css的伪类选择器
常用于链接、鼠标放置时、具有lang属性的、具有键盘输入焦点。
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。
（10）.css的伪元素选择器
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。
:nth-child(n) 选择父元素的第n个儿子

更多的选择器请参考：这里.

优先级问题：

3.如何理解css的相对单位em？
em是最常见的相对长度单位，这是排版中使用的一种度量方式，基准值是当前元素的字号大小。 在CSS中，1em表示当前元素的字号大小，实际值取决于在哪个元素上应用。假设当前元素的字号大小为a px，那么1em的大小就是a px。

4.块级元素和行内元素以及行内块元素有什么区别？分别是什么？

1）.块元素：具有类似特点的html元素的称法
特点：
①总是在新行上开始；
②高度，行高以及外边距和内边距都可控制；
③宽度缺省是它的容器的100%，除非设定一个宽度。
④它可以容纳内联元素和其他块元素
2）.行内元素：具有类似特点的html元素的称法
特点：（除可置换元素外的）
①和其他元素都在一行上；
②不可以给高度、宽度，但是可以给内边距和左右外边距
④内联元素只能容纳文本或者其他内联元素
3）.行内块元素：具有类似特点的html元素的称法
特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置！
5.如何让单行文字垂直居中？多行文字怎么做？
对于单行文字：将其文字line-height设置为盒子高度即可
对于多行文字：先将父元素display转换为table
对于子元素：display:table-cell、 vertical-align:middle、text-align：center;

具体代码：

	div {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

6.对于背景图片的定位以什么为准？css3中背景简写怎样去写？
以父元素的左上角为基准
写法：
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；
7.元素外边距合并是什么，该怎样解决？
元素外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距，并且合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

如何解决：
第一种.给父元素设置上边框
第二种.给父元素定义内边距
第三种。给父元素添加overflow：hidden

8.当给定border-radius的值为多少时盒子为圆形？

当数值为50%（表示宽度和高度的一半时），显示为圆形！！

对于border-radius：上 右 下 左；
（顺时针顺序）来设置哦

9.盒子阴影的快捷设置为？

box-shadow：水平阴影的位置 垂直阴影的位置 模糊距离 阴影的尺寸 内阴影or外阴影

其中前两个时必须书写的！！

10.文字阴影的简写？

text-shadow：水平阴影位置 垂直阴影位置 模糊距离 阴影颜色

这个加上2d动画挺不错的嘿嘿嘿@_@

11.什么是浮动？它能做什么？有什么需要注意的？

浮动的定义：可简单理解为被设置float属性后的水平浮动。
特点：
1、块级元素浮动将并排显示，不再独占一行

2、内联样式浮动将支持设置宽高，不仅支持margin-left(right)，而且开始支持margin-top(bottom)

3、浮动元素默认内容撑开宽度

4、浮动元素脱离正常的文档流，即不占用文档流

5、浮动元素提升半层级（解释：文字和包文字的标签元素是一个层，然后文字占用半层，标签半层。而浮动会升级半层，文字半层刚好和浮动元素持平，所以文字不会进去）
注意点：注意浮动的清除，以防止父级元素的塌陷。

这篇关于HTML CSS基本知识点总结的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！