html静态页面

香芋320

已于 2023-05-12 17:24:12 修改

阅读量3.8k

点赞数 1

分类专栏：计算机文章标签： html css 前端

于 2021-05-06 22:10:37 首次发布

本文链接：https://blog.csdn.net/niqiu320/article/details/116429858

版权

计算机专栏收录该内容

46 篇文章 0 订阅

订阅专栏

0x00 什么是网页？

网页是网站中的-“页”，通常是HTML格式的文件，它通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .hmtl 后缀结尾的文件，因此将其俗称为HTML文件。

什么是HTML？

HTML指的是超文本标记语言，它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言。
标记语言是一套标记标签。

所谓超文本，有2层含义：

1、它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
2、它还可以从一个文件跳转到另一个文件中，与世界各地主机的文件连接（超级链接文本）。

网页的形成

网页是由网页元素组成的，这些元素是利用html标签描述出来的，然后通过浏览器解析来显示给用户。

常用浏览器

浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐（firefox）、谷歌（Chrome）、Safari和Op
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

Web标准

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

Web标准的构成

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
Web标准提出的最佳体验方案：结构、样式、行为相分离。
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

0x01 HTML语法规范

基本语法概述

1、HTML标签是由尖括号包围的关键词，例如<html>
2、HTML标签通常是成对出现的，例如<html>和</hmtl>，我们称为双标签。标签中的第一个标签是开始标签，第二个是结束标签。
3、有些特殊的标签必须是单个标签（极少情况），例如<br/>我们称为单标签。

标签关系

双标签关系可以分为两类：包含关系和并列关系。

HTML基本结构标签

第一个HTML网页

<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
      你好！HTML
</body>
</html>

基本结构标签含义

标签名	定义	说明
`<html></html>`	HTML标签	页面中最大的标签，我们称为根标签
`<head></head>`	文档的头部	注意在head标签中我们必须要设置的标签是title
`<title></title>`	文档的标题	让页面拥有一个属于自己的网页标题
`<body></body>`	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

HTML文档中的后缀名必须是 .html或.htm ，浏览器的作用是读取HTML文档，并以网页的形式显示出它们。
此时，用浏览器打开这个网页，我们就可以预览我们写的第一个HTML文件了。

网页的开发工具
Sublime：适合javascript开发，优点：快捷操作比较方便，打开速度比较快。

Sublime的使用
1、双击打开软件
2、新建文件（Ctrl+N）
3、保存（Ctrl+s），注意一定要保存为 .html文件
4、Ctrl+加号键，Ctrl+减号键可以放大缩小视图
5、生成页面骨架结构
6、输入！按下Tab键

Sublime工具生成骨架标签新增代码
1、<!DOCTYPE>标签
2、lang语言
3、charset字符集

文档类型声明标签
<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

lang语言种类
用来定义当前文档显示的语言
1、en定义语言为英语（英文网页）
2、zh-CN定义语言为中文（中文网页）

字符集（不写会乱码）
字符集（Character set）是多个字符的集合。以便计算机能够识别和存储各种文字。
在标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8"/>charset

0x02 HTML常用标签

标签语义

根据标签的语义，在合适的地方给一个最为合理的标签，可以让网页结构更清晰。

标题标签
<h1>-<h6>

段落标签

<p>我是一个段落标签</p>

换行标签

<br/>是个单标签，强制换行

<br/>

文本格式化标签

语义	标签	说明
加粗	`<strong></strong>` 或者`<b></b>`	更推荐使用`<strong>`标签加粗语义更强烈
倾斜	`<em></em>` 或者`<i></i>`	更推荐使用`<em>`标签加粗语义更强烈
删除线	`<del></del>` 或者`<s></s>`	更推荐使用`<del>`标签加粗语义更强烈
下划线	`<ins></ins>` 或者`<u></u>`	更推荐使用`<ins>`标签加粗语义更强烈

<div>和<span>标签
<div>和<span>标签是没有语义的，它们就是一个盒子，用来装内容。

图像标签
在HTML标签中，<img>标签用于定义HTML页面中的图像。
语法：<img src='图片的源'alt="title="width="height="/>
src：图片的地址。
alt：当图片无法显示的时候，将alt后面的文字显示在图片的位置上。
title：当鼠标放到图片位置的时候显示提醒性文字。

路径

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如`<img src="baidu.gif"/>`
下一级路径	/	图像文件位于HTML文件下一级如`<img src="images/baidu.gif"/>`
上一级路径	…/	图像文件位于HTML文件上一级如`<img src="../baidu.gif"/>`

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

绝对路径：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径

超链接标签
链接的语法格式

<a href="跳转目标（指定链接目标的url地址）"target="目标窗口的弹出方式（用于指定链接页面的打开方式）">文本或图像</a>

超链接分类
1、外部链接：<a href ="http://www.baidu.com">百度</a>
2、内部链接：<a href="index.html">首页</a>
3、空链接：<a href="#">首页</a>
4、下载链接：如果href里面地址是一个文件或压缩包，会下载这个文件。
5、网页元素链接：在网页中各种网页元素，如文本、图片、表格、音频、视频等都可以添加超链接。
6、锚点链接：<a href="#two">第2集</a>

  <h3 ld="two">第二集介绍</h3>

注释

<!--注释语句-->

快捷键：
ctrl+/

特殊字符
重点：空格、大于号、小于号
在这里插入图片描述

0x03 表格

表格的基本语法

<table border=1>
    <tr>
          <td>单元格内的文字</td>
     ...
    </tr>
     ...
</table>

表头单元格标签

<table>
     <tr>
          <th>姓名</th>
      ...
     </tr>
      ...
<table>

单元格对齐
水平对齐
语法：allgn="center/left/right"
垂直对齐
语法：vallgn="top/middle/bottom"

单元格间距和填充
单元格间距：默认像素：2
单元格填充：默认像素：1

合并单元格
合并行（rowspan）
合并列（colspan）

0x04 列表标签

简介
表格用来显示数据，列表用来布局。

无序列表

<ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
...
</ul>

<ul></ul>中只能嵌套<li></li>

有序列表

<ol>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
...
</ol>

<ol></ol>中只能嵌套<li></li>

自定义列表
在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目、名字)一起使用。

<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>

<dl></dl>里面只能包含<dt>和<dd>

0x05 表单标签

为什么需要表单
使用表单目的是为了收集用户信息。
在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

表单的组成
在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息3个部分组成。

表单域
表单域是一个包含表单元素的区域。
在HTML标签中，标签用于定义表单域，以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器。

<form action="url地址" method="提交方式" name=“表单域名称”>
各种表单元素控件
</form>

表单控件
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件

<input type="属性值"/>

<label for="sex">男</lable>

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
     ...
</select>

<textaea row="3" cols="20">
文本内容
</textarea>

香芋320

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
html静态页面

0x00 什么是网页？网页是网站中的-“页”，通常是HTML格式的文件，它通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .hmtl 后缀结尾的文件，因此将其俗称为HTML文件。什么是HTML？HTML指的是超文本标记语言，它是用来描述网页的一种语言。HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记标签。所谓超文本，有2层含义：1、它可以加入图片、声音、动画、多媒体等内容（超越了文本
复制链接

扫一扫