泷羽sec-----HTML的学习，以及实战代码[在资源处]

声明！ 学习视频来自B站up主 泷羽sec
有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关，切勿触碰法律底线，否则后果自负！！！！有兴趣的小伙伴可以点击下面连接进入b站主页B站泷羽sec

HTML基础学习

1、 简单的HTML页面架构

<!DOCTYPE html>		//这个声明定义了文档的类型为 HTML5，是当前广泛使用的 HTML 版本标准。
<html>
	<head>
        <title>test</title>//用来定义网页在浏览器标签栏显示的标题以及在搜索引擎结果页面展示的标题
		<meta charset="UTF-8">	//指定了文档的字符编码为 UTF-8
		<title></title>
	</head>
	<body>	//可添加各种 HTML 元素，如文本、图片、链接、表格、表单等等来构建网页的实际可视部分
	</body>
</html>

这是HTML的大致框架，写代码都是在这个框架的基础上，保存文件为.html即可用浏览器访问

2、 HTML常见标签

这些标签，都会进行一个闭合，表示该标签的结束，如<html>，会以</html>闭合

标签作用
<meta>可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
如设置网站关键字，<meta name="keywords" content="网络安全" />
<link>定义文档与外部资源的关系 www.baidu.com
<script>引入js文件，或者在该标签内写js代码
注释
<p>普通的段落
</br> 换行，文本内容显示时，会换行显示
<hr>换行线，会把该换行线显示出

2.1 标题标签

由大到小

标签作用

h1

标签中的内容h1以一级标题显示

h2

标签中的内容h2以二级标题显示

h3

标签中的内容h3以三级标题显示
h4
标签中的内容h4以四级标题显示
h5
标签中的内容h5以五级标题显示

h6

标签中的内容h6以六级标题显示

2.2 文本属性

标签作用
<strong>xx</strong>会把xx加粗显示
<b>xx</b>会把xx加粗显示
<i>xx</i>会把xx斜体显示
<u>xx</u> xx文本下会有下划线显示
<sup>xx</sup>会把xx以上标的形式显示，类似于平方那种 2
<sub>xx</sub>会把xx以下标的形式显示，xx
<del>xx</del> 会把xx加上删除线显示，xx
<font></font>
在<font>标签中设置
如<font size=10>xx</font>
如<font color=red>xx</font>		规定字体属性，如大小、字体、颜色等
如设置字体为10的大小xx
如设置字体颜色为红色xx
 

2.3 form表单
 

form表单 规定当提交表单时向何处发送表单数据
 

method 提交的方法有 get、post
 

规定在发送表单数据之前如何对其进行编码。
 

enctype 属性可能的值
 

​ application/x-www-form-urlencoded
 

​ multipart/form-data
 

​ text/plain
 

以及表单交由谁处理action，可指定文件用于接收form表单
 

<!DOCTYPE html>	
<html>
   <body>
       <form method="get" enctype="application/x-www-form-urlencoded" action="#"> 

   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>



</html>




大概就像上面一样，这就是一个form表单的大概结构
 

input标签，这个是form表单中，用于与用户交互的标签
 

input标签的属性作用
name同样是表示的该文本输入框名称
size输入框的长度大小
maxlength输入框中允许输入字符的最大数
value输入框中的默认值
readonly表示该框中只能显示，不能添加修改
autofocus="true"打开页面会自动聚焦到该输入框
pattern="^[a-zA-Z0=9]{6,}$"正则表达式
required="true"该表单不能为空
 

input标签的属性type的一些值作用
<input type="text" name="username"/>在输入框中以username显示，用户的输入是可见的
<input type="passsword" name="passwd"/>在输入框中以passwd显示，用户的输入是不可见的
<input type="file"/>输入框是文件上传的形式，注意，这里若是file，一般需要表单中的编码方式enctype="multipart/form-data"
<input type="hidden"/>隐藏的，不可见的，但是存在
<input type="button" value="按钮"/>按钮形式，这里value值给了后，就会在这个按钮中显示"按钮"
<input type="checkbox"/>复选框的形式
<input type="radio"/>单选框的形式
<input type="email"/>输入框会检查是否为邮箱格式
<input type="range"/>提供一个滑块去左右滑动选择
<input type="time"/>选择24小时制的时间，到分钟
<input type="datetime-local"/>选择年月日和几点
<input type="date"/>选择年月日
<input type="week"/>选择星期
<input type="month">选择当前年的月份
<input type="search">搜索
<input type="number">输入数字类型
<input type="url">输入网址，会进行检查
 

