HTML基础

一只小泰迪

已于 2022-02-15 15:19:06 修改

阅读量67

点赞数

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

于 2022-01-11 22:24:58 首次发布

本文链接：https://blog.csdn.net/weixin_38644630/article/details/122442623

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

认识HTML

认识网页

网页是有文字、图片、输入框、按钮、视频、音频……元素组成。
总结：网页就是HTML组成的

网页规范（万维网联盟W3C）

结构标准：制作网页必须按照HTML的标准去写网页
表现标准：用来美化网页CSS
行为标准：用来实现网页中用户的一些动作处理JavaScript

浏览器介绍

主流浏览器

IE浏览器、火狐浏览器、谷歌浏览器、Edge浏览器、Safari浏览器、Opera浏览器

内核（渲染引擎）

Trident（IE内核）：IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等
Gecko（firefox）：Gecko（Firefox内核）、Mozilla、Firefox（火狐浏览器）采用该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高
webkit（Safari）：Safari是苹果公司开发的浏览器，所用浏览器的名称是大名鼎鼎的webkit，傲游浏览器3、Apple safari(win/mac/iphone/ipad),Symbian手机浏览器、Android默认浏览器
Blink：大部分国产浏览器是最新版都采用Blink内核，二次开发，谷歌浏览器，Blink其实就是webkit分支
presto(Opera):presto(已经废弃）是挪威产的浏览器Opera的“前任”内核，最新的Opera浏览器已经用谷歌的内核

为什么要遵循WEB标准？

通过以上浏览器的内核不同，浏览器渲染或者排班的模式就有些许差异，显示就会有差别，导致用户在不同的浏览器看到同一个页面是不同的效果
处于不同的浏览器解析出来的效果可能不一致，开发者常常需要为多版本的开发而艰苦工作
因此，通过web标准，来进行展示统一内容

HTML概念

HTML：Hyper Text Markup Language（超文本标记语言）
超文本：本质就是一个文本（在网页中，用来实现页面跳转的文本 — 超链接标签）
标记：记号（各种HTML标签）标签

标签的语法

语法一：<标签名></标签名>
语法二：<标签名>

HTML文件

<!DOCTYPE html> 
 <!-- !DOCTYPE html 告诉浏览器页面采用的是html5版本，定义文档类型-->
<html lang="en">
  <!-- html 根标签，定义HTML文档 -->
<head>
  <!-- head 头部标签，定义关于文档的信息 -->
  <meta charset="UTF-8">
  <!-- meta 定义关于文档的信息 移动端缩放等 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- title 定义文档的标题 -->
</head>
<body>
</body>
</html>
<!-- 定义注释，快捷键 ctrl键 + /  -->

字符集（了解）

<meta charset="UTF-8"/>

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312
gb2312简单中文包括6763个汉字，汉语
BIG5繁体中文港澳台等用
GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则包含全世界所有国家需要用到的字符，相当于英文

常用的标签

<h1>标题标签</h1>……<h6>标题标签</h6>
<p>段落标签</p>
<div>本身没有什么语义，用来做布局，盒子</div>
<span>也没有什么语义，直接在一行上排列的</span>
<br/> 换行标签
<hr/>分割线标签，划分区域的线条，但项目中不常用
图片标签，<img src = “xxx.png” alt=“图片不存在”>
双标签 <标签名属性名1=“属性值1”></标签名>
单标签 <标签名属性名1=“属性值1”>
src 和 alt 作为img单标签的标签属性名
src 属性是这张图片的路径
alt 是图片无法正常显示的提示文本
title属性是鼠标悬停在图片上的时候，显示的文本，可以对标签的内容进行简单介绍

路径的介绍

路径分为相对路径和绝对路径

相对路径：当前HTML文件和图片在同一个文件夹，我们就说他们的路径是相同。
./ 表示当前路径（文件夹）下
/ 表示下一级路径
…/ 表示上一级路径
绝对路径：从盘符出发触发的路径，从域名/服务器出发的路径
<img src=“D:/imgage/xxx.png” alt="">
<img src="http://www.qiaopp.xyz/img/xxx.png>

超链接标签

专门用来实现页面的跳转
<a href=“http://www.baidu.com” >百度一下</a>
ref 的值就是要跳转的那个页面的路径
a 标签默认在当前窗口进行跳转
<a href=“test.html” target="_blank">跳转</a>
target ="_blank" 表示在新窗口打开页面
target=“_self” 默认表示在当前页面跳转

<html>
<head>
<base target="_blank"/> 表示在页面中所有的a标签都进行在新窗口中打开页面
</head>
</html>

href ="#id" 表示利用锚链接点击跳转到页面对应的位置

格式化的标签

<span>没有语义</span>
<font></font> 直接存放文字（非一大段文字）现在基本用span标签代替
<strong></strong> 字体加粗标签
<b></b> 字体加粗
<em></em>文字倾斜
<i></i> 文字倾斜
<ins></ins>下滑线
<s></s>删除线
<del></del> 删除线
<u></u> 下滑线

特殊字符（了解）

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
&	和号	&
"	引号	"
'	撇号	'
¢	分（cent）	¢
£	镑（pound）	£
¥	元（yen）	¥
€	欧元（euro）	€
§	小节	§
©	版权（copyright）	©
®	注册商标	®
™	商标	™
×	乘号	×
÷	除号	÷
	一个文字大小的空格	&emsp;

列表（掌握）

无序列表（unordered-list）

<ul>
<li>列表项一</li>
<li>列表项二</li>
</ul>

总结：
1.ul 列表必须直接包含li
2.在li标签中可以包含其他任何标签
3.展示数据的时候没有先后顺序的要求
4.li有默认样式小黑点内边距、外边距
5.什么时候可以用ul li 一般是几个样式一样导航

有序列表(ordered-list)

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

自定义列表

dl dt dd
<dl>
<dt>项目标题，只有一个</dt>
<dd>项目内容一</dd>
<dd>项目内容二</dd>
</dl>