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默认值 当前窗口打开
注意:属性名小写,属性值加双引号
css引用与html语义化的更多相关文章
- CSS代码命名惯例语义化的方法
CSS代码的命名惯例一直是大家热门讨论的话题.今天暴风彬彬想通过分析一个流行三栏布局中的必要元素,来为大家讲解关于使用语义化方法替代结构化方法来命名CSS类的建议和指导. 您还可以参考彬Go的相关文章 ...
- 标签语义化之常用HTML标签
一.布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖与滥用DIV标签, HTML提供了我们一共七八十个标签,其中常用的有三十个左右,DIV不过 ...
- 一天搞定HTML----标签语义化04
根据页面里不同的内容,选择最适合它的标签,而不通篇只用一种标签 标签语义化作用: 代码演示 通过比较- - -H5布局和DIV+CSS 布局- - -体现标签语义化 注意: 标签语义化,不仅仅只是指使 ...
- 语义化标签和media媒体查询可以放心使用
现在的高级浏览器都支持html5,只有IE6-IE8不支持.(下面说的IE均值IE6-IE8) 有两个特性在IE是可以使用的: 1.语义化标签: header(头部) section(区块) foot ...
- .使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 你应该了解的CSS语义化命名方式及常用命名规则
CSS语义化命名 从上图我们可以大概看出这里有两种CSS的命名方式:1.结构化命名法:2.语义化命名法. 结构化命名法:根据页面中板块的位置而命名,如上图中的content-left,这时如果我们想把 ...
- CSS语义化命名
CSS语义化命名 从上图我们可以大概看出这里有两种CSS的命名方式:1.结构化命名法:2.语义化命名法. 结构化命名法:根据页面中板块的位置而命名,如上图中的content-left,这时如果我们想把 ...
- 智能选择器和语义化的CSS
本文由白牙根据Heydon Pickering的<Semantic CSS With Intelligent Selectors>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之 ...
- 谈CSS布局中HTML标签语义化
很多人都在做前端,当然这里包括很多新手,也许在新手的想法就是在做布局的时候不要用font标签之类的就算是web标准了,这样一来,造成如今网上“div泛滥”,一看源文件,霍,除了div没其他标签了. 这 ...
随机推荐
- Lintcode225-Find Node in Linked List-Naive
225. Find Node in Linked List Find a node with given value in a linked list. Return null if not exis ...
- C语言学习——bsmap-2.74_main.cpp
素材路径:https://www.codeforge.cn/read/428275/bsmap-2.74-_-main.cpp__html 1.C/C++预处理指令,常见的预处理指令如下: #空指令, ...
- rtf乱码解决办法
首先,阐述下rtf,富文本格式文档,目前常用来做模板: 我遇到的问题是rtf中替换后的文本显示是正常的,rtf直接转pdf就不正常了,通过notpad++ 打开后发现rtf本身内容编码是我没有见过的( ...
- c#异步学习笔记
如下代码.只需要异步的处理一个数据,不需要等处理完成后,进行后继的操作.可以不用Async来修饰方法 static void Main(string[] args) { Test(); Console ...
- 【Mac】系统语言切换为英文后chrome浏览器无法用国内印象笔记账号登陆印象笔记剪藏
解决办法: 将chrome浏览器语言设置成中文就可以了
- 阿里云 RDS for MySQL支持什么引擎
问题:我们的服务器是买的是阿里云,mysql版本5.011 ,本地和服务器配置一样,在本地可以安装discuzX3.4,但是在服务器上却报错了,如下图: 找了半天,才知道阿里云RDS 支持的mysql ...
- SWUST OJ(1035)
定位顺序表中最大和最小值 #include<iostream> #include<cstdlib> using namespace std; int main(int argc ...
- angular 引入编辑器以及控制器的学习和理解。。。
在angular中引入编辑器的时候花了很长时间,然后发现自己以前根本就没好好用过angular,因为项目是接手的学姐的,学姐又是接手的学姐的,到我这里就只是写写页面的事了. 引入编辑器差了好多好多资料 ...
- Spring Http Invoke 请求过程图
Spring Http Invoke 请求过程图:
- vmware三种网络模式的工作原理及配置详解
vmware为我们提供了三种网络工作模式,它们分别是:Bridged(桥接模式).NAT(网络地址转换模式).Host-Only(仅主机模式). 打开vmware虚拟机,我们可以在选项栏的“编辑”下的 ...