3，网络安全之web基础html篇（基础入门）
时间：2024-04-16 10:00:20 来源：网络cs 作者：淼淼 栏目：防关联工具 阅读：
HTML，全称HyperText Markup Language，即超文本标记语言，是用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言（markup language），用于描述网页的结构和内容。HTML文档是一种纯文本文件，所有的文本编辑器(如记事本)都可以打开和编辑，然后通过浏览器解析来展示内容。（可理解为带超链接的文本）
市面上常用的开发工具可以编辑html的有：
1,sublime
2,Visual studio code
3,Webstrom
4,Hbuilder
这是html的学习网站：HTML 教程 (w3school.com.cn)
学习之前先了解绝对路径和相对路径的区别吧
绝对路径：可以理解为全路径，如要打开html下的1.txt需要输入它的绝对路径：/html/1.txt
相对路径：顾名思义是相对于它的目录而言，输入1.txt就可以打开因为在同一目录下
相对路径肯定不会以/开头的。
一，HTML骨架（可理解为基本格式吧）
<!DOCTYPE html> <!-- 声明文档类型为html -->
<html>
<head> <!-- 文档头部 -->
<meta charset="utf-8"> <!-- 设置文档字符集为utf-8,另外还有很多字符集大家可以自己去百度了解一下 -->
<title></title> <!-- 标题 -->
</head>
<body> <!-- 主体部分 -->
</body>
</html>
二，基本标签
1.标题文字＜h#＞..........＜/h#＞#为1~6；数字越大字体越小
<h1>hello</h1>2.字体变化＜font＞..........＜/font＞
【1】字体大小＜font size=#＞..........＜/font＞ #为1~7；数字愈大,字愈大_
【2】字体＜font _face_="字体名称"＞..........＜/font＞
【3】文字颜色＜font color=#＞..........＜/font＞取值为十六进制数
<font size=7 color=red face="宋体">红色</font>3.粗体字 ＜b＞..........＜/b＞
<b>变粗了</b>4.斜体字＜i＞..........＜/i＞
<i>变粗了</i>5.下划线 ＜u＞..........＜/u＞
<u>变粗了</u>6.删除线
写法1：＜del＞..........＜/del＞
<del>中间一条横线</del>写法2：＜s＞..........＜/s＞
7.下标字＜sub＞..........＜/sub＞
8.上标字＜sup＞..........＜/sup＞
9.换行 ＜br＞
10.分段 ＜p＞..........＜/p＞
11.文字的对齐方向＜p align="#"＞..........＜/p＞
#可为left(左对齐)，center(居中对齐)，right(右对齐)
<p align="center">居中</p>12.水平线（分隔线）＜hr＞ 注：多个属性可以同时写。
【1】分隔线的粗细(大小)＜hr size=点数＞
【2】分隔线的宽度＜hr width=点数或百分比＞
【3】分隔线对齐方向＜hr align="#"＞
#可为left(左对齐)，center(居中对齐)，right(右对齐)
<hr align="center">【4】分隔线的颜色＜hr color=#＞#为red,black等等。
13.居中对齐＜center＞..........＜/center＞
14.依原始样式显示（看到是啥样的就是啥样的）＜pre＞..........＜/pre＞
15.＜body＞标签的属性
【1】背景颜色 ＜body bgcolor=#＞#为red,black等等
【2】背景图片 ＜body background="图片位置路径"＞
【4】内容文字的颜色 ＜body text=#＞#为red,black等等
【5】点击前的超链接颜色 ＜body link=#＞#为red,black等等
【6】点击时的超链接颜色 ＜body alink=#＞#为red,black等等
【7】点击后的超链接颜色 ＜body vlink=#＞#为red,black等等
16.＜!--..........--＞ （点表示注释部分）
等价于：＜comment＞..........＜/comment＞
| 符号 | 语法 |
| ＜ | < |
| ＞ | > |
| & | & |
| " | " |
| 空白（空格） | |
| 版权 | © |
| 注册商标 | ® |
| 英镑 | £ |
三、列表标签
1、有序列表：
<ol> <li>数值</li> <li>数值</li> </ol>效果
2、无序列表：
<ul> <li>数值</li> <li>数值</li> </ul>效果
3、目录式列表
<dir> <li>数值</li> <li>数值</li> </dir>效果
4、菜单式列表
<menu> <li>数值</li> <li>数值</li> </menu>效果
5、定义式列表
<dl> <dt>主题</dt> <dd>内容</dd> <dd>内容</dd></dl>效果
四、表格标签
1.定义表格＜table＞..........＜/table＞
【1】设定边框的厚度
＜table border=点数＞
【2】设定格线的间距
＜table cellspacing=点数＞
【3】设定资料与格线的边距
＜table cellpadding=点数＞
【4】调整表格宽度
＜table width=点数或百分比＞
【5】调整表格高度
＜table height=点数或百分比＞
【6】设定表格背景色彩
＜table bgcolor=#rrggbb＞
【7】设定表格边框颜色
＜table bordercolor =#rrggbb＞
2.显示格线
＜table border=1＞
3.表格标题
＜caption＞..........＜/caption＞
4.定义行
＜tr＞..........＜/tr＞
5.定义栏位
《1》单元格 ＜td＞..........＜/td＞
《2》表头 ＜th＞..........＜/th＞
【1】水平位置 ＜th align="#"＞
#号可为left：向左对齐 center：向中对齐right：向右对齐
【2】垂直位置 ＜th valign="#"＞#号可为
top：向上对齐middle：向中对齐 bottom：向下对齐
【3】宽度
＜th width=点数或百分比＞
【4】行合并
＜th rowspan=欲合并栏位数＞
【5】列合并
＜th colspan=欲合并栏位数＞
<table border="1" style="border-collapse: collapse;"><tr><td>第一行第1列</td><td>第一行第2列</td><td>第一行第3列</td><td>第一行第4列</td></tr><tr><td>第二行第1列</td><td>第二行第2列</td><td>第二行第3列</td><td>第二行第4列</td></tr><tr><td>第三行第1列</td><td>第三行第2列</td><td>第三行第3列</td><td>第三行第4列</td></tr></table>
效果
| 第一行第1列 | 第一行第2列 | 第一行第3列 | 第一行第4列 |
| 第二行第1列 | 第二行第2列 | 第二行第3列 | 第二行第4列 |
| 第三行第1列 | 第三行第2列 | 第三行第3列 | 第三行第4列 |
五、超链接
<a href="https://www.baidu.com">百度一下</a>效果，点击可跳转到百度页面
1，打开一个新窗口跳转为百度一下 <a href="百度一下，你就知道" target=”blank”>
2，在本窗口跳转百度 <a href="百度一下，你就知道" target=”self”>
3，书签
<a href="#t1">第一页</a><a href="#t2">第二页</a><a name="t1"><p>这是第一页</p><a name="t2"><p>这是第二页</p>效果，点击跳到第几页就会跳到相应的位置，如果有内容的话会更明显，这里不演示了，自己去玩吧。
六、图片
1，＜img src="图片路径位置" width=宽度点数 height=高度点数 ＞
2，＜img src="图片路径位置" alt="图片加载不出来时显示的文字">
七、表单标签
1，form标签
<form action="数据要提交到的位置" method="数据提交的方式"></form>
提交的方式为get或post，具体的区别可以去看看我的计算机网络基础篇，里面有讲。
2，input标签
<input>要放在form表单中
《1》<input type=“#”/>
#可以为text（文本框），password（密码），checkbox（复选框），radio（单选框），
submit（提交按钮），reset（重设按钮），image（图形按钮）
《2》input的两个属性value和placeholder
<input type="text" value="默认填充的内容">效果
<input type="text" placeholder="提示要输入的内容">效果
3、下拉式列表 ＜select＞..........＜/select＞
<select><option>湖南</option><option>上海</option><option>深圳</option></select>效果
4、多行文本框＜textarea＞..........＜/textarea＞
<textarea rows="4" cols="20">这是默认输入的值</textarea>rows为定义的行数，cols为定义的列数
效果
八，CSS样式
什么是CSS样式？
CSS，全称是“层叠样式表”（Cascading Style Sheets），它用来改变网页上文字的颜色、大小、字体，调整图片的位置，设置页面的布局等等。
1，选择器
【1】元素选择器：指定html中的标签的样式如:p,h1,div等等。
<style>h1{font-size: 100px;}</style>【2】类选择器：指定class属性的样式以.号开头如:.class1,.class2等等
<!DOCTYPE html> <!-- 声明文档类型为html --><html><head> <!-- 文档头部 --><meta charset="utf-8"> <!-- 设置文档字符集为utf-8,另外还有很多字符集大家可以自己去百度了解一下 --><title></title> <!-- 标题 --><style> .class1{ font-size: 100px; }</style></head><body> <h1 class="class1">hello</h1> </body></html>【3】ID选择器：通过id属性设置样式以#号开头如：#id1,#id2
<!DOCTYPE html> <!-- 声明文档类型为html --><html><head> <!-- 文档头部 --><meta charset="utf-8"> <!-- 设置文档字符集为utf-8,另外还有很多字符集大家可以自己去百度了解一下 --><title></title> <!-- 标题 --><style> #id1{ font-size: 20px; }</style></head><body> <h1 id="id1">hello</h1> </body></html>2，引入CSS样式
【1】内部样式：在head标签中使用style
<!DOCTYPE html> <!-- 声明文档类型为html --><html><head> <!-- 文档头部 --><meta charset="utf-8"> <!-- 设置文档字符集为utf-8,另外还有很多字符集大家可以自己去百度了解一下 --><title></title> <!-- 标题 --><style> h1{ font-size: 20px; }</style></head><body> <h1 >hello</h1> </body></html>【2】内联样式：直接在标签中使用style
<!DOCTYPE html> <!-- 声明文档类型为html --><html><head> <!-- 文档头部 --><meta charset="utf-8"> <!-- 设置文档字符集为utf-8,另外还有很多字符集大家可以自己去百度了解一下 --><title></title> <!-- 标题 --></head><body> <h1 style="color: red;">hello</h1> </body></html>【3】外部样式：将单独的.css文件用link引用进来
这是css文件
引用进来
<!DOCTYPE html> <!-- 声明文档类型为html --><html><head> <!-- 文档头部 --><meta charset="utf-8"> <!-- 设置文档字符集为utf-8,另外还有很多字符集大家可以自己去百度了解一下 --><title></title> <!-- 标题 --><link rel="stylesheet" href="css/domen0.css"><!-- 引用css文件进来 --></head><body> <h1>hello</h1> </body></html>以上就是我的课堂笔记了，具体的css样式如何设置可以去上面我给的链接去学一下，这些对我们学网安的来说不需要都会写，但是要知道这些是干嘛的，看到能认识就行。
谢谢大家的观看！如有问题可以评论区指出来交流交流哈。
本文链接：https://www.kjpai.cn/news/2024-04-16/159341.html，文章来源：网络cs，作者：淼淼，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
上一篇：[ PyQt入门教程 ] Qt Designer工具的使用
下一篇：返回列表