Web前端（HTML+CSS）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52173610/article/details/132516982

HTML

HTML(HyperText Markup Language), 超文本标记语言。用于在浏览器上显示内容
扩展名：html, htm
用浏览器来显示html文件
主流的浏览器内核（引擎）：IE、Chrome、Firefox
W3C（World Wide Web Consortium）：万维网联盟，规定HTML标准
HTML版本：目前最新5.0（WEB前端 == H5）
参考：https://www.w3school.com.cn/
https://www.runoob.com/html/html-tutorial.html

HTML开发工具

Hbuildx
VSCode
Webstorm

这边使用的是Hbuildx下载：https://www.dcloud.io/hbuilderx.html
解压即可使用

html页面的结构：

Head里面的这两个标签跟搜索有关：

<meta name="keywords" content="html, 学习，web">
<meta name="description" content="网页的描述文字，在搜索的时候显示的内容">

这是HTML中的<meta>标签，用于在页面中定义网页的关键词和描述信息。搜索引擎可以根据这些关键词和描述信息来理解和索引网页内容，从而在搜索结果中显示相关的页面描述。以后写好的网页想更多人能直接搜索到可以起点牛逼的关键字。

其余标签见名知意啊，没什么实际作用。

HTML常用标签

p标签：段落，HTML 段落是通过标签 <p> 来定义的

h标签: 标题， HTML 标题是通过标签 <h> 来定义的

a标签：超链接， HTML 超链接是通过标签 <a> 来定义的,href 是标签的属性，指定点击该链接之后显示的网页的地址.

iframe：内联框架（iframe）是一种在网页中嵌入其他网页或文档的HTML元素。它可以在一个网页中显示另一个网页，就像是在网页中创建了一个嵌套的浏览器窗口。

通过使用iframe，可以将外部网页、文档或媒体内容（如视频、音频等）嵌入到当前网页中的特定位置。它可以与其他HTML元素一起使用，并且可以通过指定URL或直接内嵌代码来加载不同的内容。

使用iframe的一些常见应用包括：嵌入地图、嵌入视频播放器、显示广告、嵌入社交媒体分享按钮、显示外部网页内容等。

<a href="http://www.baidu.com">百度</a>
<!-- target属性指定打开页面的窗口方式：
_blank - 打开一个新窗口； _self - 当前窗口； _parent - 父窗口；top - 最顶
层窗口 -->
<a href="http://www.hqyj.com" target="_blank">华清远见</a>
<!-- target还可以是iframe的name -->
<a href="http://www.hqyj.com" target="hqyj">华清远见(iframe)</a>
<iframe name="hqyj" src="" width="500px" height="500px"></iframe>
<h3  id="num1">三级标题</h3>
<!-- 锚点：href属性用#开头，后面跟上标签的id的值，点击这个链接，网页显示第一行就会跳转到
id标签位置（三级标题） -->
<a href="#num1">链接到本页的锚点</a>

img标签：图像，src属性表示图像来源，还可以内联style设置图片样式.

以下为常用标签：行内元素指与其他行内元素并排，不能设置高度和宽度，不设置宽度默认高宽为文字大小

块级元素指独占一行的元素，不能与其他元素并排，能设置宽高，不设置宽度默认为父级的宽度的100%

CSS选择器

<div class='box'>
    <div id='box1'>
    <p>box1的p标签</p>
</div>
    <p>box的p标签</p>
</div>

选择器设置CSS

<style>
			.box{
				width: 200px;
				height: 200px;
				border: 1px solid red;
			}
			#box1{
				idth: 200px;
				height: 200px;
				border: 1px solid red;
			}
			p{
				color: aliceblue;
				font-size: 12px;
			}
</style>

外部引用CSS

<link rel="stylesheet"/ href="../box1.css">

根据选择不同的属性来选择标签，选择" class='box' "的div设置样式应采用 " .box{} ",通过class选择称为类选择器；选择" id='box1' "的div设置样式应采用" #box1{} "l;选择" p "标签采用 " p{} ".通过标签名直接选择标签称为HTML选择器，设置标签样式还可以通过内联的方式设置

内联CSS

<p style="color: red;align-items: baseline;">box的p标签</p>

其中内联CSS浏览器解析最快。

常用样式

文本与字体
- font-size:14px 文字大小
- font-family:宋体字体
- font-weight:bold/light 字体粗细
- color:#fcc 字体颜色
- text-decoration:none 文本修饰，在文字中添加一条s线
- list-style:none 列表风格，none为隐藏列表前的图标或序号
边框与尺寸
- width:50px/50%/50vw 宽度
- height:50px/50%/50vh 高度
- border:1px solid red 边框大小，颜色
- border-radius:50%/5px 圆角，50%为圆
- border-collapse:collapse 边框线折叠
位置
- position:relative/absolute/fixed 位置，相对位置，绝对位置，弹性布局
- left/right/bottom/top:20px 左右下上
背景
- background-color:#fcc 背景色
- background-image:url() 背景图片
- background-size:cover 背景全覆盖，使用可避免图片变形，使图片完全撑入容器
- background-position:10px 图片位置
边距
- margin-left:20px 左边距
- margin:10px auto 外边距，即上下左右距离边的距离都为10px， auto 居中
- padding:10px 20px 30px 边框距，四个参数，为上，右，下，左，三个参数为上，左右，下

显示方式

display:block/inline-block/inline/flex/none

none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。