HTML 标签和属性值的基本格式
HTML: HyperText Markup Language 超文本标记语言
HTML代码不区分大小写, 包括HTML标记、属性、属性值都不区分大小写;
任何空格或回车键在代码中都无效，插入空格或回车有专用的标记，分别是 、<br>
HTML标记中不要有空格，否则浏览器可能无法识别。
如何添加注释(comment:评论;注释)
字符集
可以将a链接的默认属性设置为_blank属性
单个标签要有最好有结束符(可以没有结束符)
便于兼容XHTML(XHTML必须要有结束符)
HTML标签的属性值可以有引号,可以没有引号,为了提高代码的可读性,推荐使用引号(单引号和双引号)，尽管属性值是整数，也推荐加上引号。
便于兼容XHTML(XHTML必须要有引号)
经过测试,以上程序都可以正确运行
HTML标签涉及到的颜色值格式:
color_name 规定颜色值为颜色名称的文本颜色(比如 \”red\”)。
hex_number 规定颜色值为十六进制值的文本颜色(比如 \”#ff0000\”)。
rgb_number 规定颜色值为 rgb 代码的文本颜色(比如 \”rgb(255,0,0)\”)。
transparent 透明色 color:transparent
rgba(红0-255,绿0-255,蓝0-255,透明度0-1)
opacity属性: 就是葫芦娃兄弟老六(技能包隐身)
css:
英文(颜色值)不区分大小写
HTML中颜色值：采用十六进制兼容性最好(十六进制显示颜色效果最佳)
CSS中颜色值：不存在兼容性
红色 #FF0000
绿色 #00FF00
蓝色 #0000FF
黑色： #000000
灰色 #CCCCCC
白色 #FFFFFF
青色 #00FFFF
洋红 #FF00FF
黄色 #FFFF00
请问后缀 html 和 htm 有什么区别?
答: 1. 如果一个网站有 index.html和index.htm，默认情况下，优先访问.html
2. htm后缀是为了兼容以前的DOS系统8.3的命名规范
XHTML与HTML之间的关系?
XHTML是EXtensible HyperText Markup Language的英文缩写,即可扩展的超文本标记语言.
XHTML语言是一种标记语言,它不需要编译,可以直接由浏览器执行.
XHTML是用来代替HTML的, 是2000年w3c公布发行的.
XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求.
XHTML是基于XML的应用.
XHTML更简洁更严谨.
XHTML也可以说就是HTML一个升级版本.(w3c描述它为\’HTML 4.01\’)
XHTML是大小写敏感的,XHTML与HTML是不一样的;HTML不区分大小写,标准的XHTML标签应该使用小写.
XHTML属性值必须使用引号,而HTML属性值可用引号,可不要引号
XHTML属性不能简写：如checked必须写成checked=\”checked\”
单标记<br>, XHTML必须有结束符<br/>,而HTML可以使用<br>,也可以使用<br/>
除此之外XHTML和HTML基本相同.
网页宽度设置多少为最佳?
960px
target属性值理解
_self 在当前窗口中打开链接文件,是默认值
_blank 开启一个新的窗口打开链接文件
_parent 在父级窗口中打开文件,常用于框架页面
_top 在顶层窗口中打开文件,常用语框架页面
字符集：
charset=utf-8
Gb2312 简单中文字符集, 最常用的中文字符
Gbk 简繁体字符集, 中文字符集
Big5 繁体字符集, 台湾等等
Utf-8 世界性语言的字符集
ANSI编码格式编码格式的扩展字符集有gb2312和gbk
单位问题：
HTML属性值数值型的一般不带单位, CSS必须带单位;
强制刷新
ctrl+F5
css初识
本章目标：
- 会使用行内样式、内部样式表和外部样式表三种方式为HTML5文档添加CSS样式
- 会使用CSS3的基本选择器设置字体大小和颜色
- 会使用复合选择器为特定的网页元素添加CSS样式
- 会使用CSS3高级选择器为网页元素添加CSS样式
Cascading Style Sheet 级联样式表。 表现HTML或XHTML文件样式的计算机语言。 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
在这里插入图片描述
说明：
- 首先介绍什么是CSS
- 然后对比讲解使用CSS和没有使用CSS的两个相同的HTML代码页面显示效果，说明CSS的重要性
- 最后根据图说明CSS在网页中的应用
在这里插入图片描述
CSS1.0 读者可以从其他地方去使用自己喜欢的设计样式去继承性地使用样式；
CSS2.0 融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离
CSS2.1 融入了更多高级的用法，如浮动，定位等。
CSS3.0 它包括了CSS2.1下的所有功能，是目前最新的版本，它向着模块化的趋势发展，又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性，但是它需要高级浏览器的支持。
由于现在IE 6、IE 7使用比例已经很少，对市场企业进行调研发现使用CSS3的频率大幅增加，学习CSS3已经成为一种趋势，因此本书会讲解最新的CSS3版本
本课程中主要讲解css2.1和css3
CSS的优势
- 内容与表现分离
- 网页的表现统一，容易修改
- 丰富的样式，使得页面布局更加灵活
- 减少网页的代码量，增加网页的浏览速度，节省网络带宽
- 运用独立于页面的CSS，有利于网页被搜索引擎收录
- 首先讲解CSS的基本语法结构，由选择器和声明构成
- 然后对照具体的样式详细讲解语法，强调声明必须在 { } 中
- 最后说明基本W3C的规范，每条声明后的 ; 都要写上
在这里插入图片描述
Style标签
- 讲解CSS样式如何在HTML中应用，引入style标签的应用
- 讲解style标签，说明type=“text/css的用法
- 说明style标签在HTML文档中的位置，在与之间
在这里插入图片描述
- 行内样式 使用style属性引入CSS样式 <h1 style=\”color:red;\”>style属性的应用</h1> <p style=\”font-size:14px; color:green;\”>直接在HTML标签中设置的样式</p> 使用style属性设置CSS样式仅对当前的HTML标签起作为，并且是写在HTML标签中的 这种方式不能起到内容与表现相分离，本质上没有体现出CSS的优势，因此不推荐使用。
- 内部样式表 CSS代码写在 <head> 的 <style> 标签中 <style> h1{color: green; } </style> 优点：方便在同页面中修改样式 缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底 引出外部样式表
- 外部样式表 CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表，有两种方式
- 链接式（使用的最多,记住这个就可以了） 使用 标签链接外部样式表，并讲解各参数的含义， 标签必须放在 标签中
在这里插入图片描述
- 导入式 使用@import导入外部样式表
在这里插入图片描述
链接式与导入式的区别
- 标签是属于XHTML范畴的，@import是属于CSS2.1中特有的。
- 使用 链接的CSS是客户端浏览网页时先将外部CSS文件加载到网页当中，然后再进行编译显示，所以这种情况下显示出来的网页与用户预期的效果一样，即使网速再慢也一样的效果。
- 使用@import导入的CSS文件，客户端在浏览网页时是先将HTML结构呈现出来，再把外部CSS文件加载到网页当中，当然最终的效果也与使用 链接文件效果一样，只是当网速较慢时会先显示没有CSS统一布局的HTML网页，这样就会给用户很不好的感觉。这个也是现在目前大多少网站采用链接外部样式表的主要原因。
- 由于@import是属于CSS2.1中特有的，因此对于不兼容CSS2.1的浏览器来说就是无效的。
CSS样式优先级
【学员练习】 使用标题标签和段落标签制作李白的诗《望庐山瀑布》，诗正文字体颜色为绿色，字体大小为14p
在这里插入图片描述
- 标签选择器 HTML标签作为标签选择器的名称 <h1>…<h6>、<p>、<img/>
在这里插入图片描述
- 类选择器 一些特殊的实现效果，单纯使用标签选择器不能实现，从而引出类选择器
在这里插入图片描述
- ID选择器 ID选择器的名称就是HTML中标签的ID名称，ID全局唯一
在这里插入图片描述
小结
- 标签选择器直接应用于HTML标签
- 类选择器可在页面中多次使用
- ID选择器在同一个页面中只能使用一次
基本选择器的优先级
标签选择器是否也遵循“就近原则”？ 不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级
在这里插入图片描述
- 后代选择器 body p{ background: red; }
在这里插入图片描述
后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入
- 子选择器 body>p{ background: pink; }
在这里插入图片描述
- 相邻兄弟选择器 .active+p { background: green; }
在这里插入图片描述
- 通用兄弟选择器 .active~p{ background: yellow; }
添加图片注释，不超过 140 字（可选）
在这里插入图片描述
标红的重点强调下，其他的可以略讲
在这里插入图片描述
在这里插入图片描述
小结
- 使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
- E F:nth-child(n)在父级里从一个元素开始查找，不分类型
- E F:nth-of-type(n)在父级里先看类型，再看位置
在这里插入图片描述
E[attr]属性选择器
在这里插入图片描述
E[attr=val]属性选择器
在这里插入图片描述
E[attr*=val]属性选择器
在这里插入图片描述
E[attr^=val]属性选择器
在这里插入图片描述
E[attr$=val]属性选择器
在这里插入图片描述
添加图片注释，不超过 140 字（可选）
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
