元素语义化就是用正确的元素做正确的事情。虽然在理论上,所以的html元素都可以通过css样式实现相同的事情,但是这么做会使事情复杂化,所以我们需要元素语义化来降低复杂度。
元素语义化在我们实际的开发中有很多好处,比如:
SEO就是搜索引擎优化(Search Engine Optimization),SEO通过了解搜索引擎的运行规则来调整网站,以提高网站的曝光度,以及网站的排名。
Google 搜索引擎的工作流程主要分为三个阶段:
抓取:Google 会使用名为“抓取工具”的自动程序搜索网络,以查找新网页或更新后的网页。Google 会将这些网页的地址(即网址)存储在一个大型列表中,以便日后查看。我们会通过许多不同的方法查找网页,但主要方法是跟踪我们已知的网页中的链接。
编入索引:Google 会访问它通过抓取得知的网页,并会尝试分析每个网页的主题。Google 会分析网页中的内容、图片和视频文件,尝试了解网页的主题。这些信息存储在 Google 索引中,而 Google 索引是一个存储在海量计算机中的巨大数据库。
呈现搜索结果:当用户在 Google 上进行搜索时,Google 会尝试确定最优质的搜索结果。“最佳”结果取决于许多因素,包括用户的位置、语言、设备(桌面设备或手机)以及先前用过的搜索查询。例如,在用户搜索“自行车维修店”后,Google 向巴黎用户显示的答案与向香港用户显示的答案有所不同。支付费用不能提高网页在 Google 搜索结果中的排名,网页排名是完全依靠算法完成的。
计算机只认识0和1,但我们各个国家的人都需要在计算机上使用各自的文字,为了在计算机上也能表示、存储和处理像文字、符号等等之类的字符,就必须将这些字符转换成二进制。
于是就出现了字符编码,字符编码将我们的自然语言编码成二进制给计算机看,然后再把这些二进制解码为自然语言给我们看。
css有三种常用的编写方式,分别是内联样式、内部样式表和外部样式表
最常见的css样式有:
根据之前学习的HTML元素和CSS样式找2个案例练习
1.颜色关键字:, 例如, red, yellow 等
2.RGB有三种表示方式:
所有颜色都是由三原色R(red)G(green)B(blue)组成,也就是通过调整这三个颜色不同的比例组合成其他的颜色,RGB各个原色的取值是0~255。
务必下载!! 今日的代码和讲义 以及思维导图:【点击此链接下载 Day04.zip】
text-decoration
用于设置文字的装饰线
decoration
是装饰/装饰品的意思;text-decoration
有如下常见取值:
none
:无任何装饰线a元素
默认的下划线underline
:下划线overline
:上划线line-through
:中划线(删除线)◼ a元素有下划线的本质是被添加了 text-decoration
属性
text-transform
用于设置文字的大小写转换Transform
单词是使变形/变换(形变);text-transform
有几个常见的值:capitalize
:(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写uppercase
:(大写字母)将每个单词的所有字符变为大写 lowercase
:(小写字母)将每个单词的所有字符变为小写none
:没有任何影响◼ 实际开发中用 JavaScript代码转化的更多.
text-indent
用于设置第一行内容的缩进text-indent: 2em;
刚好是缩进2个文字text-align
: 直接翻译过来设置文本的对齐方式 ;MDN
:定义行内内容(例如文字)如何相对它的块父元素对齐;left
:左对齐right
:右对齐center
:正中间显示justify
:两端对齐letter-spacing
、word-spacing
分别用于设置字母、单词之间的间距20px
; 2em
; 200%
font-size
决定文字的大小
100px
单位
(不推荐):1em代表100%,2em代表200%,0.5em代表50%font-family
用于设置@font-face
指定的可以直接下载的字体。100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
:每一个数字表示一个重量 normal :等于
400`bold :等于
700`strong
、b
、h1~h6
等标签的 font-weight
默认就是boldfont-style
用于设置文字的常规、斜体显示normal
:常规显示italic
(斜体):用字体的斜体显示(通常会有专门的字体)oblique
(倾斜):文本倾斜显示(仅仅是让文字倾斜)em
、i
、cite
、address
、var
、dfn
等元素的 font-style
默认就是 italic
font-variant
可以影响小写字母的显示形式
variant
是变形的意思;normal
:常规显示small-caps
:将小写字母替换为缩小过的大写字母line-height
用于设置文本的行高两行文字基线(baseline)之间的间距
与小写字母x最底部对齐的线
height
和 line-height
的区别height
:元素的整体高度line-height
:元素中每一行文字所占据的高度div
中只有一行文字,如何让这行文字在div内部垂直居中line-height
等同于 height
font
是一个缩写属性font
属性可以用来作为 font-style
, font-variant
, font-weight
, font-size
, line-height
和 font-family
属性的简写; font-style
font-variant
font-weight
font-size/line-height
font-family
font-style
、font-variant
、font-weight
可以随意调换顺序,也可以省略line-height
可以省略,如果不省略,必须跟在 font-size
后面font-size
、font-family
不可以调换顺序,不可以省略// 选择器部分上午我听完再更新 太困了
>
符号