HTML基础

机智的小陈今天学习了吗

于 2022-03-24 17:00:48 发布

阅读量1.7k

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/weixin_43890415/article/details/123715705

版权

一.HTML简介

1.1 认识网页

1.网页组成：文字、图片、音频、视频、超链接

2.前端代码通过浏览器解析与渲染转换成用户看到的网页

1.2 浏览器

1.浏览器：网页显示、运行的平台

2.常见5大浏览器:IE Firefox Chrome Safari Opera

3.渲染引擎(浏览器内核)：浏览器中专门对代码进行解析渲染的部分

**四大浏览器内核：**IE（Trident）、Firefox（Gecko）、Safari（Webkit）、Chrome / Opera / Edge（Blink 属于 Webkit 的分支，Blink 兼容 Webkit）

渲染引擎不同，解析相同代码的速度、性能、效果也不同。

1.3 web标准

结构：HTML 页面元素和内容

表现：CSS 网页元素的外观、位置等页面样式

行为：JavaScript 网页模型的定义与页面交互

二.HTML

2.1 注释

快捷键：ctrl+/

2.2 标签

2.2.1 构成

1.双标签：成对出现有开始与结束位置第一个标签是开始标签，第二个标签是结束标签

2.单标签

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fedcn2He-1648112141406)(F:\Documents\1648101880558.png)]$

2.2.2 关系

1.嵌套关系

<head>

	<title> </title>

</head>

2.并列关系

<head></head>

<body></body>

2.2.3 标签学习

1.标题标签:作为标题使用加粗字号变大

<h1>一级标题</h1>
	.
	.
	.
<h6>六级标题</h6>

2.段落标签

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

自动换行
有行间距与段间距

3.换行标签

<br>
<!--break缩写-->

单标签无段间距

4.分割线标签

<hr>
<!-- 某些时候需要对内容块进行分割时会用到分割线标签 -->

5.文本格式化标签

加粗：<strong></strong>或<b></b>

倾斜：<em></em>或<i></i>

删除线：<del></del>或 <s></s>

下划线：<ins></ins> 或<u></u>

<div>与<span>标签

用于对网页进行布局和装其它内容

div = division 表示分割分区 span 表示跨度
用来布局一行只能放一个大盒子
用来布局一行上可以放多个小盒子

7.图像标签

<img src="图像URL">

其它属性：

图片路径(必备)：src
替换文本(图像显示失败时显示)：alt
提示文本：title
图像宽度：width
高度：height
图像的边框粗细：border

8.路径

相对路径/(正斜杠) 绝对路径为\（反斜杠）
实际开发建议使用相对路径或网络地址

9.超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本、图像或其他内容</a>

a = anchor

href：指定链接目标的url地址
target：指定链接页面的打开方式（_self在当前页面打开，_blank在新窗口打开

链接分类:

**外部链接：**例如：<a href="http://www.baidu.com">百度</a>
**内部链接：**网站内部页面之间相互链接，直接链接内部页面名称即可，例如<a href="index.html">首页</a>
**空链接：**如果当时没有确定链接目标时，

<a href="javascript:void(0)">首页</a>，当用户点击链接时，void(0) 计算为 0，但 Javascript 上没有任何效果
**下载链接：**如果 href 里面地址是一个文件或者压缩包（前提：路径包含文件类型后缀名，如：.exe、.zip 等），便会下载这个文件
**网页元素链接：**在网页中的各种网页元素，如：文本、图像、表格、音频、视频等都可以添加超链接
**锚点链接：**点击链接，可以快速定位到当前页面中的某个位置
- 在链接文本的 href 属性中，设置属性值的 #名字的形式，如：<a href="#two">第2集</a>
- 找到目标位置标签（此处以 h3 标签为例），里面添加一个 id属性=“刚才的名字”，如：<h3 id="two">第2集介绍</h3>
- <a href="#"></a> 默认定位到页面顶部

2.2.4 文档类型声明标签

<!doctype>文档类型声明告诉浏览器该使用哪种html版本来解析渲染网页

<!doctype html>
<!-- 当前页面采用 HTML5 版本 -->

2.2.5 lang语言种类

定义当前网页显示的主语言

en定义语言为英文=》面向英文用户
zh定义语言为中文=》面向中国大陆用户

<html lang="zh-CN"> 
</html>

en-GB 英文（英国）

en-US 英文（美国）

zh-CN 中文（简体，中国大陆）

zh-SG 中文（简体，新加坡）

zh-HK 中文（繁体，香港）

zh-MO 中文（繁体，澳门）

zh-TW 中文（繁体，台湾）

2.2.6 字符集

在 <head> 标签内，可以通过 <meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码

charset常用值：GB2312、BIG5、GBK、UTF-8

<meta charset="UTF-8">

标准骨架：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
</body>

</html>

2.3 特殊字符

特殊字符	描述	代码
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	上标	`²`

下标：<sub>2</sub> 上标建议用：<sup>2</sup>

2.4 表格

在这里插入图片描述

1.基本语法

<table>
    <tr>
        <td>单元格</td>
        ...
    </tr>
    ...
</table>

<table> </table> 是用于定义表格的标签
<tr> </tr> 用于定义表格中的行，必须嵌套在 <table> </table> 标签中
<td> </td> 用于定义表格中的单元格，必须嵌套在 <tr> </tr> 标签中
字母 td 指表格数据（table data），即：数据单元格的内容
单元格 td 里面可以放任何的元素

2.表头标签

<th> 标签表示 HTML 表格的表头部分（table head 的缩写）

一般表头单元格位于表格的第一行或第一列：默认加粗居中显示

