css引用与html语义化

一。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