form表单中button的type值作用
<button type="submit"/>提交按钮，点击后会提交form表单
<button type="reset"/>重置按钮，点击后，在输入框内输入的内容清空
 

<select>标签和<option>标签
 

<select>标签用于创建一个下拉列表，用户可以从列表中选择一个选项。
 

<option>标签则用于定义下拉列表中的每个选项内容。
 

<form>
  <label for="city">选择城市：</label>
  <select id="city" name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
  </select>
</form>

 

2.4 <a>标签
 

a标签中href的作用：就是用于提供超链接，点击跳转
 

a标签中target的作用：就是用于控制界面与页面之间的跳转
 

a标签的属性作用
self（默认）用于在当前选项卡中跳转，也就是不新建页面跳转
_blank在新窗口中打开链接
_parent在父框架集中打开链接
_top在整个窗口中打开链接
 

在<a>百度</a>标签中，百度是以文本显示出
 

如：
 

<a href="http://www.baidu.com" target="self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

 

锚文本:
 

<a href="#2">锚点</a>
<a name="2">锚点</a>

 

2.5 <img> 图像标签
 

img 元素向网页中嵌入一幅图像。
 

img标签属性作用
alt 规定图像的替代文本，鼠标悬挂在图片上时，会显示定义的文字，或者，假如图片加载失败，这个文字也会显示
src 规定显示图像的url，也就是会显示这个url中的图像
width 规定图片的高度
height 规定图片的宽度
 

如：
 

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

 

2.6 <table> 表格标签
 

table标签的属性及子标签作用
<caption>我的标题</caption>表格带标题
border属性设置边框大小
width 属性设置宽度大小
height属性设置高度大小
cellpadding属性设置单元边与内容的空白
cellspacing属性设置 单元格的空白
<th>标签表格的第一行内容，按照顺序从左往右显示
<tr>标签设置表格的行，行标签
<td>标签设置表格的列，列标签
colspan属性显示的行，也就是占位的问题，如在列标签中设置该属性位2，则会占两个行，就想当于合并两个行显示为1行
rowspan属性与clospan属性一样，只是这里为 列
 

2.7 列表标签
 

列表分为两种，一种有序列表<ol>，一种无序列表<ul>。<li>承载列表内容
 

列表中结构大致为下面这种，这里以无序列表结构举例
 

<ul>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>这里是列表内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>这里是列表内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>这里是列表内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>这里是列表内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>



</ul>




2.7.1 <ul>无序列表
 

ul无序列表的属性type的值作用
square以正方形的实心圈列表显示
circle以空心圈的列表显示
disc以实心圈的列表显示
 

<ul type="disc">	//这里列表的每一行前都会有实心圈
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

 

2.7.2 <ol>有序列表
 

ol有序列表的属性type的值作用
1（默认是数字）数字列表
a小写字母列表
A大写字母列表
I罗马字母列表
i小写罗马字母列表
 

<ol type="1"> <!--有序列表-->
	<li>longyu</li>
	<li>333</li>
	<li>666</li>
</ol>

 

2.8 框架的使用
 

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
 

frameset 在一个页面中设置一个或多个框架 不能嵌套在body标签里
 

iframe 是在html页面内嵌入框架 框架内可以连接另一个页面
 

特点：
 

  • frameset 不能在body内使用
  • frame 一般都是在frameset中使用
  • cols 定义框架集中列的数目和尺寸
  • rows 定义框架集中行的数目和尺寸
 

如：下面以上下分屏的形式显示两个地址的内容
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
		<frameset rows="50%,*">
		<frame src="https://bilibili.com"  scrolling="no"/>
		<frame src="http://soso.com" />
	</frameset>
	<body>
	</body>
</html>

 

<frame>标签的属性设置滚动条
 

