-
html和css语法记录
前言
本文主要对学习前端知识的一些记录，如html、css的格式、API、用法等的记录，为方便理解与记忆会实现一些案例。
一、HTML
html相当于页面的骨架。
1.标签
（1）注释：
（2）标题：h1 h2 h3 h4 h5 h6（h1最大）
（3）段落：p
（4）换行：br （单标签）
（5）格式化标签（行内元素）
加粗：strong / b
倾斜：em / i
删除线：del / s
下划线：ins / u
（6）图片：img （单标签），其中src属性指定图片的路径（绝对路径、相对路径、网络路径），width与height设定图片大小（单位px为像素），alt显示图片挂了设置的文字。<img src="" alt="">- 1
（7）超链接：a
<a href=""></a>- 1
（8）表格标签
table：表示整个表格
tr：表示行；
td：表示表中的一个单元；
th：表示表头；<table border="2px" width="500px" height="300px" cellspacing="0"> <tr> <th>课程</th> <th>成绩</th> </tr> <tr> <td>数据库</td> <td>99</td> </tr> <tr> <td>JAVA</td> <td>90</td> </tr> </table>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
（9）列表标签
有序列表标签：ol
无序列表标签：ul
列表项：li
自定义列表标签：dl dt（列表头）
（10）表单标签（为了和用户交互）
form标签：进行前后端交互，功能是构造一个HTTP请求。
input标签：有很多形态，这些形态表示不同的效果。<input type="text"> <input type="password"> <!--单选框（radio）单选框需要设置相同的属性name才会有互斥效果 checked可以设置默认选项 通过设置id使用lable将for中的选项也设置为可以点击它选上--> <!--radio name不同则具有互斥性--> <input type="radio" name="" id="" checked=""> <lable for=""></lable> <!-- 复选框（checkbox）可以选择多个 --> <input type="" name="" checked=""> <!-- button按钮 搭配js使用 --> <input type="button" value="这是一个按钮" onclick="alert('hello')"> <!-- 提交按钮 搭配form表单使用 --> <input type="submit" value="这是一个提交按钮"> <!-- 文件选择框 --> <input type="file">- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
（11）select下拉菜单，里面的option为选择,selected为默认选中。
<select> <option>北京</option> <option>深圳</option> <option selected="selected">上海 </option> <option>广州</option> <option>其他</option> </select>- 1
- 2
- 3
- 4
- 5
- 6
- 7
（12）多行编辑框textare，可以多行文本框，而input只能写一行。
<textarea cols="30" rows="10"></textarea>- 1
（13）无语义标签
div：默认是独占一行的块级元素；
span：默认是不独占一行的行内元素。
这两个搭配css和js就可以实现刚才语义化标签的大部分。2.简历页面实现
代码如下（示例）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>某某某</h1> <h2>基本信息</h2> <p> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.doubanio.com%2Fview%2Fgroup_topic%2Fraw%2Fpublic%2Fp324978774.jpg&refer=http%3A%2F%2Fimg9.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669211206&t=81347a13c3ce1d01656af3db71d1e73f" alt="" width="500px" height="300px"> </p> <div>求职意向：Java开发工程师</div> <p>联系电话：12345678912</p> <p>邮箱：xxx@qq.com</p> <div> <a href="http://github.com">我的github</a> </div> <div> <a href="https://blog.csdn.net/qq_45283185?type=blog">我的博客</a> </div> <h2>教育背景</h2> <ol> <li>xxxx-xxxx 某某小学 小学</li> <li>xxxx-xxxx 某某中学 初中</li> <li>xxxx-xxxx 某某中学 高中</li> <li>xxxx-xxxx 某某大学 计算机专业 本科</li> </ol> <h2>专业技能</h2> <ul> <li>Java基础语法扎实</li> <li>数据结构可以独立实现并熟练应用</li> <li>熟练应用mysql相关sql语句</li> <li>熟知多线程、网络相关知识</li> </ul> <h2>我的项目</h2> <ol> <li> <h3>留言墙</h3> <p>开发时间：2022年11月到2022年12月</p> <p>功能介绍：</p> <ul> <li>支持留言发布</li> <li>支持匿名留言</li> </ul> </li> <li> <h3>学习小助手</h3> <p>开发时间：2022年9月到2022年11月</p> <p>功能介绍：</p> <ul> <li>支持错题检索</li> <li>支持同学探讨</li> </ul> </li> </ol> <h2>个人评价</h2> <p>在校期间，学习成绩优异。</p> </body> </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
3.填写简历页面实现
代码如下（示例）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="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> <h2>请填写简历信息</h2> <table> <tr> <td>姓名</td> <td> <input type="text"> </td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="gender" id="male"> <label for="male"> <img src="D:\pCode\Front\html\男.png" height="15px" alt="">男 </label> <input type="radio" name="gender" id="female"> <label for="female"> <img src="D:\pCode\Front\html\女.png" height="15px" alt="">女 </label> </td> </tr> <tr> <td>出生日期</td> <td> <select> <option>--请选择年份--</option> <option>1990</option> <option>1991</option> <option>1992</option> <option>1993</option> <option>1994</option> </select> <select> <option>--请选择月份--</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> </select> <select> <option>--请选择日期--</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> <option>13</option> <option>14</option> <option>15</option> <option>16</option> <option>17</option> <option>18</option> <option>19</option> <option>20</option> <option>21</option> <option>22</option> <option>23</option> <option>24</option> <option>25</option> <option>26</option> <option>27</option> <option>28</option> <option>29</option> <option>30</option> <option>31</option> </select> </td> </tr> <tr> <td>就读学校</td> <td> <input type="text"> </td> </tr> <tr> <td>应聘岗位</td> <td> <input type="checkbox" id="front"> <label for="front">前端开发</label> <input type="checkbox" id="front_end"> <label for="front_end">后端开发</label> <input type="checkbox" id="text"> <label for="text">测试开发</label> <input type="checkbox" id="depOps"> <label for="depOps">运维开发</label> </td> </tr> <tr> <td>掌握技能</td> <td> <textarea cols="30" rows="10"></textarea> </td> </tr> <tr> <td>项目经历</td> <td> <textarea cols="30" rows="10"></textarea> </td> </tr> <tr> <td></td> <td> <input type="checkbox" id="check"> <label for="check">我已仔细阅读过公司的招聘要求</label> </td> </tr> <tr> <td></td> <td> <a href="https://blog.csdn.net/qq_45283185?spm=1011.2415.3001.5343">查看我的状态</a> </td> </tr> <tr> <td></td> <td> <h3>请应聘者确认</h3> <ul> <li>以上信息真实有效</li> <li>能够尽早去公司实习</li> <li>能接受公司的加班文化</li> </ul> </td> </tr> </table> </body> </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
二、CSS
css相当于给页面化妆。
1.语法规则
（1）css引入方式
a.内部样式
css可以嵌入到html里面，使用style标签放在里面。
如下代码里的div部分为选择器，针对页面上的哪个元素生效，css具体设置的属性通过使用键值对，若干属性都放在{}里，属性之间用;来分割，键值对之间用:分割。<style> div { color: red; } </style>- 1
- 2
- 3
- 4
- 5
b.内联样式
<div style="color: red"> 这是内联样式 </div>- 1
- 2
- 3
c.外部样式
代码如下（示例）：<head> <!-- link标签 引入.css文件 注入html --> <link rel="stylesheet" href="test.css"> </head> <body> <!-- 写一个.css 使用link标签注入html --> <div> 这是外部样式 </div> </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
（2）css选择器
选择器描述了你要选择页面中的哪些元素， {}的样式针对这些元素生效。
a.标签选择器
div、p是选择的元素，{}的样式针对这些元素生效。
代码如下（示例）：<style> div { color: red; font-size: 40px; } p { color: green; font-size: 50px; } </style> <div>div标签选择器1</div> <div>div标签选择器2</div> <p>p标签选择器</p>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
b.类选择器
这里的类与Java的面向对象的类不一样，只是一个名字。
其中.one表示css的类名，引入的时候不用‘.’；类选择器允许多个元素引入同一个类。
代码如下（示例）：<style> .one { color: green; } </style> <div>类选择器1</div> <div class="one">类选择器2</div> <div>类选择器3</div> <p class="one">类选择器</p>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
c.id选择器
每个元素都有一个id属性，值应该要在页面中是唯一的，使用id选择器来选中到对应的元素上。代码如下（示例）：
<style> #the-one { color: red; } #the-two { color: green; } </style> <p id='the-one'>id选择器1</p> <p id='the-two'>id选择器2</p>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
d.通配符选择器
代码如下（示例）：<style> * { } </style>- 1
- 2
- 3
- 4
- 5
d.复合选择器
后代选择器：在指定的元素里面选择要选择的元素。
子选择器（a>b）：只对a的孩子b有效。
并集选择器
代码如下（示例）：<!-- <style> <!-- a.后代选择器:在指定的元素里面选择要选择元素 --> ul li { color: green; } <!-- b.子选择器 只对孩子生效 --> ol>li { color: red; } <!-- c.并集选择器--> div,p { color: green; font-size: 40px; } </style> <ul> <li>后代1 <div>孙孙</div> </li> <li>后代2</li> </ul> <ol> <li>后代3 <p>孙子</p> </li> <li>后代3</li> </ol> --> <div> 并集选择器 </div> <p> 并集选择器 </p> -->- 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
e.伪类选择器
hover：表示鼠标放上去变化；
active：表示鼠标点一下变化。
代码如下（示例）：<style> div { color: red; font-size: 100px; } /* 鼠标放上去变色 */ div:hover { color: chartreuse; font-size: 50px; } /* 鼠标点一下变色 */ div:active { color: plum; font: size 150px;; } button { color: black; } button:hover { color: cyan; } button:active { color: pink; } </style> <div>伪类选择器</div> <button>按钮</button><span>按一下变色</span>- 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
css里面还有很多选择器，这里介绍了一些常用的。（3）常用属性
a.指定字体名称：font-family
b.字体粗细程度:font-weight
c.字体颜色:color
设置颜色有三种方式：英文red、green；rgb(r,g,b,a):分别为红绿蓝以及a代表透明度；十六进制表示#fff。
d.文字的位置：text-align
e.文字的装饰（给文字加上下划线、上划线、删除线）:text-decoration
e.文字的缩进：text-indent
f.行高（文字+行间距）：line-height
g.有关于背景
背景颜色：background-color
背景图片：background-image
背景平铺：background-repeat（repeat、no-repeat、repeat-x、repeat-y）
背景位置：background-position（可以用center、left、right、top、bottom表示位置，也可以用坐标或者百分比）
背景大小：background-size（length、percentage、cover、contain）
代码如下（示例）：<style> div { font-family: "微软雅黑"; font-weight: 800; background-color: black; color: paleturquoise; text-align: center; } h1 { font-family: "楷体"; font-weight: normal; background-color: rgb(136, 168, 173); color: #f121f1; text-align: left; } p { font-family: "幼圆"; font-weight: 1000; background-color: #f121f2; color: rgb(0,255,128); text-align: center; } </style> <div>字体 字体 字体</div> <h1>这是一级标题</h1> <p>颜色 颜色</p>- 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
h.关于圆角矩形
border可以设置周线的样式、粗细和颜色；
border-radius（值越大，弧线越强烈）；
四周的弧度也可以设置，如下：
boeder-top-left-radius
boeder-top-right-radius
boeder-bottom-right-radius
boeder-bottom-left-radius
代码如下（示例）：<style> button { width: 200px; height: 200px; background-color: turquoise; border:2px solid black; border-radius: 50%; } </style> <button>按钮</button>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
i.元素的显示模式
display属性可以针对行内/块级元素相互转换；也可以让元素隐藏。
j.内边距：padding
k.外边距：margin
l.弹性布局
display:flex，控制盒子的位置和排列方式。
justify-content，设置主轴上的子元素排列方式。
align-items，设置侧轴上的元素排列方式。
代码如下（示例）：<style> /* 消除浏览器自带格式 */ * { padding: 0; margin: 0; } div { width: 300px; height: 400px; background-color: pink; background-image: url(./QQ图片.jpg); background-size: 100px 200px; background-repeat: no-repeat; background-position: center; display: flex; /* justify-content: center; */ justify-content: space-around; /* justify-content: flex-start; justify-content: flex-end; */ /* 实现垂直居中 */ align-items: center; } div>span { width: 10px; height: 100px; background-color:tomato; line-height: 100px; } </style> <div> <span>1</span> <span>2</span> <span>3</span> </div>- 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
这里只是记录了一些html、css常用的标签，其他的还有很多。 -
相关阅读:
Java培训：自定义代码生成器
【Python常用函数】一文让你彻底掌握Python中的enumerate函数
05-java数据结构之递归的详细介绍与学习
Jetpack：005-文本组件的扩展
ApplicationEvent
华为云 存在不支持迁移的外键解决方法
C# 第五章『面向对象』◆第9节：抽象类和密封类
设计原则之显式依赖关系
20221115 今天的世界发生了什么
214. Devu和鲜花
- 原文地址：https://blog.csdn.net/qq_45283185/article/details/127488694
