一。CSS引用
1. 使用外部样式表:    CSS代码在一个独立的文件中,HTML通过link元素引入到页面

格式:link + tab键<link rel="stylesheet" herf"../目标">

特点:
- 实现了内容结构和表现形式的代码分离,方便复用和维护
- 使HTML代码更加纯洁,有利于程序员和搜索擎的阅读

2.使用内部样式表:   将CSS代码写到HTML文档的style元素内容中

格式:<stely>样式</stely>

特点:
没有了样式表文件,在某些时候可以提升效率;
多个页面难以共享样式,不利于代码复用;
HTML和CSS代码混乱,不利于程序员和搜索擎阅读,不利于复用和维护;
在某些对效率要求苛刻或测试的场景下使用

一个样式表可以引用多个页面,一个页面也可以引用多个样式表

3.使用行内样式表:又叫内嵌样式表,CSS代码写在某个元素的开始标记中,行内样式不写选择器(放入body标签里)

书写格式:<开始标签 属性名=“属性值”>        <结束标签>

特点:相对于使用内部样式表,行内样式表大多进行JS操作,同时也在测试的场景下使用
注意:行内样式表优先级最高
CSS术语
     CSS注释书写格式:  /*注释内容*/
作用:   方便自己和维护员修护  描述代码功能  解析CSS
CSS的规则:
css代码由一个一个的规则组成  
 
         书写格式:选择器  { 声明块 }
选择器:该样式规则应用到哪些元素上
声明块:有哪些样式

元素选择器:  标签元素名
 
书写格式:{ /* 声明块 */ }
所有与该标记名匹配的元素,都将应用声明诀中的规则

类选择器:

书写格式:.类名{/* 声明块 */}
所有class属性为指定类名的元素,都将应用声明诀中的规则;多个类名在HTML代码中,中间要用空格分开

ID选择器:

书写格式:#id值{/* 声明块 */}
在同一个HTML文档中,元素的id值必须唯一

二。HTML 语义化概述
意义:HTML中不同的元素代表不同的含义;使用具有含义的元素来书写HTML文档,即语义化;语义化属于HTML范畴,与样式css无关

作用:有利于浏览器理解HTML文档;有利于搜索擎理解HTML文档结构的理解;
div元素:用来划分区域,不具备任何意义
<header>:用于表示某个页面的头部,同一个页面header可以出现多次
<nav>:导航栏
<aside>:用于表示跟周围主题相关的附加信息(侧边栏)
<article>:用于表示文章或独立页面存在的内容
<section>:用于表示一个整体部分的主题
<footer>:脚部
单词快捷键:lorem+tab键
< a >超链接

书写格式:< a href="目标"> 内容 </ a>
或<a target="页面打开位置" href="目标">  内容  </ a>
链接的目标指:页面地址(路径);锚点;功能的链接

target="页面打开位置"是指:点击后在哪里打开新文档
_blank新窗口打开
_self默认值 当前窗口打开
注意:属性名小写,属性值加双引号

转载于:https://www.cnblogs.com/1301774939-/p/1301774939-.html

