HTML基基基础学习

最新推荐文章于 2024-08-27 12:53:54 发布

哈额哈额哈额

最新推荐文章于 2024-08-27 12:53:54 发布

阅读量383

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/qq_46333857/article/details/109638778

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML基础学习

什么是HTML

HTML是超文本标记语言
	1.超文本：页面内可以包含图片，连接，甚至是音乐，程序等非文字元素
	2.标记：标签，不同的标签实现不同的功能
	3.语言：人与计算机的交互工具

HTML通过使用标签，标记描述网页，展示信息显示给用户

HTML书写规范

	* HTML标签是以尖号包含的关键字
	* HTML标签通常是成对出现，有开始就有结束
	* HTML通常都有属性，格式：属性=“属性值”（多个属性之间用空格隔开）
	* HTML标签不计大小写，但建议小写

HTML基本标签

结构标签

<html>根标签
	<head>网页头标签
		<meta charset="utf-8">
		<title></title>页面的标题
	</head>
<body>网页正文
</body>
</html>

由于本人不懂如何写出双尖号，所以就只写了代码

属性名	代码	描述
text	<body text="#F00"	设置网页正文中所以文字的颜色
bgcolor	<body bgcolor="#00F"	设置网页的背景色
background	<body background=“1.png”	设置网页的背景图

如果背景颜色和背景图片同时设置，最后只会显示背景图片。

颜色的表达方式

		* 第一种：用表示颜色的英文单词：red，yellow（但只有固定的，颜色
		不能改变深度）
		* 第二种：用十六进制表示颜色：如：#ffffff

相对路径
如果你的html文件和图片文件(picture.jpg)在同一个文件直接写picture.jpg,如果你的图片文件在html文件的下一级文件（pic）里面pic/picture.jpg,如果你的图片文件在html的上一级文件（pic）中，…/pic/picture.jpg

排版标签

* 可用于实现简单的布局
* 注释标签：<!--注释-->
* 换行标签<br/>
* 段落标签<p>文本文字</p>
		* 特点：段与段之间有空行
		* 属性align：对齐方式（center，left，right）
* 水平线标签：<hr/>
		* 属性：
			* width：水平线的长度
			* size：水平线的粗细
			* color：水平线的颜色
			* align：对齐的方式

块标签

属性名	代码	描述
div	<div	行级块标签，独占一行，换行
span	<span	所有内容都在同一行

基本文字标签

	<font></font>,处理网页中文字显示

属性名	代码	描述
size	<font size=“7”	用于设置字体的大小，最大1号，最小7号
color	<font color="#f00"	用于设置字体颜色
face	<font face=“宋体”	用于设置字体的样式

文本格式化标签

b	粗体标签
strong	加粗
em	强调字体
big	大号字体
i	斜体
small	小号字体
sup	下标标签
sub	上标标签
del	删除线

标题标签
h1,h2…h7.从大到小。
列表标签

无序列表
使用一组无序的符号定义

<ul  type="circle">
	<li>
	</li>
</ul>

属性值	描述
circle	空心圆
disc	实心圆
square	黑色方块

有序列表
使用一组有序的符号定义

	<ol  type="a" start="1">
	<li>
	</li>
</ol>

属性值	描述
1	数字类型
A	大写字母类型
a	小写字母类型
i	古罗马类型

图形标签

	在页面指定位置插入一副图片:<img />

属性名	描述
src	引入图片的地址
width	图片的宽度
height	图片的高度
border	图片的边框
align	与图片对齐方式
alt	提示信息
hspace	在图片左右设定空白
vspace	在图片上下设定空白

链接标签

	在页面中使用链接标签跳转到另一个页面
	标签 <a href=" "></a>
	属性：href:跳转页面的地址
	设置跳转页面的打开方式：target属性
		* _blank在新窗口打开
		* _self在原窗口打开
	指向同一页面中指定位置
		定义位置 <a name=" 名称"></a>
		指向<a href="#名称 "></a>
		<#middle>回到中部
		<#top>活到顶部

表格标签

普通表格（table,tr,td）

<table>
	<tr>
		<td></td>
	</tr>
</table>

表格的列标签（th）:内容有加粗和居中效果

<table>
	<tr>
		<th></th>
	</tr>
</table>

表格的列合并（colspan）：在同一行合并多个列

