HTML+CSS

最新推荐文章于 2025-06-03 12:50:18 发布

昭昭..

最新推荐文章于 2025-06-03 12:50:18 发布

阅读量366

点赞数 1

文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/weixin_45984258/article/details/122191091

版权

什么是HTML：

html是一门语言，所有的网页都是用HTML
这门语言编写出来的
html（HyperText Markup Language）：超文本标记语言
1、超文本：超越了文本限制，比普通文本跟强大。除了文本信息，还可以定义图片、音频、视频等
2、标记语言：由标签构成的语言
html运行在浏览器上，html由浏览器解析
html标签都是预定义好的。例如：使用< img>展示图片
W3C标准：网页主要由三部分组成
1、结构：html
2、表现：CSS
3、行为：JAVAScript

HTML快速入门

1、新建文本文件，后缀名为.html
2、编写HTML结构标签
3、在< boby >中定义文字
在这里插入图片描述总结
1、html文件以.html为扩展名
2、html结构标签

标签	描述
< html>	定义HTML文档
< head>	定义关于文档的信息
< title>	定义文档的标题
< body>	定义文档的主体

3、HTML标签不区分大小写 4、HTML标签属性值，单双引号皆可 5、HTML语法松散

基础标签

标签	描述
< h1>~< h6>	定义标题，h1最大
< font>	定义文本的字体大小、字体尺寸、字体颜色
< b>	定义粗体文字
< i>	定义斜体文字
< u>	定义文本下划线
< center>	定义文本居中
< p>	定义段落
< br>	定义换行
< hr>	定义水平线

转移字符

html原代码	显示结果	描述
& lt	<	小于或显示标记
& gt	>	大于或者显示标记
& amp	&	可用于显示其他特殊字符
& quot	"	引号
& reg	®	已注册
& copy	©	版权
&trade	™	商标
& nbsp		不断行的空白

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>公司简介</h2>
		<hr color="bisque" size="3"/>
		<p> <font color="red"> 百度</font> （百度公司） 播报 锁定 上传视频 百度
		（Baidu）是拥有强大互联网基础的领先AI公司。百度愿景是
		：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。 </p>
		<p>“百度”二字，来自于八百年前南宋词人辛弃疾的一句词：
		<b>众里寻他千百度。</b>这句话描述了词人对理想的执着追求。1999年底
		，身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨
		大发展潜力，抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作
		，携搜索引擎专利技术，于 2000年1月1日在中关村创建了百度公司。
		</p>
		<p>百度拥有数万名研发工程师，这是中国乃至全球都顶尖的技术团队。
		这支队伍掌握着世界上最为先进的搜索引擎技术，使百度成为中国掌
		握世界尖端科学核心技术的中国高科技企业，也使中国成为美国、俄罗
		斯、和韩国之外，全球仅有的4个拥有搜索引擎核心技术的国家之一。
		</p>

		<hr color="bisque" size="3"/>
		<font color="grey" size="1"><center>&copy;All Rigts Reserved 苏ICP 备28908820382</center></font>
		
	</body>
</html>

在这里插入图片描述

图片、音频、视频标签

图片、音频、视频标签

标签	描述
< img>	定义图片
< audio>	定义音频
< video>	定义视频

img：定义图片
1、src：规定显示图像的URL（统一资源定位符）
2、height：定义图片高度
3、width：定义图像宽度
aodio：定义音频。支持格式：MP3、WAV、OGG
1、src：规定音频的URL
2、controls：显示播放控件
video：定义视频。支持格式：MP4、WebM、OGG
1、src：规定视频的URL
2、controls：显示播放控件

尺寸单位：
1、px：像素
2、百分比
路径：
相对路径（）：
绝对路径：
XXX/html/demo02.html
XXX/HTML/img/a.jpg
可写为： ./img/a.jpg(./可省略)

总结
1、图片、音频、视频的标签
2、尺寸单位：px 和%
3、路径：绝对路径和相对路径

超链接标签

标签	描述
< a>	定义超链接，用于连接到另一个资源

href ：指定访问资源的URL
target：指定打开资源的方式
1、_self：默认值，在当前页面打开
2、_black :在空白页面打开

列表标签

有序列表

咖啡
茶
牛奶

无须列表

咖啡
茶
牛奶

标签

标签	描述
< ol>	定义有序列表
< ul>	定义无须列表
< li>	定义列表项

type ：设置项目符号

表格标签

标签	描述
< table>	定义表格
< tr>	定义行
< td>	定义单元格
< th>	定义表头单元格

table ：定义表格
1、border：规定表格边框宽度
2、width：规定表格宽度
3、cellspacing：规定单元格之间的留白
tr ：定义行
1、align ：定义表格行的内容的对其方式
td：定义单元格
1、rowspan：规定单元格可横跨的行数
2、colspan：规定单元格可横跨的列数
案例：课程表

布局标签

标签	描述
< div>	定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局网页
< span>	用来和行内元素

<body>
		<div>这是一个div</div>
		<div>这是一个div</div>
		<span>这是一个span</span>
		<span>这是一个span</span>
</body>

在这里插入图片描述 div占一行（块级元素）
span 不会占一行只会占包裹内容的那一块（行内元素）

表单标签

表单：在网页中主要负责数据采集功能，使用< form>标签定义表单
表单项（元素）：不同类型的input 元素、下拉列表、文本框

标签	Value
< form>	定义表单
< input>	定义表单项通过type属性控制输入形式
< label>	为表单项定义标注
< select>	定义下拉列表
< option>	定义下拉列表的列表项
< textarea>	定义文本域

form：定义表单
1、action：规定当提交表单时向何处发送表单数据，URL
2、method：规定用于发送表单数据的方式- get：浏览器会将数据直接附在表单的action URL之后。大小有限制
-post：浏览器会将数据放在http请求信息体中。大小无限制
表单项数据要想被提交，必须指定name属性

表单标签 - 表单项

< input>:表单项，通过type属性控制输入形式
< select>:定义下拉列表，< option>定义列表项
< textarea>:文本域

type取值	描述
text	默认值。定义单行输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
hidden	定义隐藏输入字段
submit	定义提交按钮，将所有有name属性的值方式
reset	定义重置按钮
buuton	定义可点击按钮

CSS

css是一门语言，用于控制网页表现。css（Cascading style sheet）叠层样式表
W3C 标准：网页由三部分组成
1、结构：HTML
2、表现： CSS
3、行为 JAVAScript

CSS的导入方式

CSS 导入HTML有三种方式：
1、内联样式：在标签内部使用style属性、属性值是CSS属性值键值对
2、内部样式：定义< Style>标签，在便签内部定义CSS样式
3、外部样式：定义link标签，引入外部的css文件
CSS选择器：
概念：选择器是选取所需设置样式元素（范围小的）
分类
1、元素选择器：
元素名称{
color：red；
}
2、id 选择器
#id属性值{
color：red；
}
3、类选择器、
.class属性值{
color：red；
}

CSS属性

W3school