css引用与html语义化相关推荐

  1. CSS类命名的语义化VS结构化方式

    一般而言,CSS类名的语义化声明方式应当考虑你的页面中某个相对元素的"用意",独立于它的"定位"或确切的特性(结构化方式).像left-bar, red-tex ...

  2. 一天搞定HTML----标签语义化04

    根据页面里不同的内容,选择最适合它的标签,而不通篇只用一种标签 标签语义化作用: 代码演示 通过比较- - -H5布局和DIV+CSS 布局- - -体现标签语义化 注意: 标签语义化,不仅仅只是指使 ...

  3. 有关WEB前端中的语义化

    作天在变卖大学书籍时也不晓得怎么的就想起语义化这个概念,于是乎也就花点时间搞搞它.语义化标记对于刚学web前端脚本语言的童鞋来说往往都没太 在意,哇哈哈,其实我也就算只比较老的菜鸟而已,本文不是说教, ...

  4. html语义化标签是什么,HTML语义化标签探析

    什么是HTML语义化 HTML语义化就是根据具体内容,选择合适的标签进行代码的编写.便于开发者阅读和写出更优雅的代码,同时让搜索引擎的爬虫能更好的识别. 为什么要语义化 有利于SEO:搜索引擎的爬虫是 ...

  5. HTML语义化标签的理解

    1. 语义化的背景: 以前的HTML的结构,基本上就是DIV+CSS.然而,DIV它并没有什么任何的意义,全靠CSS显示页面的样式. 那么近几年呢,开发者提出了HTML结构的语义化,所以W3C就制定出 ...

  6. 你应该了解的CSS语义化命名方式及常用命名规则

    CSS语义化命名 从上图我们可以大概看出这里有两种CSS的命名方式:1.结构化命名法:2.语义化命名法. 结构化命名法:根据页面中板块的位置而命名,如上图中的content-left,这时如果我们想把 ...

  7. web前端入门学习 css(8)(新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡

    https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...

  8. css语义化命名_为什么我只在生产中使用语义命名

    css语义化命名 到底"层是其层中循环的一部分"是什么意思??? (And what the heck does `layer is a part of cycle in its ...

  9. html css语义化

    语义化 文章目录 语义化 语义化概念 为什么需要语义化 语义化概念 1.每个HTML元素都有具体含义 eg:a元素: 超链接 h1 :一级标题 p元素:段落 2.所有元素与展示效果无关 <!DO ...

  10. 结合HTML5的语义化标签,运用DIV+CSS网页布局技术设计一个个人博客页面

    ** CSS+DIV页面布局 ** 结合HTML5的语义化标签,运用DIV+CSS网页布局技术设计一个个人博客页面.要求: (1)header标签定义页面头部区:nav标签定义导航区:div标签定义中 ...

最新文章

  1. 【J2SE】语言基础
  2. python制作音乐模块_用Python打造一个只属于你的专属音乐播放器,享受动手的快乐!...
  3. c 多文件全局变量_C/CPP : static 关键字 及 变量函数的不同
  4. 7.2 TensorFlow笔记(基础篇): 生成TFRecords文件
  5. 【洛谷P5385】须臾幻境/【BZOJ3514】Codechef MARCH14 GERALD07加强版【LCT】【主席树】
  6. python 重启电脑_如何在系统重启后恢复Python脚本?
  7. Python 进阶——重访 set
  8. 超越LLMNR /NBNS欺骗 - 利用Active Directory集成的DNS
  9. 在vscode中使用opencv
  10. 自己建网站的步骤及方法
  11. 逍遥刘强 - 期货大作手风云录(2015年8月28日)
  12. R语言----制作数据分布图(直方图+概率密度曲线)
  13. 如何查看博客是否被搜索引擎收录
  14. 中华名将索引 - 第一批:孙武
  15. 众海世纪影业:五一档19部影片“扎堆”,能否再次掀起观影热潮?
  16. 超级壁纸android,【教程】MIUI最新超级壁纸安卓全机型安装指南
  17. STM32F03寄存器方式点亮LED流水灯
  18. 如何将wma转换成mp3格式?
  19. 一楼二楼教师办公室图书馆操场计算机房,新PEP人教版四年级英语下册常用单词、常用表达法默写用纸...
  20. 抖音直播应该怎样互动?教你学会互动引流脚本

热门文章

  1. 牛客网暑期ACM多校训练营(第三场) J Distance to Work 计算几何求圆与多边形相交面积模板...
  2. Swift 弱引用与无主引用
  3. 常用实例:js格式化手机号为3 4 4形式
  4. ActiveMQ(14):Destination(目的地)高级特性
  5. Android Screen Orientation
  6. gcc -nostartfiles; -nodefaultlibs; -nostdlib;-f...
  7. [转载] 七龙珠第一部——第019话 天下第一武道会开始
  8. HOOK使用:全局键盘钩子
  9. php enum 数字类型插入失败的解决办法
  10. Delphi GDI对象之绘制文本