2020-10-12 html(一)

最新推荐文章于 2024-10-27 15:14:37 发布

Starry577

最新推荐文章于 2024-10-27 15:14:37 发布

阅读量242

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/ttxwwdn/article/details/109038050

版权

学习目标：

网页
常用浏览器
Web标准
html标签
html常用标签

学习内容：

一、网页
1.1 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。html文件
1.2 html指的是超文本标记语言，不是编程语言（超文本：图片、视频、超链接等超越了文本限制）

**二、**常用浏览器
2.1 五大浏览器
IE(Trident)、火狐(Gecko)、谷歌(Blink)、Safari(Webkit)和Opera(Blink)
2.2 浏览器内核（渲染引擎）
负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。国内浏览器都会采用（Webkit/Blink）

三、W3C标准
3.1 为什么需要web标准：
遵循web标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：
1、让web的发展前景更广阔
2、内容能被更广泛的设备访问
3、更容易被搜索引擎搜索
4、降低网站流量费用
5、使网站更易于维护
6、提高页面浏览速度

3.2 web标准的构成
主要包括结构、表现和行为三个方面
结构：结构用于对网页元素进行整理和分类，现阶段主要学的是html
表现：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为：行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript
web标准提出的最佳体验方案：结构、样式、行为相分离

四、html标签
1、html的语法规范：尖括号包含关键词、大多成对出现、单标签
2、标签关系：包含关系、并列关系
3、html骨架标签：html文档、头部、标题、主体

<html>
	<head>
		<title>标题</title>
	</head>
	<body>
		内容
	</body>
</html>

4、文档类型声明标签：<!DOCTYPE>作用就是告诉浏览器使用哪种html版本来显示网页（写在最前面）
5、lang语言种类：用于定义当前文档显示的语言

en定义为英语
zh-CN定义为中文
6、字符集：UTF-8也被称为“万国码”，不写会乱码

五、html常用标签
1、标题标签`

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
标签语义：head的缩写，作为标题使用，并且依据重要性递减  
特点：  1. 加了标题的文字会变得加粗，字号也会依次变大      
       2. 一个标题独占一行

2、段落和换行标签

<p>段落标签</p>
标签语义：把html文档分割成若干段落
特点：
 1. 文本在一个段落中会根据浏览器窗口的大小自动换行
 2. 段落和段落之间保有空隙

<br />换行标签
标签语义：break的缩写，强制换行
特点：
 1. 是单标签
 2. 只是简单的开始新的一行

3、文本格式化标签

<strong>加粗</strong>或<b>加粗</b>
<em>倾斜</em>或者<i>倾斜<i>
<del>删除线</del>或者<s>删除线</s>
<ins>下划线</ins>或者<u>下划线</u>

标签语义：突出重要性，比普通文字重要

4、<div>和<span>标签

没有语义，是一个盒子，用来装内容
<div>内容</div>
<span>内容</span>

特点：<div>标签用来布局，但是现在一行只能放一个<div>
     <span>标签用来布局，一行可以多个

5、图像标签

<img src="图像URL">

<img>是单标签
1、属性
src是<img>标签的必须属性，用于指定图像文件的路径和文件名
其他属性：alt：替换文本，图像不能显示的文字
	title：提示文本，鼠标放到图像上，显示的文字
	width：设置图像的宽度
	height：设置图像的高度
	border：设置图像的边框粗细
注意点：
 1. 图像标签可以有多个属性，必须写在标签名的后面
 2. 属性之间不分先后顺序，属性和属性之间使用空格隔开
 3. 属性采取键值对的形式 key="value"

2、路径
 1. 相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。（图片相对于html页面的位置）
	同一级路径（）：图像位于html同一级<img src="theme.png">
	下一级路径（/）：图像位于html下一级<img src="images/theme.png">
	上一级路径（../）：图像位于html上一级<img src="../theme.png">
 2. 绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径，也可以是一个完整的网络地址