html基础语言

发表于 | 分类于 ， ， |
字数统计: | 阅读时长 ≈

一些基本的HTML语法以及CSS语法

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<!--表示使用的网页为html的格式,不是html的标签，而是文档的声明标签-->
<html lang="zh-CN">
<!--都可以写中文和英文 zh-CN / en-->

<head>
    <meta charset="UTF-8">
    <!--UTF-8 万国码 不写就会显示乱码的情况-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能财务创新首页</title>
</head>

<body>
    <h1></h1>
</body>

</html>
<!--
strong或者b可以加粗      更推荐strong
em或者i可以倾斜          更推荐em
del或者s都可以加删除线   更推荐del
ins或者u都可以加下划线   更推荐ins


盒子区域
div 是大盒子，单独占一行
span是小盒子，一行可以有很多个

<img src = "XXX.jpg" alt = "我叫智能财务网页" title = "我是最棒的智能财务网页" width = "500"/> 
该语句块中width即为图像的宽度  height即为图像的高度， 如果两个量只写了一个那么就是按比例缩放， 上述代码即是按宽度等比例缩放
除此之外还有border属性，用于设置图像的边框粗细默认为黑色
编写的时候没有前后顺序，但是每个属性前面都要加上空格
格式为：key = "value"。
alt为替换功能，当图像显示不出来的时候会显示alt中的内容
title是提示功能，鼠标放上去即可在右下方显示出来


相对路径
    同一级的路径
/   下一个路径 示例：images/img.jpg 表示的就是在images文件夹下一级内部的img.jpg文件
../ 上一级路径

<a>可以定义超链接
<a href = "跳转目标" target = "目标窗口的弹出方式">文本或图像</a>

href 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能。（有a就有href）
其中如果说地址还没有想好那么就可以选择用#来暂时性输入，表示空链接，页面中显示的样例也会不一样的
如果睡哦href里面的地址是一个文件或者压缩包，那么就会直接下载这个文件

target 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

锚点链接的实现(网页内部的跳转)
href里面必须带有# 例：href = "#live"
与之对应的为id = ""
其中需要注意的是id必须加载标签里面；例如：<h3 id = "live">作品</h3>

&nbsp;这整一个表示一个空格
%lt;表示小于号
%gt;表示大鱼号
&amp;和号
&yen;人名币符号
&copy;版权符号
&reg;注册商标符号
%deg;摄氏度℃
%plusmm;正负号
%times;乘号
%divide;除号
%sup2;2次方
%sup3:3次方


表格标签

<table>用于定义表格的标签
    <tr> 标签用于定义表格中的行，必须嵌套在<table></table>标签中
        <th>单元格内的文字</th> <th>单元格内的文字</th> <th>单元格内的文字</th>
        <td>单元格内的文字</td> <td>单元格内的文字</td><td>单元格内的文字</td> 
        用于定义表格中的单元格，必须嵌套在<tr></tr>标签中（指表格数据，也就是单元格的内容）
    </tr>
</table>
th为表头单元格标签，剩余的可以用td来显示数据
一般情况加th作为表头单元格会加粗


border 表示的是边框，默认为 "",表示没有边框 可以填写1
cellpadding 像素值  规定单元边沿与其内容之间的空白，默认1像素。（主要指的是内容）
cellspacing 像素值  规定单元格之间的空白，默认2像素。（单元格和单元格之间的空白距离 为0即为没有空隙）
width       像素值或者百分比  规定表格的宽度。
height      (同理)表示高度     （width 和 height 如果单单改变其中一个部分的内容的时候，那么会整体一起发生改变。）

标签内部加入 align = "center" 可以使得该部分变成居中的设计
除此之外还有left和right分别表示左右的对齐

<thead></thead> 表格头区域
<tbody></tbody> 表格主体区域
（但是上述的两个只能放在<table></table>里面）

合并单元格方式
rowspan 跨行合并单元格
colspan 跨列合并单元格
（后续加入= "合并单元格个数"）

<ul>无序列表 //里面只能放li标签，什么其他什么都不行 显示的时候会自动在前面加上一个' · '符号
    中间可以加入<li>列表项</li> //li里面放什么都可以
<\ul>

<ol>有序列表，结果会自己加上一些小序号
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ol>

<dl>自定义列表，结果上下会有一定的小分隔，其中dd部分前面会有空格部分
   <dt>自定义列表的第一行</dt>
   <dd>自定义列表后面的小窗口</dd>
</dl>


表单的格式
<form action = "dempo.php" method = "POST" name = "name1"> oiiio09 
</form>

<label>
</lable>

<form>
<select>
    <option>选项一</option>
    <option selected = "selected">选项二</option>   //表示先显示的是选项二
</select>
</form>


<style> 必须写在head中

    p {
        color : red; 
        font-size : 15px; 
    }
    表示对p格式的内容进行修改样式
    表示修改颜色
    表示修改字体大小
</style>



选择器部分！！！

基础选择器
类选择器
id选择器
通配符选择器

-->

CSS

背景属性

1
2
3
4
5
6
7
8
9
10
11
background-color: #FFFFFF;
/*背景颜色*/
background-image: url();
/*背景图片*/
background-repeat: no-repeat;
/*背景图片重复 
repeat 默认。背景图像将在垂直方向和水平方向上重复
repeat-x 背景图片将在水平方向上重复
repeat-y 背景图片将在垂直方向上重复
no-repeat 背景图像只显示一次 
inherit 规定应该从父元素继承 background-repeat属性的设置*/

边界样式

1
2
3
4
5
6
7
8
margin-top:10px;
/*上边界值*/
margin-right: 10px;
/*右边界值*/
margin-bottom: 10px;
/*下边界值*/
margin-left: 10px;
/*左边界值*/