【笔记】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码
“ &quot;
‘ &qpos;
& &amp;
< &lt;
> &gt;
￥ &yen;
© &copy;
® &reg;
空格 &nbsp;

列表样式常用属性

  • 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整体框架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<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>
Front-end application > basic notes
#html #css
【笔记】html+css基础知识
http://example.com/2024/07/21/[笔记]html+css基础知识/
作者
xiao cuncun
发布于
2024年7月21日
许可协议