前端夯实基础（二）--- HTML（超文本标记语言）基础

最新推荐文章于 2024-03-05 19:50:41 发布

那等雨停吧

最新推荐文章于 2024-03-05 19:50:41 发布

阅读量306

点赞数

分类专栏： Front-End 前端夯实基础文章标签： HTML 标签语义化

本文链接：https://blog.csdn.net/WRian_Ban/article/details/99703815

版权

Front-End 同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

前端夯实基础

9 篇文章 0 订阅

订阅专栏

1、超（Hyper）文本？

可以加入图片、声音、动画、多媒体等内容，还可以与其他文件链接。

2、标记语言

标记语言就是一套标记标签。用标记来描述网页，把网页在浏览器中展示出来。
标准的HTML文件必须要有四大标签<html>、<body>、<head>、<title>

3、标签类型

双标签：head、body、div、span···
单标签：br、hr、img···

或

块级元素：html、body、div、header、footer、nav、section、aside、article、p、hr、h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr···
行内元素：span、a、img、textarea、button、input、label、select、br、canvas、progress、cite、code、strong、em、audio、video···

块级元素：会自动换行，可修改宽高。
行内元素：不会自动换行，行内元素左右可以有其他元素，行内元素设置宽高无效，设置上下margin无效，设置上下padding类似无效（不影响文档流排列）。

或

替换元素：替换元素根据其标签和属性来决定元素的具体显示内容，<img>、<input>、<textarea>等。替换一般有内在尺寸如img默认的src属性引用的图片的宽高，表单元素如input也有默认的尺寸。img和input的宽高可以设定。
不可替换元素：即将内容直接表现给用户端。

4、`<!DOCTYPE html>`

告诉浏览器，这个文档是html5版本标准规范，应该使用指定的文档类型进行解析。

5、`<meta>`标签属性解析

charset字符集
常用字符集：

UTF-8：包含全世界所有国家需要用的字符
GB2312：国家标准码，简体中文，6763个汉字
BIG5：繁体中文，港澳台使用
GBK：国标扩展，支撑繁体中文，包括全部中文字符
更多请前往：前端值得一探究竟特辑 — meta标签属性总结

6、标签语义化

例如：title（文档标题）、head、body、footer、nav、aside、article、h1、h2、···、h6（文本标题）

方便代码的阅读和维护
有利于浏览器或网络爬虫的解析，从何分析网页内容
有利于搜索引擎优化

意义：即使没有CSS，网页结构依然组织有序，有良好的可读性。

7、`<p>`、`<pre>` 与`<br />`

<p>包裹段落，不会解析文本中的空格和换行符。并且段与段之间间隔较大。
<pre> 被包裹在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<br />插入换行符，强行换行。上下两行是行间距。

8、`<div>` 与 `<span>`

<div> 与 <span>都是无语意标签。
<div>是块级元素。
<span>是行类元素，不能设置宽高。

9、文本格式化标签

<b>加粗
<s>删除
<i>或<em>斜体
<u>或<ins>下划线
<mark>高亮显示

10、`<img />`

特殊的行内元素，可以设置宽高。
常用属性：

src：图片路径。
alt：图片无法显示时的替换文本。
title：鼠标悬停时显示的文本。

11、`<a>`与锚点，及`<base />`

<a>不仅可以创建文本链接还可以在网页中各种元素添加超链接。
target属性：目标窗口打开的方式
- _self：默认值，在本窗口打开新页面
- _blank：在新窗口中打开

点击链接打开邮件客户端mailto

<a href="mailto: lizbaby***@163.com" > 发送邮件</a>

锚点，则是使用锚点链接，使用户快速定位到目标内容

<a href="#idName">个人信息</a>

···

<div id="idName">
	<p>姓名：xxx</p>
	<p>年龄：xxx</p>
</div>

<base target="_blank" />为页面上所有链接规定默认目标。（仅针对没有设置目标窗口打开的方式的链接元素）

12、特殊字符

在HTML中，如果用空格键产生空格，这些空格是不会累加的，解析结果只会显示一个空格，这时就需要使用html实体 表示才可累加。
大多数都可以在不进行实体引用的情况下使用，实体名称或实体编号为那些不容易通过键盘键入的符号提供了表达的方法。
注释：实体名称对大小写敏感。
HTML ASCII 参考手册
 HTML ISO-8859-1 参考手册

13、列表

无序列表

<ul>
	<li>···</li>
	<li>···</li>
	<li>···</li>
	···
</ul>

有序列表

<ol>
	<li>···</li>
	<li>···</li>
	<li>···</li>
	···
</ol>

自定义列表

<dl>
	<dt>标题1</dt>
	<dd>对标题1的描述1</dd>
	<dd>对标题1的描述2</dd>
	···
</dl>

<dl>
	<dt>标题2</dt>
	<dd>对标题2的描述1</dd>
	<dd>对标题2的描述2</dd>
	···
</dl>

用于首页底部链接导航
在这里插入图片描述

那等雨停吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端夯实基础（二）--- HTML（超文本标记语言）基础

1、超（Hyper）文本？可以加入图片、声音、动画、多媒体等内容，还可以与其他文件链接。2、标记语言标记语言就是一套标记标签。用标记来描述网页，把网页在浏览器中展示出来。3、标签类型双标签：head、body、div、span···单标签：br、hr、img···或块级元素：html、body、div、header、footer、nav、section、aside、arti...
复制链接

扫一扫