属性scrolling的值作用
scrolling = "auto"在需要的情况下出现滚动条（默认值）
scrolling = "yes"始终显示滚动条（即使不需要）
`scrolling = “no”从不显示滚动条（即使需要）
 

3、DIV和CSS样式
 

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
 

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
 

DIV是html的一个标签 CSS是一个样式表
 

<style>即是样式表，其中的代码就是一些样式
 

<div>可理解为盒子的意思，在该标签中调用样式表，表示这个盒子中的信息，都是按照这个样式去显示
 

1. 样式表类型
 

1.1 嵌入样式表
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>样式表</title>
		<style>
			.demo1{	//名称
				color: red;
				width: 100px;
				height: 100px;
				background: blue;
			}		
		</style>
	</head>
	<body>
		<div class="demo1">
			demo1
		</div>
	</body>
</html>

 

1.2 外部样式
 

@import url表示引入外部CSS样式
 

.demo1{
   color: red;
   width: 100px;
   height: 100px;
   background: blue;
}
//假设上面的代码存储在当前html所在目录下的css目录下，文件名为wai.css
//那么在下面的代码中是以@import url引用文件名

<head>

<style type="text/css">

@import url("css/wai.css");

</style>

</head>

<body>

<p class="demo1">this is a ex</p>

</body>

//在<p>标签调用文件中的样式demo1




1.4 内联样式
 

就是在一些标签中直接进行定义样式，不使用以定义的样式表
 

<div style="color: blue;width: 100px;height: 100px; background: black;">demo2</div>

 

当然，一般对于很多html中的处理都需要一样的样式时，使用已经创建好的样式表，很是方便，相当于调用模板
 

2. 注释
 

/* 注释内容 */ 这里会把注释内容不显示，可多行
 

3. 样式选择器
 

选择器用法
元素选择器在元素中使用，如 <div style="color: blue;</div>
ID选择器在<style>标签写入，格式为 #id{属性:值}
如<style>#demo1{color: red;width: 250px;}</style>
class选择器在<style>标签写入,格式为 .类名{属性:值}
如<style>.demo1{color: red;width: 250px;}</style>
子选择器在<style>标签写入,格式为 元数 空格 元素{属性:值}
如<style>ul li{color: red;background: green;}</style>
后代选择器在<style>标签写入,格式为 元数 > 元数{属性:值}
如<style>.ul > li{color: red;background: green;}</style>
属性选择器在<style>标签写入,格式为 元素[元素的属性]{属性:值} 或者 [元素]{属性:值}
如input[type = "text"] {border: 1px solid blue; }
通配符选择器在<style>标签写入,格式为***{属性:值}**，这个是不调用也会有该样式，相当于默认样式
如<style>*{color: yellow;background: blue;}</style>
群组选择器这个是有多个样式的时候，可以把一些样式归为一组，这样有的需要共同的样式就方便了
格式为 样式1 , 样式2 {属性:值}
 

4. 背景
 

浏览器显示的屏幕的一些背景设置
 

属性作用
background-color 规定要使用的背景颜色
background-position规定背景图像的位置
background-size规定背景图片的尺寸
background-repeat规定如何重复背景图像
background-origin 规定背景图片的定位区域
background-clip 规定背景的绘制区域
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动
background-image规定要使用的背景图像
 

background-repeat的值
 

  • repeat 默认。背景图像将在垂直方向和水平方向重复。
  • repeat-x 背景图像将在水平方向重复。
  • repeat-y 背景图像将在垂直方向重复。
  • no-repeat 背景图像将仅显示一次。
  • inherit 规定应该从父元素继承 background-repeat 属性的设置。
 

background-position的值
 

  • inherit  规定应该从父元素继承 background 属性的设置。
  • left top 背景图像的左上角会被放置在元素的左上角
  • left center  背景图像的左边缘会与元素的左边缘对齐，并且图像在垂直方向上居中
  • left bottom 背景图像的左边缘与元素的左边缘对齐，图像的底部与元素的底部对齐
  • right top 背景图像的右上角与元素的右上角对齐
  • right center 背景图像的右边缘与元素的右边缘对齐，并且图像在垂直方向上居中
  • right bottom  背景图像的右边缘与元素的右边缘对齐，图像的底部与元素的底部对齐
  • center top  背景图像在水平方向上居中，图像的顶部与元素的顶部对齐
  • center center  背景图像在水平和垂直方向上都居中
  • center bottom 背景图像在水平方向上居中，图像的底部与元素的底部对齐
 

简写方式
 

background: url(images/bg.gif) no-repeat top right
 

background-attachment的值
 

背景图片是否随着内容的滚动而滚动
 

fixed; 固定，不随内容的滚动而滚动
 

scroll; 滚动，随内容的滚动而滚动
 

5. 边框
 

常见的写法 border:1px solid #foo;这是一种缩写形式
 

属性作用
border-color:#000边框颜色
border-width:1px;边框宽度
border-left设置左边框，一般单独设置左边框样式使用
border-right设置右边框，一般单独设置右边框样式使用
border-top设置上边框，一般单独设置上边框样式使用
border-bottom设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为CSS下划线效果应用。
 

上、下、左、右的边框样式值如下：
 

  • none : 　无边框。
  • hidden : 　隐藏边框。IE不支持
  • dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）
  • dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）
  • solid : 　实线边框（常用）
  • double : 　双线边框。两条单线与其间隔的和等于指定的border-width值
 

border-color值不同时的四种语法
 

border - color: red; 上、下、左、右都是red
 

border - color: blue green; 上下为blue、左右为green
 

border - color: yellow green purple;上、左右、下
 

border - color: orange pink cyan magenta;分别为上、右、下、左边框指定颜色
 

border-color的值
 

  • groove : 　根据border-color的值画3D凹槽
  • ridge : 　根据border-color的值画菱形边框
  • inset : 　根据border-color的值画3D凹边
  • outset : 　根据border-color的值画3D凸边
 

6. padding内边距
 

值：可以是像素/厘米等长度单位、百分比
 

padding值不同时的四种语法
 

  • padding:10px; 上、下、左、右
  • padding:10px 10px; 上下 、左右
  • padding:10px 10px 10px; 上 、左右 、下
  • padding:10px 10px 10px 10px; 上 、右、 下 、左（设置4个点顺时针方向）
 

这个与border-color的值是一样的
 

padding单独属性
 

属性作用
padding-top:10px设置上内边距，确定元素内容与元素顶部边界之间的距离
padding-right:10px设置右内边距，确定元素内容与元素右侧边界之间的距离
padding-bottom:10px设置下内边距，确定元素内容与元素底部边界之间的距离
padding-left:10px设置左内边距，确定元素内容与元素左侧边界之间的距离
 

当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小
 

7. margin外边距
 

值：与padding相同
 

单独属性：与padding相同
 

外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并
 

margin:10px  上下左右都会腾出10px出来
 

margin:0px auto; 居中
 

8. 文字属性
 

属性作用
color:red; 文字颜色 (或值为#ffeeees这种格式)
font-size:12px; 文字大小
font-weight:bolds文字粗细(bold/normal)
font-family:”宋体”文字字体
font-variant:small-caps小写字母以大写字母显示
 

9. 文本属性
 

属性作用
text-align:center; 文本对齐(right/left/center)
line-height:10px; 行间距(可通过它实现文本的垂直居中)
text-indent:20px; 首行缩进
text-decoration:none;文本线，这里表示没有文本线
letter-spacing:字间距
 

text-decoration的值
 

none  没有文本线
 

underline 下划线
 

overline  上划线
 

line-through 中划线
 

10. 列表
 

属性作用
list-style-type设置列表项标记的类型
list-style-position设置在何处放置列表项标记
list-style-image使用图像来替换列表项的标记
inherit规定应该从父元素继承 list-style 属性的值
 

以上属性可取值:
 

  • ​ disc: 点
  • ​ circle: 圆圈
  • ​ square: 正方形
  • ​ decimal: 数字
  • ​ decimal-leading-zero: 十进制数，不足两位的补齐前导0，例如: 01, 02, 03, …, 98, 99
  • ​ lower-roman: 小写罗马文字，例如: i, ii, iii, iv, v, …
  • ​ upper-roman: 大写罗马文字，例如: I, II, III, IV, V, …
  • ​ lower-greek: 小写希腊字母，例如: α, β, γ, …
  • ​ lower-latin: 小写拉丁文，例如: a, b, c, … z
  • ​ upper-latin :大写拉丁文，例如: A, B, C, … Z
  • ​ armenian: 亚美尼亚数字
  • ​ georgian: 乔治亚数字，例如: an, ban, gan, …, he, tan, in, in-an, …
  • ​ lower-alpha: 小写拉丁文，例如: a, b, c, … z
  •  upper-alpha: 大写拉丁文，例如: A, B, C, … Z
  • ​ none: 无(取消所有的list样式)
  • ​ inherit:继承
 

list-style-position 值
 

  • inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。
  • outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
 

简写
 

list-style:square inside url('/i/arrow.gif');
 

11. 超链接
 

属性作用
a{text-decoration: none;}无文本线
a:link {color:#FF0000;} 未访问的链接
a:visited {color:#00FF00;}已访问的链接
a:hover {color:#FF00FF;}鼠标划过链接
a:active {color:#0000FF;}已选中的链接
 

12. 盒子div模型
 

盒子模型的组成部分
 

外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性
 

自身的身高 width height
 

内边距 padding
 

盒子边框 border
 

与其他盒子的距离 margin 外边距
 

13. float 脱离文档流浮动
 

left 元素向左浮动。
 

right 元素向右浮动
 

clear: both; 清除浮动
 

14. 块级元素、行内元素
 

块级元素：
 

他会独占一行，在默认情况下，其宽度自动填满其父元素的宽度；
 

块级元素可以设置width、height属性；
 

块级元素即使设置了宽度也是独占一行，块级元素可以设置margin、padding属性；
 

行内元素：
 

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到行排不下，就自动换行，其宽度随内容而变化；
 

行内元素的width、height属性则无效；
 

行内元素的margin、padding属性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都会产生边距效果，但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不产生边距效果。
 

行内元素转换
 

属性作用
display:none; 不显示
display:block;变成块级元素
display:inline; 变成行内元素
display:inline-block;以块级元素样式展示，以行级元素样式排列
 

块级元素(block element）
 

常见块级元素的标签作用
<address>地址
<center>居中对齐块
<div>常用块级容易
<dl> 定义列表
<form>交互表单 （只能用来容纳其它块元素）
<h>标签
<hr> 水平分隔线
<ol>无需列表
<ul>有序列表
<p>段落
<pre> 格式化文本
<table>表格
 

*行内元素：*
 

常见行内元素的标签作用
<a>锚点
<b>粗体(不推荐)
<br>换行
<code>计算机代码(在引用源码的时候需要)
<em> 强调
<i> 斜体
<img>图片（特殊的内联元素，同时是内联替换元素，替换元素可以设置宽高）
当图片和DIV在一起时，图片周围会出现margin现象，即元素不重合贴在一起，为了解决这个问题，设置img的CSS为{margin：0；display：block；border：0px}
<input>输入框
<label> 表格标签
<select>项目选择
<strong>粗体强调
<textarea>多行文本输入框
<u> 下划线
<var> 定义变量
 

替换元素有如下：（和img一样的设置方法）
 

<img>、<input>、<textarea>、<select>
 

<object>都是替换元素，这些元素都没有实际的内容
 

15. 溢出overflow属性
 

overflow 属性规定当内容溢出元素框时发生的事情。
 

  • visible 默认值。内容不会被修剪，会呈现在元素框之外。
  • hidden 内容会被修剪，并且其余内容是不可见的。
  • scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  • auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  • inherit 规定应该从父元素继承 overflow 属性的值。
 

16. 定位position
 

position属性的值
 

  • static 静态定位（不对它的位置进行改变，在哪里就在那里）
  • fixed固定定位（参照物–浏览器窗口）—做 弹窗广告用到
  • relative（相对定位 ）（参照物以他本身）
  • absolute（绝对定位）(除了static都可以，找到参照物–>与它最近的已经有定位的父元素进行定位)
 

static:默认值。没有定位，元素出现在正常的流中（忽略 top,bottom, left, right 或者z-index 声明）。
 

fixed:生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, "right"以及 "bottom"属性进行规定。
 

relative:生成相对定位的元素，相对于其正常位置进行定位。
 

absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
 

z-index
 

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
 

定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。








            

            
posted @ 
2024-11-12 01:55 
whitehe 
阅读(21) 
评论(0) 
 
收藏 
举报
 来源