前端HTML5/HTML+CSS3/CSS学习笔记(一)

lhb-journey

已于 2022-02-19 15:26:07 修改

阅读量793

点赞数

分类专栏： HTML+CSS学习文章标签：前端学习 html

于 2022-02-18 17:41:46 首次发布

本文链接：https://blog.csdn.net/weixin_51227348/article/details/123007402

版权

HTML+CSS学习专栏收录该内容

10 篇文章 2 订阅

订阅专栏

初始HTML5

HTML5语法
一、标记的介绍及属性
二、补充知识点

HTML5语法

一、标记的介绍及属性

1.标签不区分大小写
2.允许属性值不使用引号
3.允许部分属性值的属性省略

HTML标记
分为两大类
双标记：指由开始和结束两个标记符组成的标记 <标记名>内容<标记名>
单标记：指用一个标记符号即可完整地描述某个功能地标记 <标记名/>

HTML注释标记
基本语法格式：
Ctrl+/可以对选取内容进行注释或反注释
Ctrl+Shift+/可以对选取内容进行开启或关闭注释内容

注释内容不会显示在浏览器中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码就可以看到。
<!—这是一段注释。注释内容不会显示在浏览器中。–>

标记属性
基本语法格式：
<标记名属性1=“属性值1”属性2=“属性值2”…>内容</标记名>

属性和属性值的关系¹

<title>:<title>标记用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标记之内。
<meta>:<meta>标记用于定义页面的元信息，可重复出现在<head>头部标记中。
<link>:在<head>中使用 <link>标记可引用外部文件，一个页面允许使用多个<link>标记引用多个外部文件。
<style>:<style>标记用于为HTML文档定义样式信息，位于<head>头部标记中

一个HTML文档只能含有一对<title></title>标记
基本语法格式：<title>内容</title>

meta定义页面元信息
meta 标记用于定义页面的相关参数，例如为搜索引擎提供网页的关键字，作者姓名，内容描述，以及定义网页的刷新时间。
使用name、content定义网页搜索内容名称为：关键字、网页描述、网页作者
使用http-equiv/content设置服务器发送浏览器的http头部信息，为浏览器显示该页面提供相关的参数。
如：

设置网页关键字
<meta name=“keywords” content=“JAVA、php" />
设置网页描述
<meta name=“description“ content=“IT培训教育”/>
设置网页作者
<meta name=“author” content=“传智播客" />
设置字符集
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
设置页面自动刷新与跳转
<meta http-equiv="refresh" content="10;url=http://www.itcast.cn" />

<link>
基本语法格式：
<link 属性="属性值" />

属性名	常用属性值
href	URL
rel	stylesheet
type	text/css
—	text/javascript

属性名	描述
href	指定引用外部文档的地址
rel	指定当前文档与引用外部文档的关系，该属性值通常表示定义一个外部样式表
type	引用外部文档的类型为CSS样式表
—	引用外部文档的类型为javascript脚本

<style>
基本语法格式：
<style 属性=”属性值”>样式内容</style>
在HTML中使用style标记时，常常定义其属性为type，相应的属性值为text/css，表示使用内嵌式的CSS样式。

标题和段落标记
基本语法格式
<hn align="对齐方式">标题文本</hn>
left ：设置标题文字左对齐（默认值）
center：设置标题文字居中对齐
right：设置标题文字右对齐

段落标记
基本语法格式
<p align="对齐方式">段落文本

水平线
基本语法格式
<hr 属性="属性值"/>
<hr />是单标记，在网页中输入一个<hr />，就添加了一条默认样式的水平线。

<hr />标记的常用属性
属性名		含义			             属性值
align	设置水平线的对齐方式  可选择left、right、center三种值，默认为center，居中对齐
size	设置水平线的粗细 	   以像素为单位，默认为2像素
color	设置水平线的颜色	   可用颜色名称、十六进制#RGB、rgb(r,g,b)
width	设置水平线的宽度	   可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%

换行标记<br />用于实现段落强制换行的效果。

文本格式化标记

	标记				                  	显示效果
<b></b>和<strong></strong>		文字以粗体方式显示（XHTML推荐使用strong）

<i></i>和<em></em>				文字以斜体方式显示（XHTML推荐使用em）

<s></s>和<del></del>			文字以加删除线方式显示（XHTML推荐使用del）

<u></u>和<ins></ins>			文字以加下划线方式显示（XHTML不赞成使用u）

图像标记
基本语法格式
<img src="图像URL" /> 其中src属性用于指定图像文件的路径和文件名

alt：图像的替换文本属性，在图像无法显示时告诉用户该图片的内容。

width，height：用来定义图片的宽度和高度，通常我们只设置其中的一个，另一个会按原图等比例显示。

border：为图像添加边框、设置边框的宽度。但边框颜色的调整仅仅通过HTML属性是不能够实现的。

vspace，hspace：HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。

align：图像的对齐属性align。用于调整图像的位置

*图像标记<img/ >中的属性title可以用于设置鼠标悬停时图像的提示文字。

相对路径:
相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。
绝对路径:
绝对路径一般是指带有盘符的路径，例如完整的网络址 “http://www.itcast.cn/images/logo.gif”。
相对路径设置分类:
1.图像文件和html文件位于同一文件夹：
只需输入图像文件的名称即可，如<img src=“logo.gif” />。
2.图像文件位于html文件的下一级文件夹：
输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
3.图像文件位于html文件的上一级文件夹：
在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，
如<img src="../logo.gif" />。
超链接标记
<a></a>标记
基本语法格式:
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

超链接标记常用属性:
href:用于指定链接目标的url地址，当为标记应用href属性时，它就具有了超链接的功能。

target:
用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。

二、补充知识点

html文档创建命名不能以数字或者特殊符号开头，下划线和中杆例外。在项目中不可用汉子命名。
Html属于超文本标记语言，描述网页的语言，不属于编程语言，由一套标记标签组成。
<！DOCTYPE html>作用是告诉浏览器用什么样的标准去解析浏览器。不区分大小写。
双标签<html></html>也可说为开发标签和闭合标签。
单标签也为空元素，在起始标签结束。
语义化标签：
概念：根据标签名就能判断标签内容。
作用：
1.网页结构层次更清晰
2.更容易被搜索引擎收录
3.更容易让屏幕阅读器读出网页内容
如：导航标签<nav></nav>,头部标签<header></header>,底部标签<footer></footer>
注意：页面中所有内容都要放在html中。
元信息：<meta charset=”utf-8”>可以使页面显示出的内容汉字化，如没此句，则会出现乱码。