【学习笔记】HTML5+CSS3整理 | 一、HTML5基础

最新推荐文章于 2024-06-24 14:34:31 发布

BaisuX

最新推荐文章于 2024-06-24 14:34:31 发布

阅读量225

点赞数

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

本文链接：https://blog.csdn.net/weixin_43785855/article/details/114946058

版权

学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5+CSS3整理

一、HTML5基础

1.1基本格式

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body>
    </body>
</html>

1.`<!doctype>`

声明HTML标准规范，可无【单标签】

2.`<html>`

根标记，说明HTML代码范围，必须有，【双标签】

3.`<head>`

头部标记，封装其他位于文档头部的标记，必须有，【双标签】

例如：<title>、<meat>、<link>、<style>

4.`<body>`

主体标记，显示内容，必须有，【双标签】

1.2标记属性

<标记名 属性="属性值" 属性="属性值">内容</标记名>

1.3头部标记

1.`<title>`

设置页面标题【单标签】

<title>网页标题名称</title>

2.`<meta />`

定义页面元信息标记

（1）name/content

为搜索引擎提供信息，多个值之间可以用,分割

注意：一般默认三个有效

<meta name="名称" content="值" />

设置网页关键词

<meta name="keywords" content="值" />

设置网页关描述

<meta name="description" content="值" />

设置网页作者

<meta name="author" content="值" />

（2）http-equiv/content

设置服务器发送给浏览器的HTTP头部信息，提供相关参数

<meta http-equiv="名称" content="值" />

设置字符集

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

设置页面自动刷新与跳转

<meta http-equiv="refresh" content="时间; url=URL" />

3.`<link>`

引用外部文件【单标签】

<link 属性="属性值" />

属性名	常用属性值	描述
href	URL	引用外部文档地址
rel	stylesheet	指定当前文档和引用外部文档的关系
type	text/css	引用外部文档类型为CSS样式表
type	text/javascript	引用外部文档类型为JavaScript样式表

例如：

<link href="style.css" type="text/css" rel="stylesheet" />

4.`<style>`

内嵌样式标记

<style 属性="属性值">
    样式内容
</style>

属性常用type，属性值为text/css

1.4文本控制标记

1.`<hn>`

标题标记【双标签】

共6个等级，即<h1>、<h2>、<h3>、<h4>、<h5>、<h6>

<hn align="对齐方式">
    标题文本
</hn>

align属性取值：

left：左对齐（默认）
center：居中对齐
right：右对齐

注意：一个页面只能有一个<h1>

2.`<p>`

段落标记

<p align="对齐方式">
    段落文本
</p>

3.`<hr />`

水平线标记

<hr 属性="属性值" />

属性名	含义	属性值
align	设置对齐方式	left、right、center（默认）
size	设置粗细	单位：像素（px）；默认2px
color	设置颜色	常用颜色名称；十六进制#RGB；rgb(r,g,b)
width	设置宽度	单位：像素（px）、百分比（%）；默认100%

4.`<br />`

换行标记

<br />

5.文本格式化标记

效果	方式一	说明	方式二	说明
加粗	`<b>...</b>`	以粗体显示	`<strong>...</strong>`	强调文本
倾斜	`<i>...</i>`	以斜体显示	`<em>...</em>`	强调文本
删除线	~~`<s>...</s>`~~	~~H5不推荐使用~~	`<del>...</del>`	加删除线
下划线	~~`<u>...</u>`~~	~~H5不推荐使用~~	`<ins>...</ins>`	加下划线

6.特殊字符标记

特殊字符	描述	代码
	空格	` `
`<`	小于	`<`
`>`	大于	`>`
`©`	版权	`©`
`®`	注册商标	`®`

7.`<img />`

图像标记

<img src="URL" />

图片格式

格式	动画	压缩	透明	体积
GIF	是	无损压缩	支持	大
PNG	否	无损压缩	支持	小
JPG	否	有损压缩	不支持	大

属性

属性	属性值	描述
src	URL	图像的路径
alt	文本	图片显示异常时的文本
title	文本	鼠标悬停时显示的文本
width	像素/比例	设置图像宽度
height	像素/比例	设置图像高度
~~border~~	数值	~~设置边框宽度~~
~~vspace~~	像素	~~设置图像顶部和底部的空白（垂直边距）~~
~~hspace~~	像素	~~设置图像左侧和右侧的空白（水平边距）~~
~~align~~	~~left~~	~~图像对齐到左边~~
	~~right~~	~~图像对齐到右边~~
	~~top~~	~~图像顶端与第一行文字对齐~~
	~~middle~~	~~图像水平与第一行文字对齐~~
	~~bottom~~	~~图像底部与第一行文字对齐~~

注：删除线表示HTML不赞成使用

8.`<a>`

（1）超链接

<a href-"跳转目标" target="弹出方式">内容（文本或图像）</a>

href：指定链接目标的URL地址（http://…）
target：
1. _self：在原窗口打开（默认）
2. _blank：在新窗口打开

（2）锚点链接

<a href="#id1">ID1</a>
<p id='id1'>...</p>

BaisuX

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【学习笔记】HTML5+CSS3整理 | 一、HTML5基础

HTML5+CSS3整理文章目录HTML5+CSS3整理一、HTML5基础1.1基本格式1.``2.``3.``4.``1.2标记属性1.3头部标记1.``2.``（1）name/content（2）http-equiv/content3.``4.`一、HTML5基础1.1基本格式<!doctype html><html> <head> <meta charset="utf-8"> <title>标题
复制链接

扫一扫