[笔记]html+css基础知识
1. html标签
单标签
-
<br/>:换行用 -
<meta/>:存字符编码，作者，版权，关键字，网页说明等信息，不显示在浏览器中
a. 比如：<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/> -
<hr/>：插入一条水平线，两个标签表示插入两条 -
<img/>:插入图片
a.src是图像存储url或名字，alt是图像的预备替换文本；比如：<img src="1.png" width="100px" heigh="200px" alt="当显示不出来图像时就显示这句文本">
成对标签
-
<html></html>:html文档 -
<style></style>:存CSS风格样式
a. 放在head内或者body内（body内用于设置单个标签的属性，如<p style="...">xxx</p>）都行 -
<link></link>:链接外部样式表 -
<script></script>:存客户端脚本，如javascript脚本 -
<head></head>:头 -
<body></body>：内容 -
<p></p>：文本段落大小
a. p加id或class成为css的定位点 -
<title></title>:标题 -
<a></a>：放超链接，锚点 -
<h1></h1>：标题大小 -
<ul></ul>:无序标签 -
<ol></ol>:有序列表 -
<li></li>:列表中的子列表 -
<div></div>：容器，什么都能装
a. div标签加id或class可以成为css代码的定位点 -
<table></table>：表格 -
<span></span>：行内元素标签
a. span和div的区别是：div只能一段一段的选择；span只能选择单个元素，如一个图，一个链接等等；不能将div标签放在span标签内。
文档类型
<!DOCTYPE>:位于文档最前端，不属于文档结构的一部分，但是它很重要，它定义的Strict（严格）/Transitional（过渡）/Frameset（框架）对网页甚至对CSS代码都有影响
内部样式表
<!--与-->：为了防止一些浏览器不支持css，把css代码当普通文本显示出来
a. 写在<head></head>中，用<style></style>声明
链接样式表
-
<link rel="stylesheet" type="text/css" href="外部样式表的path">：用来分离html文件和css文件，方便用一个css文件控制多个html文件；靠link标签导入，外部样式表后缀只能是.css；这段标签放在head内。 -
@import url(外部样式表的path)：和link的作用一样，只是引入方法不同，写法不一样
块元素和行内元素
-
块元素：
<div></div>，<hn></hn>，<p></p>，<from></from>，<ul></ul>，<li></li>等。 -
行内元素：
<span></span>，<a></a>，<img/>，<input/>等。 -
使用css为行内元素加上
display:block属性将其转换为块元素。
2. CSS常用设置
文字样式常用属性
-
font-family:设置字体
a. 宋体
b. 楷书
c. 隶书
d. ... -
font-size：设置字号 -
font-style:设置斜体
a.normal:正常显示
b.italic：斜体显示文字
c.oblique:比斜体更斜的斜体 -
font-weight:设置加粗
a.normal:正常粗细
b.bold:粗体
c.bolder:加粗体
d.lighter:细体
e.number:100-900共九个级别，数字越大字数越粗 -
color:设置颜色
a. rgb显示：rgb（255,0,0）
b. 十六进制数：#ff0000 -
font-variant:设置变体
a.normal:正常字母
b.small-caps:小型大写字母 -
font:组合设置字体属性
a. 比如p{font:italic bold small-caps 15pt 宋体}
段落和其他文字常用属性
-
元素的长度单位
a. 绝对长度：in(英寸)，cm(厘米)，mm(毫米)，pt(印刷点数)，pc(1pc=12pt)
b. 相对长度：px(像素)，%（字体默认大小的比例），em(字体元素的倍数) -
text-decoration:修饰文字
a.underline：添加下划线
b.overline：添加上划线
C.line-through:添加删除线
d.blink:添加文字闪烁效果，多数浏览器不支持
c.none:没有修饰文字，常用于取消超链接的下划线 -
text-transform:转换英文字母大小
a.capitalize:每个单词首字母大写
b.uppercase:所有字母大写
c.lowercase:所有字母小写
d.none:默认值 -
letter-spacing:设置中文字符间距
a.normal：正常
b.12px:设置绝对数值
c.2em:字体高 -
word-spacing：设置英文字符间距
a.normal：正常
b.12px:设置绝对数值
c.2em:字体高 -
text-align:设置段落的水平对齐方式
a.left:文本左对齐
b.right:文本右对齐
c.center:文本居中
d.justify:文本两端对齐 -
text-indent:设置段落缩进 -
line-height:设置行高
常用符号
| 符号 | html码 |
|---|---|
| " | " |
| ' | &qpos; |
| & | & |
| < | < |
| > | > |
| ￥ | ¥ |
| © | © |
| ® | ® |
| 空格 | |
列表样式常用属性
-
list-style-type:设置列表符号
a.disc:黑色圆点，默认设置
b.circle:空心圆圈
c.square:黑色正方形
d.decimal或l:数字
e.lower-roman或i:小写罗马文字
f.upper-roman或I:大写罗马文字
g.lower-latin或a：小写拉丁文
h.upper-latin或A：大写拉丁文
i.none:不显示任何符号 -
list-style-image:使用图片符号
a. 基本语法：list-style-image:url,用来将图片作为列表符号，从而美化列表。 -
list-style-position：调整列表位置
a.outside:默认值，列表符号不向内缩进
b.inside:列表符号向内缩进
图片样式常用属性
-
border-style：边框样式：属性自查 -
border-width:边框宽度：属性自查 -
border-color：边框颜色：属性自查 -
text-align:图片水平对齐：属性自查 -
vertical-align:图片垂直对齐：属性自查 -
float:right：图片居于文字右边 -
float:left:图片居于文字左边 -
background-color:设置图片颜色，有关键字，rgb,transparent -
设置背景图片
a.background-img:url:插入背景图
b.background-repeat:设置重复方式：repeat,repeat-x,repeat-y,no-repeat
c.background-position:设置图位置：属性自查
d.background-attachment:固定背景图：属性自查 -
图片背景样式综合设置：
a. 如background:red url(p1.png) no-repeat fixed 5px 10px
3. html整体框架
<html>
<head>
<title>XXX</title>
/*link或者@二选一*/
<link rel="stylesheet" type="text/css" href="外部样式表的path">
@import url(外部样式表的path)
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
<style type="text/css">
/*内部样式表*/
<!--
selector1{property:value;}
selector2{property:value;}
selector3{property:value;}
...
-->
/*选择器及选择器格式：property:value;*/
/*标签选择器*/
/*类选择器*/
/*id选择器*/
/*嵌套选择器*/
/*通用选择器*/
/*集体选择器*/
/*选择器优先级：行内样式表>内嵌样式表>链接样式表>导入样式表*/
body{
font-size:14px;
background:#ffe5e5;
}
h1{
text-align:center;
font-size:42px;
color:#9d3151;
}
#link1{/*id=link1的div容器css风格*/
text-align:center;
}
#link1 a{/*id=link1的div容器中的<a>标签的css风格*/
text-align:center;
}
#bg img{/*id=bg的div容器中的img图片css风格（文字环绕）*/
float:left;
margin:10px;
}
.p1{/*class等于p1的css风格，类名前要加"."*/
text-align:center;
font-size:42px;
color:#9d3151;
}
*{/* "*"表示通配符 */
text-align:center;
font-size:42px;
color:#9d3151;
}
h1，h2,h3,h4,h5{/*集体选择*/
text-align:center;
font-size:42px;
color:#9d3151;
}
</style>
<body>
</body>
</head>
</html>
