前端基础知识点
程序员文章站
2024-03-17 11:15:28
...
- html
-
声明 !DOCTYPE html
作用:它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
用法:位于文档中的最前面的位置
-
HTML中有110个标签分为13类
基础标签、格式标签、表单标签、框架标签、图像、音频 | 视频、链接、列表、表格、样式/节、元信息、程序、main
-
元素类型
1. 块元素 (block)特点: a.块级元素会新起一行。一般块级元素可以包含行内元素和其他块级元素。
b. 宽度缺省是它父级元素的100%,除非设定一个宽度
c. 高度、行高、外边距、内边距都可以设置
常见元素: address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易,也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
menu – 菜单列表
noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容
noscript – 可选脚本内容(对于不支持script的浏览器显示此内容)
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表
-
行内块元素 (inline-block)
特点:a.元素排列在一行
b.宽度默认由内容决定
c.元素间默认有间距
d.支持宽高、外边距、内边距的所有样式的设置
3.行内元素 (inline)
特点:a.都在一行上,遇到父级元素边界会自动换行
b.高、行高以及内外边距都不可以改变
c.宽度与内容一样宽,且不可改变
d.行内元素只能容纳文本或者其他行内元素
e.对于行内元素,需要注意的是:设置宽度width无效,设置高度无效,可以通过设置line-height来设置,设置margin只有左右有效,上下无效,设置padding只有左右有效,上下无效
常见元素:
a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
bdo – bidi override
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
dfn – 定义字段
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
s – 中划线(不推荐)
samp – 定义范例计算机代码
select – 项目选择
small – 小字体文本
span – 常用内联容器,定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线
行内元素的间距问题:
两个行内元素在一起,会出现一定的间距,即使将border、padding、margin都设置为零也无济于事,那么怎么才能去除这些间距呢?
1.重设字体
将行内元素的直接父级设置font-size=0px;再给行内元素设置字体大小就可以解决。
2.借助HTML注释
在两个行内元素之间加入HTML注释,告诉浏览器这中间不是换行也不是空格,而是连接在一起的,这样也可以解决。
-
-
css
- 兼容性
-
权重层级
a. 较长的 css selector 权重会大于较短的 css selector
b. id selector 权重高于 class selector.
c. 行内样式>id>class>elements
d. 总是先考虑使用权重更高的 css 选择器, 而不是使用 !important
**只有当你的目的是覆盖来自第三方的 css(如: Bootstrap, normalize.css)时, 才在页面范围使用 !important**
**永远不要 在你写一个第三方插件时使用 !important**
**永远不要在全站范围使用 !important
-
ie兼容的参考网站
a. https://www.cnblogs.com/xiaoyueyue165/p/6925148.html
b. 媒体查询 选择器前缀写法
兼容 ie8/9/ 10 @media screen\0{}
兼容 ie9/10 @media screen and (min-width:0\0) {}
兼容 ie8 @media \0screen{}
兼容 ie7及ie6 @media screen\9{}
兼容IE6/7/8 @media \0screen\,screen\9{}
兼容ie10 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
c. CSS 属性前缀
兼容ie6 _color:red;
兼容ie7及以下 *color:red;
兼容ie6/7 +color:red;
兼容ie6-10 color:red\9;
兼容ie8-10 color:red\0;
兼容 ie9/10 color:red\9\0;
-
关于ie9 不兼容 input 属性placeholder
思路:
1.将span标签覆盖在input上;
2.input 获取焦点隐藏span 失去焦点时存在值掩藏span 为空显示span;
3.点击span标签时 input聚焦
html:
<!--[if lte IE 9]>
<span class="span1">请输入受理编号</span>
<![endif]-->
<input type="text" class="hd_acceptnumber" value=""
placeholder="请输入受理编号" onfocus="$('.span1').hide()" onblur="if($(this).val()!=''){$('.span1').hide()}else{$('.span1').show()}""/>
js:
$(".span1").on("click",function(){
$(".hd_acceptnumber").focus();
});
-
轮播图兼容
注意点:
1.Ie8 支持 swiper2.0版本 https://2.swiper.com.cn/
2.Ie7 支持 jq swiper2.0
兼容ie8以及ie7需要swiper 统一使用swiper2.0;下载测试包引入js\css
-
Echart兼容
-
注意点:
1.Ie8 不支持 rgba(0, 0, 0, 0.6)
解决:filter 格式:progid:含义为区分,gradient渐变颜色
progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000) (alpha RR GG BB)
2. Ie6-ie8 兼容
解决:opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
参考网址:https://segmentfault.com/a/1190000002433305
3.垂直水平居中
兼容:
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE9及以上支持 */
注意点:
1.Ie8 ie7兼容@media
position: absolute;
left: 50%;
top: 50%;
height: 600px;
max-width: 1000px;
margin-top: -300px; /* 高度的一半 */
margin-left: -500px; /* 宽度的一半 */
-
js兼容
ie11-- ie9 document.querySelector()
Ie7 -- ie8 document.getElementById()
<!--[if IE]><![endif]--> 中 ie11 与ie10不支持 条件注
<!--[if IE]><![endif]--> 中 ie11 与ie10不支持 条件注释
-
<!DOCTYPE html> 是 HTML5 中唯一的 doctype,也被视作将网页 "升级" 到 HTML5 的第一步。
很多国外网站的 <!DOCTYPE html> 和 <HEAD> 之间都会有一段注释,如:
<!—[if IE 6 ]><html class="ie ielt9 ielt8 ielt7 ie6" lang="en-US"><![endif]—>
<!—[if IE 7 ]><html class="ie ielt9 ielt8 ie7" lang="en-US"><![endif]—>
<!—[if IE 8 ]><html class="ie ielt9 ie8" lang="en-US"><![endif]—>
<!—[if IE 9 ]><html class="ie ie9" lang="en-US"><![endif]—>
<!—[if (gt IE 9)|!(IE)]><!—><html lang="en-US"><!—<![endif]—>
改代码作用于 css,来写一些针对 IE 各版本的样式差异。
先判断用户用的哪个 IE 版本,然后在标签上加上该版本的 class,这样可以方便 hack。
css 文件是这样写的:
.ie6 xxx {};
.ie7 xxx {};
这是目前最好的 hack 方式之一。 (这种写法在 菜鸟教程中被提及感兴趣可以去看看:https://www.runoob.com/tags/tag-doctype.html)
- 兼容性
上一篇: Python笔记——文件读写