html基本概念1.0

最新推荐文章于 2024-03-22 17:00:28 发布

柠檬红茶不加冰

最新推荐文章于 2024-03-22 17:00:28 发布

阅读量219

点赞数

分类专栏： html 文章标签：前端

本文链接：https://blog.csdn.net/m0_51697327/article/details/115272466

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.0目标

网页的基本组成
html
web标准的三大组成
网站：

网页的集合

网页由图片，链接，文字，声音，视频等元素组成，通常是html文件

html：

超文本标记语言，他是用来描述网页的一种语言

是一种标签语言

超文本有两层含义

1.图片声音动画和多媒体等内容

2.可以从一个文件跳转到另一个文件，与世界各地的文件链接（超级链接文本）

前端开发代码，浏览器显示代码，生成最后的web页面

浏览器内核：

即为渲染引擎：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

IE：trident

chrome：blink（webkit）

safari：webkit

web标准：

web标准是由w3c组织和其它标准化组织指定的一系列标准的集合。

web标准的构成：

结构，表现，行为

结构，结构对网页元素进行整理和分类，html

表现，设置网页元素的办事，颜色大小等外观样式，css

行为,指网页模型的定义及交互的编写，javascript

最佳体验方案结构样式行为相分离。

2.0目标

能够说出标签的书写注意规范
写出html骨架标签
写出超链接标签
写出图片标签并说出 alt 和 title 的区别
说出相对路径的三种形式

html语法规范，基本结构标签，常用标签，注释和特殊字符

开发工具

2.1

html语法规范

1.html标签是由尖括号包围的关键词

2.通常成对出现，称为双标签

3.有些单个出现，称为但标签

标签关系

包含和并列关系

1.html基本结构标签

每一个网页都会有一个基本的结构标签（骨架标签），页面内容也是在这些基本标签上书写

html页面页称为html 文档

<html></html>  html标签  页面中最大的标签  

<head></head>文档的头部 注意在head标签中我们必须要设置的标签是title

<title> 	文档标题

<body>	文档的主体，大部分内容都是在body中的

2.2

标签

lang语言
charset字符集
DOCTYPE

文档类型声明，告诉浏览器使用哪种html版本来显示网页；

必须在头部，且不是html标签，是文档类型声明标签；

lang

用来定义当前文档显示的语言，对浏览器起一个警示的作用（即为浏览器要不要翻译）

en为用于英文
zh-cn为中文
charset字符集

能够识别和存储各种各样的文字

在<head>标签内，可以通过<meat>标签的charset属性来规定

html文档应该使用那种字符编码，常用的有UTF-8。

不写会乱码。

3.0html常用标签

3.1标签语义

在合适的地方给一个合理的标签，可以使页面更好看

标题标签，段落标签

3.2标题标签

<h1-6>有6个等级

加了标题标签的文字一般会变大和加粗

且一个标题就会占据一整行

3.3段落和换行标签

<p>定义段落即为paragraph

语义：可以把文章文成不同的段落

特点：会根据浏览器的窗口大小自动换行 段落和段落之间有空隙

<br />换行，即为break换行

语义：强制换行

特点：单标签，不会在行和行之间留空隙

3.4文本格式化标签

加粗、斜体、下划线、删除线

语义：如出重要性，比普通文字更重要

加粗

	<strong>或者<b>

倾斜

	<em>或者<i>

删除线（中划线）

	<del>或者<s>

下划线

	<ins>或者<u>

前两个比较重要

3.5

标签

没有语义，就是拿来装东西的

div即为division分区分割，span即为跨距

特点：

		<div>一行只可以放一个，用来布局。大盒子

		<span>一行可以放很多个，小盒子

3.6图像标签和路径

1.图像标签

标签用于定义html页面中的图像,即为image的缩写;

示例:

src是标签必须的属性，它用于指定图像文件的路径和文件名

所谓属性：即为属于这个图像的特性

图像标签的其它属性：

alt 文本（当图片显示不出来的时候显示的文本），

title 文本（鼠标放上去显示的文本）即为提示文本

width，height宽高，border边框粗细

注意点：

图像标签可以有多个属性，必须写在标签的后面

属性之间不分顺序

属性采用键值对的格式

3.7图像标签和路径

路径

目录文件夹：就是普通文件夹，html文件、图片等

根目录

vs可以打开一个根目录

2.路径

通常会建立一个文件夹来放图片，再查的话就要用路径了。

分为：相对路径、绝对路径

相对路径：图片相对于html文件的位置

下一级

	<img src=“images/img.jpg"/>

上一级就是把images换成..

绝对路径：

一般不怎么用，是从盘符开始的路径

这个比较好，可以从网络上获取

3.8超链接标签

通过可以从一个页面链接到另一个页面

1.链接的语法格式

<a href="跳转目标”target=“目标窗口的弹出方式”>文本或图像 </a>

targe有“_self”（替换）和”_blank"（另外启动）

2.链接分类

1.外部链接

2.内部链接

3.空链接 href=“#”

4.下载链接：如果href给的是一个文件或者压缩包那么就会下载一个文件

5.图片文字一大堆都可以作为超链接

6.锚点链接：当点击后可以快速定位到页面种的某个位置

<a href="#xxx">第二集</a>

<h3 id="xxx">第二集的内容</h3>

4.注释和特殊字符

注释

ctrl+/

特殊字符

讲&nbsp;究

0&lt;1

1&gt;0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>
        <!-- 我想喝咖啡 -->
        怎么说？<br/>最近好好运动了吗？？<br/>在好好吃饭吗？？
        <br/>
        哈哈哈
    </h1>
    开心的话
    <br/>
    点一下这个链接吧，因为他会让你更快乐
    <br/>
    &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://img.doutula.com/production/uploads/image/2021/01/27/20210127718015_vYyGnq.jpg"target="_blank"><strong>点我</strong></a>&nbsp;    
    <br/>
    &nbsp;&nbsp;&nbsp;<strong>冲冲冲！</strong>    
</body>
</html>