3.表格属性

属性名	属性值	描述
`align`	`left`、`center`、`right`	规定表格相对周围元素的对齐方式（默认 left）（单元格内容对齐可以通过：`style="text-align: center;"` 设置）
`border`	`1` 或 `""`	规定表格单元是否拥有边框，默认为 “”，表示没有边框
`cellpadding`	像素值	规定单元边沿与其内容之间的空白，默认 1 像素
`cellspacing`	像素值	规定单元格之间的空白，默认 2 像素
`width`	像素值或百分比	规定表格的宽度
`height`	像素值或百分比	规定表格的高度

4.结构标签

<table>
    <!-- 头部区域 -->
    <thead>
    	<tr>
            <th>表头</th>
    	</tr>
    </thead>
    <!-- 主体区域 -->
    <tbody>
        <tr>
            <td>data</td>
        </tr>
    </tbody>
</table>

5.合并单元格

方式：

跨行合并（上下合并）：rowspan="合并单元格的个数"
跨列合并（左右合并）：colspan="合并单元格的个数"

目标单元格：

跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码

合并单元格步骤：

确定是跨行还是跨列合并
找到目标单元格，写上 合并方式=合并的单元格数量，比如：<td colspan="2"> </td>
删除多余单元格

2.5 列表标签

列表用于布局：整齐整洁有序

标签名	定义	说明
`<ul>` `</ul>`	无序标签	里面只包含 li，没有顺序，li 里面可以包含任何标签
`<ol>` `</ol>`	有序标签	里面只包含 li，有顺序，li 里面可以包含任何标签
`<dl>` `</dl>`	自定义标签	里面只能包含 dt 和 dd，dt 和 dd 里面可以放任何标签，dd 一般作为对 dt 的细分描述

2.6 表单标签

1.表单：收集用户信息，与用户进行交互

2.表单组成：表单域、表单控件、提示信息

3.表单域

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

常用属性：

属性名	属性值	作用
`action`	`url` 地址	用于指定接收并处理表单数据的服务器程序的 url 地址
`method`	`get` / `post`	用于设置表单数据的提交方式，其取值为 get 或 post
`name`	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

method中get与post的区别：
- get
  - 将表单数据以名称/值对的形式附加到 URL 中
  - URL 的长度是有限的（大约 3000 字符）
  - GET 更适用于非安全数据
  - 对于用户希望加入书签的表单提交很有用（因为信息记录在 URL 中，直接保存 URL 即可）
- post
  - 将表单数据附加到 HTTP 请求的 body 内
  - 没有长度限制
  - 不能加入书签

4.表单控件

<input type="属性值" />

属性值	描述
`button`	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
`checkbox`	定义复选框，即：多选框，在一组多选中，要求它们必须拥有相同的 name
`file`	定义输入字段和 “浏览” 按钮，供文件上传
`hidden`	定义隐藏的输入字段
`image`	定义图像形式的提交按钮
`password`	定义密码字段，该字段中的字符被掩码
`radio`	定义单选按钮，在一组单选按钮中，要求它们必须拥有相同的 name
`reset`	定义重置按钮，重置按钮会清除表单中的所有数据
`submit`	定义提交按钮，提交按钮会把表单数据发送到服务器
`text`	定义单行的输入字段，用户可在其中输入文本，默认宽度为 20 个字符

[hidden隐藏域]对于用户是不可见的，在表单中插入隐藏域的目的在于收集/发送信息，JavaScript不支持全局变量，在必须使用全局变量时可以将值先存于隐藏域。

input其它属性：

属性名	属性值	描述
`name`	由用户自定义	定义 input 元素的名称
`value`	由用户自定义	规定 input 元素的值，也就是提交到服务器的值
`checked`	checked	规定此 input 元素首次加载时应当被选中
`maxlength`	正整数	规定输入字段中的字符的最大长度

```
<label for="sex">
	男<input type="radio" name="sex" id="sex" />
</label>
```
标签为input定义标注，当点击label文本，浏览器自动将焦点转到对应的表单元素上。

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

<select> 中至少包含一对 <option>
在 <option> 中定义 selected="selected" 时，当前项即为默认选中项

用于定义多行文本输入的控件
```
<textarea rows="3" cols="20">
	文本内容
</textarea>
```
- 通过 <textarea> 标签可以轻松地创建多行文本输入框
- cols="每行中的字符数"，rows="显示的行数"，我们在实际开发中不会使用，都是用 CSS 来改变大小
- 如果要禁止拉伸文本框大小，则：style="resize: none"

2.7 内联框架

一个内联框架用于在当前HTML文档中嵌入另一个文档

<iframe src="URL"></iframe>

三. SEO优化

SEO:search engine optimization 搜索引擎优化

简单地说，SEO是指从自然搜索结果获得网站流量的技术和过程。

利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。（百度百科）

UEO：用户体验优化 = PV/OR

PV：即页面浏览量或点击量
OR：跳出率，跳出率指那些访问该网站，仅浏览了一个页面就离开的用户所占的比例

机智的小陈今天学习了吗

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

一.HTML简介1.1 认识网页1.网页组成：文字、图片、音频、视频、超链接2.前端代码通过浏览器解析与渲染转换成用户看到的网页1.2 浏览器1.浏览器：网页显示、运行的平台2.常见5大浏览器:IE Firefox Chrome Safari Opera3.渲染引擎(浏览器内核)：浏览器中专门对代码进行解析渲染的部分**四大浏览器内核：**IE（Trident）、Firefox（Gecko）、Safari（Webkit）、Chrome / Opera / Edge（Blink 属于 Web
复制链接

扫一扫