<!-- HTML:Hyper Text Markup Language超文本标签语言 css:Cascading Style Sheet 层叠样式表 作用:决定如何显示html元素。 --> <!-- 常用的部分css样式: 1.宽度width 单位:px 2.高度height 单位:px 3.背景颜色background-color 单位:颜色单词 4.文字颜色color 单位:颜色单词 5.文字大小font-size 单位:px 6.行高line-height 单位:px 7.文本对齐方式text-align 值:left/center/right 8.首行缩进text-indent 单位:px 9.12px支持最小字体,16px浏览器默认字体,区分是不是单词的标准有没有”空格“, 10.center、left --> <!--书写css样式的三种方式 1.行间css样式 直接在标签内通过style属性书写css样式。 2.内联css样式 在head标签里面通过style标签书写css样式。 3.外联css样式 单独创建一个css样式书写css样式。 w3c对html的书写有这样的规范建议 结构(html),样式(css),行为(js)三者尽可能做到相分离. -->
引用外联样式是,link和@import的区别和使用方法
<!--如何引用css文件
1.@import方式引用,@开头全是css代码
2.link标签引入,是html代码
@import和link方式引用css文件的区别
1.@import是css语法,link是html语法
2.@import只能引用css类型文件,link可以引用其他类型文件
3.@import 必须等到html文档加载完成后才开始加载,link会在文档加载的同时加载引用文件
4.@import引用的代码后期无法修改,link引入代码后期可通过js修改
-->
<link rel="stylesheet" type="text/css" href="style/s1.css"/>
<!--<style type="text/css">
@import url("style/s1.css");
</style>-->
head中mate标签的作用
<!--meta标签单标签配置网站的原信息
当前meta标签的作用设置当前文件的字符集(语言类型)
将来我们还会通过meta标签做奇特配置
如:1.兼容ie浏览器
2.设置seo优化数据
3.适配移动端
-->
行元素、块元素特点和区别
1 <!-- html里面所有标签根据自身特点可以分为两种 2 1.行元素 3 1.1能在一行显示 4 1.2不支持设置宽高,其大小有内容撑出 5 1.3不支持垂直方向上的margin和padding 6 2.块元素 7 2.1独占一行 8 2.2支持设置宽高,如果不设置,默认宽度和父元素一样 9 2.3支持垂直方向上的margin和padding 10 行元素:img,a,strong,em,span 11 块元素:h1-h6,p,hr,ul,ol,li,div,form,pre 12 br,img替换元素-->
快捷键语法详情
<!--
emmet语法
1.写标签,标签名+tab键
2.标签名1+标签名2+标签名3+......+tab键,所有标签一次生成,之间互为兄弟标签
3.标签名1>标签名2>标签3>...+tab键,所有代码一次生成。之间互为父子标签
4.标签名*n+tab键,一次书写多个同名标签。
5.$配合*使用,$会从1自增。
6.{}里面可以书写标签的文本内容
7.[]里面可书写标签的属性
8.()表示一个整体-->
//案例
div+p+span
div>p>span
div>p+span
ul>li*5 h$*6 div{这是div$元素}*10
a[href=###]{超链接$}*5
ul>(li>a[href=###]{超链接$})*5
常用选择器
/*1.通配符选择器 能找到当前文档里的所有标签*/
/*2.元素选择器 能找到当前文档中所有的同类型的某中标签
语法
标签名{
}*/
/*3.id选择器能找到当前文档里设置了对应id值的某个元素
注意:id值要具有唯一性
语法:
#id值{
}
需要事先对要找到的元素设置id值*/
/*
4.class选择器 能找到文档中若干个任意类型的标签
语法:
.class值{}
需要事先对要找到的元素设置class值*/
/*
5.子选择器 找到当前文档里与选择器1成父子关系的选择器2表示的元素
注意:这种父子关系可以不断向后延伸
语法:
选择器1>选择器2>...{
}*/
/*
6.后代选择器
语法:标志空格
选择器1 选择器2{
}*/
/*
7. 相邻兄弟选择器,相邻、且在其下面.找到当前文档里与选择器1表示的元素相邻且在其下面的选择器2表示的元素。
选择器1+选择器2+...{
}
*/
/*
命名规则:
1.只能有数字、字母、下划线组成
2.数字不开头
3.见名之意
需要多个单词时
1.helloWorld驼峰命名法
2.HelloWorld帕斯命名法
3.iHelloWorld匈牙利命名法*/