<table>
	<tr>
		<td colspan=""></td>
	</tr>
</table>

表格的行合并（rowspan）：在同一行合并多个列

<table>
	<tr rowspan="">
		<td ></td>
	</tr>
</table>

表单标签

html表单用于收集不同类型的用户输入数据

在这里插入图片描述
input元素

<body>
		<form action="demo01.html" method="get">//点击提交会跳转到demo01.html页面
			用户名：<input type="text" name=""><br/>
			密码：<input type="password" name=""><br/>
			单选：<input type="radio" name="sexy"><input type="radio" name="sexy"><br/>
			多选：<input type="checkbox" name=""><input type="checkbox" name=""><input type="checkbox" name=""><br/>
			生日：<input type="date" name=""><br/>
			薪资：<input type="number" name=""><br/>
			电话：<input type="tel" name=""><br/>
			照片：<input type="file" name=""><br/>
			颜色：<input type="color" name=""><br/>
			年龄范围：<input type="range" name=""><br/>
			隐藏域：<input type="hidden" name=""><br/>
			<hr />
			表单提交：<input type="submit" name=""><br/>
			数据重置：<input type="reset" name=""><br/>
			图片提交按钮：<input type="image" name=""><br/>
			普通按钮：<input type="button"value="普通" name=""><br/>
			
		</form>
	</body>

在单选时，需要给后面的name写上属性值才会体现单选；

select元素（下拉列表）

* 单选下拉列表：<select></select>
* 默认选中属性：selected="selected"

<select>
	<option selected="selected">内容</option>
</select>

	* 多选下拉列表：<select></select>
	* 多选列表：multiple="multiple"

<select multiple="multiple">
	<option >内容</option>
</select>

textarea元素（文本框）

多行文本框：<textarea cols="列"  rows=“行”></textarea>

就是给出一个规定大小的文本框，你可以在里面填写信息

html框架标签

	* 通过使用框架，你可以在同一个浏览器窗口看到不同的页面。每份html文档被
	称作一个框架，并且每个框架独立于其他的框架。
	* 使用框架的缺点：
		开发人员必须同时跟踪更多的html文档
		很难打印整张页面

框架结构标签frameset

	* 框架结构标签用于定义如何将窗口分割为框架
	* 每个frameset定义一系列的行或列
	* rows/colums的值规定每行每列占屏幕面积
		<frameset rows=""/col=""></frameset>

框架标签frame
每个frame引入一个页面

<frameset col="*,*">
	<frame src="demo01.html">
	<frame src="demo02.html">
</frameset>

CSS

什么是CSS

	* CSS：全称:层叠样式表，定义如何显示html元素
	* 多个样式可以层层叠加，如果不同的css的样式对同一html标签进行修饰，样式有冲突的优先级高的优先，不冲突的共同作用。

CSS作用

* 修饰美化html网页
* 外部格式表可以提高代码复用性，提高效率
* html内容与样式分离，便于后期维护。

CSS书写规范

	CSS规则由两个部分组成，选择器，一条以及多条说明
	* 选择器通常是需要改变样式的html元素
	* 每条说明由一个属性和属性值组成

基础语法选择器{属性：值；属性：值…}

* 用花括号来包围说明
* 多个说明之间用分号隔开
* css对大小写不敏感，如果css和html一起使用，class和id名称对大小写敏感。

CSS导入方式

内嵌方式

把css样式嵌入在html标签中
<div style="color:blue ;font-size:50px"></div>

内部方式

在head标签中加入style标签引入css
<head>
	<style type="text/css">//告诉浏览器用css解析器去解析
		div{color:blue;font-size:50px;}
	</style>
</head>

外部方式

新建一个css文件，在引用该css文件
div.css
引用：
	语句写在head标签内部
	<link rel="stylesheet" type="text/css" href="div.css">
	rel：代表当前页面与href所指定文档的关系
	type：文本类型，告诉浏览器用css解析器去解析
	href：css文件位置

@import导入

在页面中引入一个独立的文件
<style>
	@import url("div.css")
</style>

基本选择器

元素选择器

在head中引入style标签引入在其中声明元素选择器：html标签{属性：属性值}
<style type="text/css">//告诉浏览器用css解析器去解析
		span{color:blue;font-size:50px}
</style>

id选择器

