本人作为在校生,接触HTML没有多久,此前在慕课网上看过HTML/CSS的教程,但从未系统的学习过,经同学的推荐,才知道了百度前端学院, 开启了歪歪扭扭的学习之旅。
正文:
一、细节要点
1.开始编辑一个网页时最基本的框架,虽然这段代码大多数的IDE工具都能自动的生成,但对初学者来说建议还是自己打一下吧
< !DOCTYPE>声明不是HTML标签;它指示web浏览器关于页面使用哪个HTML版本进行编码的指令
在HTML 4.01中< !DOCTYPE>声明引用DTD,因为HTML 4.01基于SGML。
DTD规定了标记语言的规则,这样浏览器可以正确地呈现内容。
HTML5不基于SGML,所以不需要引用DTD <<span class="hljs-name" style="box-sizing: border-box;">html> <<span class="hljs-name" style="box-sizing: border-box;">head>
<<span class="hljs-name" style="box-sizing: border-box;">meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <<span class="hljs-name" style="box-sizing: border-box;">title>网页标题</<span class="hljs-name" style="box-sizing: border-box;">title> </<span class="hljs-name" style="box-sizing: border-box;">head> <<span class="hljs-name" style="box-sizing: border-box;">body> </<span class="hljs-name" style="box-sizing: border-box;">body> </<span class="hljs-name" style="box-sizing: border-box;">html>
2.空格,在html中输入空格是没有作用的,需要输入
这个代码
3..下拉选择框或复选框,.下拉选择框selected="selected"设置默认选中,复选框checked="checked"设置默认选中
<<span class="hljs-name" style="box-sizing: border-box;">select> <<span class="hljs-name" style="box-sizing: border-box;">option>
北京</<span class="hljs-name" style="box-sizing: border-box;">option> <<span class="hljs-name" style="box-sizing: border-box;">option>杭州</<span class="hljs-name" style="box-sizing: border-box;">option> <<span class="hljs-name" style="box-sizing: border-box;">option selected="selected">上海</<span class="hljs-name" style="box-sizing: border-box;">option> </<span class="hljs-name" style="box-sizing: border-box;">select>
`
`
4.td标签中的colspan属性设置单元格合并
二、语义化标签
以下标签语义化的表示章节结构,在HTML5之前都是用div标签进行分隔
header 页面头部/标题/logo/搜索表单 等等
nav 任何有导航性质的标签都可以用到,比如页面中的导航,可以有多个
aside 和主要内容不相关的内容,工具内容/广告什么的
article 表示独立的可重复的结构:论坛的帖子/博客的评论
section 表示文档中的一个区域:一般会带一个标题 相临的section之间是有相关性的,article则不相关,是独立的
footer 章节的尾部:版权信息/相关文档/一些独立内容的尾部也可以用到
2.img标签与div层之间会有空隙
解决方法:使用display:block就可以消除
3.优先级问题:
1.ID>Class>HTML
2.同级时选择离元素最近的一个
例如:
#p{color:red;}
#p{color:blue;}
执行颜色为blue的
三、CSS的常见属性(CSS选择器):
1.颜色属性:
color属性定义文本颜色。
color:green
color:#ff6660 简写式 color:#f60
color:rgb(255,255,255)——r,g,b每个颜色的取值范围0~255
color:rgba(255,255,255,1)——r,g,b还是三原色,a表示Alpha的(色彩空间)透明度
2.字体属性:
1.font-size字体大小:
px:设置一个固定的值
%:父元素的百分比
smaller:比父元素更小
larger:比父元素更大
inherit:继承父元素
2.font-family定义字体:
font-family:'微软雅黑','serif';
可以使用","隔开,来确保当字体不存在的时候直接使用下一个。
3.font-weight字体加粗:
normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)
400 = normal,而 700 = bold
如果用数字表示取值范围是100~900,且必须是整百数,401之类,是绝对不可以的。
4.font-style字体样式:
normal:正常(标准)
italic:斜体
oblique:倾斜
inherit:继承
5.font-variant小型大写字母显示文本:
主要针对英文,如果选择small-caps就代表着英文字母会大写显示
normal:标准
small-caps:小型大写字母显示文本
inherit:继承
3.背景属性:
1.背景颜色 background-color
2.背景图片 background-image
background-image:url(图片路径)
background-image:none
3.背景重复background-repeat
repeat:重复铺满
repeat-x:向X轴重复
repeat-y:向Y轴重复
no-repeat:无重复
4.背景位置background-position
横向(left,center,right)
纵向(top,center,bottom)
可以用数值来表式位置
5.简写方式
background:背景颜色 url(图像) 重复 位置
background:#f60 url(beautiful.jpg) no-repeat top center
4.文本属性:
1.text-align 横向排列
left,center,right
2.line-height 文本行高
% 基于字体大小的百分比行高
数值 来设置固定值
3.text-indent 首行缩进
% 父元素的百分比
px固定值,默认为0
inherit 继承
4.letter-spacing 字符间距
normal 默认值
px 设置具体的数值(可以设置负值)
inherit 继承
5.word-spacing 单词间距
normal 标准间距
px 设置固定的值
inherit 继承
6.direction 文本方向
ltr 从左到右,默认值
rtl 从右到左
inherit 继承
7.text-transform 文本大小写
capitalize 每个单词以大写字母开头
uppercase 定义仅有大写字母
lowercase 定义无大写字母,仅有小写字母
inherit 规定应该从父元素继承 text-transform 属性的值
5.边框属性:
1.边框风格 border-style
统一风格:(简写风格)border-style
单独定义某一方向的边框样式:
border-top-style border-bottom-style
border-left-style border-right-style
边框风格样式的属性值:
- none 无边框
- solid 直线边框
- dashed 虚线边框
- dotted 点状边框
- double 双线边框
- groove 凸槽边框
- ridge 垄状边框
- inset inset边框
- outset outset边框
- inherit 继承
其中,6~9依托于border-color的属性值(用的比较少)
2.边框宽度 border-width
- thin 细边框
- medium 中等边框
- thick 粗边框
- px 固定值的边框
- inherit 继承
3.边框颜色 border-color
1.统一风格:border-color
2.单独风格:
border-top-color border-bottom-color
border-left-color border-right-color
3.属性值:RBG、RGBA、十六位进制、inherit
4.属性值的四种情况:
一个值(border-color [上、下、左、右])
两个值(border-color [上、下] [左、右])
三个值(border-color [上] [左、右] [下])
四个值(border-color [上] [右] [下] [左])
4.简写方式
border: solid 2px #f60
6.列表属性:
1.标记类型 list-style-type
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)
2.标记的位置 list-style-position
inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
inherit 规定应该从父元素继承 list-style-position 属性的值。
3.设置图像列表标记 list-style-image
URL 图像的路径。
none 默认。无图形被显示。
inherit 规定应该从父元素继承 list-style-image 属性的值。
4.简写方式 list-style
list-style:square inside url('/i/arrow.jpg')
四、DIV+CSS布局
1.div和span
div和span在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式.
div和span的区别在于,span是内联元素,div是块级元素
2.盒模型
margin: 盒子外边距
padding: 盒子内边距
border: 盒子边框宽度
width: 盒子宽度
height: 盒子高度
3.布局相关的属性
1.position定位方式
1.relative 正常定位
2.absolute 根据父元素进行定位
3.fixed 根据浏览器窗口进行定位
4.static 没有定位
5.inherit 继承
2.定位
left、right、top、bottom 离页面顶点的距离
3.z-index 层覆盖先后顺序(优先级)
4.display显示属性
display:none 该层不显示
display:block 块状显示,在元素后面换行,显示下一个块元素(block会尽可能的占据更多的width)
display:inline 内联显示,多个块可以显示在一行内(只占据它需要的width)
5.float浮动属性
left 左浮动
right 右浮动
6.clear清除浮动
clear:both
7.overflow溢出处理(主要是盒子小了,内容多了)
hidden 隐藏超出层大小的内容
scroll 无论内容是否超出大小都添加滚动条
auto 超出时自动添加滚动条
8.box-sizing设定盒模型的类型
通常,当我们定义一个div的时候,我们给出的width和height其实仅仅只是盒子的content的宽和长。
padding和border会另外加上。
比如:
div {
width:300px;
height:300px;
padding:10px;
border:10px;
}
此时的盒模型将会是320x320的大小,并不是我们希望的300x300
为了避免这样情况的发生,我们会使用
- {
box-sizing:border-box;
}
这时候,我们同样使用如下代码,
div {
width:300px;
height:300px;
padding:10px;
border:10px;
}
此时的盒模型,大小依旧是300x300,content只有260x260 - 五、细节要点
-
1、每写完一句要想换行每次都要加一个换行标签< br/>比较麻烦,而预格式文本(所谓预格式文本就是指代码页和网页展示是一样的格式,不用额外添加换行符标签就能换行)< pre>....< /pre>标签的使用把后面的换行符都删掉,将其内容丢到<pre>标签中,就可以得到与之前差不多的格式。
-
2、.定义性列表
定义列表通常用于术语的定义和解释。定义列表由< dl>开始,术语由< dt>开始,解释说明由< dd>开始,< dd>....< /dd>里的文字缩进显示
-