1.0初识html

单标签

meta 是设置标签 用来设置网页具体信息
charset属性
用来设置网页编码格式

行标签和块标签

标签 (别称 元素 盒子)
承载超文挡流的容器
所有的文本信息 都必须写在标签中

    根据有无闭合标签可分为双标签和单标签 
    双:html body div span
    单:meta

根据页面渲染结果可分为
块标签 div
特性:1.独占一行 每个块标签 都会导致文本流的换行
2.可以设置宽高
不设置高度时:高度由内容撑开
不设置宽度时:宽度和父盒子等宽
3.可以嵌套块标签和行标签
标签之间的嵌套关系我们拟人化的称之为父子关系
<div>父
<div>子<div>
<div>
行标签 span
特性:1.可以在一行之间排列 但是如果超出父盒子宽度则会换行
(如果是单个行标签超出宽度 此情况不换行)
2.不能设置宽高 宽高由内容撑开
3.可以嵌套块标签 但是!!!不推荐!!!

行标签不能设置宽高

css_引入方式

文件路径的编写
本层文件=> ./文件名.后缀名
上层文件=> ../文件名.后缀名
上上层文件=> ../../文件名.后缀名
下层文件=> 文件夹名/文件名.后缀名

css的引入方式有三种:
1.行间样式
在标签中 通过style属性 来写css代码
优点:
优先级高 方便(哪里用哪里写)
缺点:不利于维护 显得页面太过杂乱
2.内联样式
将css代码写在页面的<style><style>
从编译的角度来讲 stlye标签 可以写在html根标签的任意位置
但是
前端代码规范中 规定 一帮将style标签 写在head 的闭合标签的上面
优点:
可复用性高 代码整洁 利于维护
缺点:
会使页面变的很长
所以一般的小型项目及页面 推荐使用内联样式
3.外联样式
在外部创建一个.css文件
并在html文件中 head标签中 title标签中 使用 link 标签引入
(link标签中 href 属性内 写要引入css的文件路径)
优点:
逻辑清晰
页面整洁
易于维护
可复用性高
缺点:
加大了项目所占内存
所以 一般多页面的项目 推荐使用外联样式

    优先级:行间样式 > 内联 > 外联

css选择器

命名规范
按照W3C规范
命名有一下规则(包括类名,文件夹或者文件等所能遇到的所有的命名)
1.命中中 只能包括 字母 数组 下划线
2.命名必须以字母开头
3.命名必须遵守语义化 (好理解 容易记)
4.不要用拼音及拼音缩写 尽量使用单词
两种格式:
1.驼峰命名
例:商品列表 商品=>goods 列表=>list
=>goodList(小驼峰) 推荐
=>GoodList(大驼峰)
2.地中海命名(匈牙利命名)
例: 商品列表 => goods_list
类选择器
也叫class 选择器
当同种标签过多时 我们可以使用标签中的class属性给标签起个名字(类名)
然后在css中使用类名 的方式 选择具体的标签 并编写样式
一个标签可以有多个类名 每个类名用空格隔开
类名 可以重复使用
标签选择器
直接在 style中 使用标签名 的方式来选择具体标签

 > id 选择器
   需要在标签内 使用id 这个属性 来设置id
   然后在style标签中 使用#id名 的形式 选择具体标签
注意!!!!!!
    id具有唯一性 整个页面中 id不能重复!!!!!!
    通常情况下 一个标签  只能有一个id
    不建议使用id来写css

    区分理解 class 和 id
           人名 相当于class 因为人名可以重复
           身份证号 相当于id 因为身份证号不可能重复

css_选择器2

群组选择器 可以配合 class 标签 id 等选择器一起使用
多个选择器之间 以 逗号隔开
例如:
选择器1,选择器2,选择器3 {
}

组合选择器
详细的描述一个标签的属性或标签名
有几个class 就写几个class 写的越详细 优先级越高
!!! 注意:中间不能有空格

后代选择器
父选择器 与 子孙选择器之间 以 空格 隔开
例如
.f1 .f2 .f3 {
}

子选择器
父选择器 与 子选择器 之间以 > 隔开
注意 !!
只能选择 直属子元素 不能选择 后代元素
.f1>.f2 {
}

_ul 标签

按照规范ul 下只能写li
无序列表
特征:每一行前面都会有一个 小点
通常我们用它来写 列表 或者 导航栏

点 是默认效果
去掉默认效果 就叫 样式初始化
ul {
list-style-type: none;
}
ul 和 li 都是块标签

ol 有序列表
每一行 前面都有一个 序号
要去掉序号 则需要样式初始化
ol {
list-style-type: none;

h1 标签

h1~h6 标签
块标签
通常用来写 大小标题
h1 标签 通常一个页面 只能存在一个h1标签
通常 h1 标签 用来承载网站名 或者 logo
如果网站logo出现在多个地方
只给顶部的logo加上h1标签
h2 可以有多个不限制数量 但是一般写网站 模块标题

p标签

p标签 通常用来 承载 大段的文字
p标签不能包块标签 可以包行标签 span

br 标签

br标签 是一个功能性标签 在哪写 哪里就换行
hr标签 生成一条线

img 标签

用来写图片
src => 设置图片路径
alt => 当图片加载失败时的提示信息

单标签 行元素
自带width和 height属性 直接写数值不用带单位
css的优先级 高于 img 标签中 width 和 weight 属性

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容