给需要修改样式的html元素添加id属性标识，在head中引用style标签在其中声
明id选择器：#id{属性：属性值}
创建id选择器
<div id="s1"></div>
<div id="s2"></div>
<div id="s3"></div>

根据id选择器用html文件修饰
<style type="text/css">
		#s1{color:blue;font-size:50px};
		#s2{color:blue;font-size:50px};
		#s3{color:blue;font-size:50px};
</style>

class选择器

给需要修改的样式的html元素增加class属性，在head中引用style标签在其中声
明id选择器：.class名{属性：属性值}
创建class选择器
<div class="s1"></div>
<div id="s2"></div>
<div id="s3"></div>

根据class选择器用html文件修饰
<style type="text/css">
		.s1{color:blue;font-size:50px};
		.s2{color:blue;font-size:50px};
		.s3{color:blue;font-size:50px};
</style>

在遇到同属性时，基本选择器优先级由高到低：id选择器,class选择器，元素选择器

伪元素选择器

主要针对a标签
语法：
	* 静止状态：a:link{css属性}
	* 悬浮状态：a:hover{css属性}
	*  触发状态：a:active{css属性}
	*  完成状态：a:visited{css属性}

层级选择器

父级选择器  子级选择器。。。
#div  .d1{}
#div  .d2{}
div与d1和d2呈现层级关系
<div id="div">
	<div class="d1"></div>
	<div class="d2"></div>
</div>

css属性

属性名	取值	描述
font-size	数值	设置字体大小
font-family	默认，宋体，楷体等	设置字体样式
font-style	斜体等	设置斜体样式
font-weight	bolder	粗体样式

在这里插入图片描述
列表属性

属性名	取值	描述
list-style-type	disc等	改变列表的标识类型
list-style-image	url（“图片地址”）	用图像表示标识
list-style-position	inside outside	标识出现在列表项内部还是外部

尺寸属性

width：设置元素宽度
height：设置元素高度

显示属性
显示属性是display，以下是常用值：
none：不显示
block：区块显示
inline：行级显示

轮廓属性
绘制于元素周围的一条线，位于边框的外围，可以突出元素的作用

属性名	取值	描述
outline-style	solid(实线)/dotted(虚线)/dashed(虚线)	设置轮廓的样式
outline-color	16进制；用于表示颜色的英文	设置轮廓的颜色
outline-width	数值	设置轮廓的宽度

定位属性

相对定位（relative）

元素框偏移某个距离，元素仍保持前其未定位前的形状，它原本保留的空间会保留
（我的理解是相对位置是相对于它一开始应该在的位置）
<style type="text/css">
	.hel{
	position:relative;
	left:-20px;
}
</style>
向左移动20px的位置如果是正数则向右移动。

绝对定位（absolute）

	元素定位在其设定的位置，即便它设定的位置之前有一些部署，但它并不会
	在下一行。
		<style type="text/css">
	.hel{
	position:absolute;
	left:100px;
	top:100px;
}
</style>

固定定位（fixed）

	固定定位：即便你下滑页面，元素并不会消失，而是一直在你的页面上设定的位
	置。
	<style type="text/css">
	.hel{
	position:fixed;
	left:100px;
	top:100px;
}
</style>

CSS盒子模型

在这里插入图片描述
通过层的概念进行页面布局。

边框相关属性

属性名	取值	描述
border-style	solid(实线)/dotted(虚线)/dashed(虚线)	设置轮廓的样式
border-color	16进制；用于表示颜色的英文	设置轮廓的颜色
border-width	数值	设置轮廓的宽度

外边距相关属性

	margin：外边距，边框和边框外层的距离
	top，left，right，bottom四个方向

内边距相关属性

	padding：内边距，边框和文本的距离
	top，left，right，bottom四个方向

哈额哈额哈额

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基基基础学习

HTML基础学习什么是HTMLHTML书写规范HTML基本标签什么是HTMLHTML是超文本标记语言 1.超文本：页面内可以包含图片，连接，甚至是音乐，程序等非文字元素 2.标记：标签，不同的标签实现不同的功能 3.语言：人与计算机的交互工具HTML通过使用标签，标记描述网页，展示信息显示给用户HTML书写规范 * HTML标签是以尖号包含的关键字 * HTML标签通常是成对出现，有开始就有结束 * HTML通常都有属性，格式：属性=“属性值”（多个属性之间用空格隔开） * HTML
复制链接

扫一扫