<!-- 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匈牙利命名法*/