HTML汇总以及CSS的一些开端

一、HTML初探

　　1、HTML（HyperText Markup Language）：超文本标记语言指的就是超跃了txt文件，能够在里面进行一些例如：就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。

　　（1）、网页为什么会诞生，HTML为什么会火？

　　　　　　1、由于PC端的发展，人们想要展示更多的元素给世界的人看，因此网页开始慢慢的诞生了。

　　　　　　2、C/S模式的诞生人们开始对此模式产生了质疑，因为有些机器受硬件的影响，就不能享受到知识共享的服务了。

　　　　　　3、因此B/ S模式开始慢慢诞生和普及（对网页的需求越来越大）。

二、五大浏览器相关

　　可作为为简单的了解（https://blog.csdn.net/ai396496157/article/details/41981161）。

三、Web标准及W3C相关的认识

　　1、HTML是网页的结构。

　　2、CSS是网页的表现形式。

　　3、JS是网页的行为。

　　4、W3C是一个WEB标准制定的一个非盈利性的国际组织。

四、开始正式进入HTML

　　（1）、形式必须是在<>（这个尖括号包裹中的）才称之为HTML标签。

<标签名> 内容 </标签名>

　　（2）、标签的分类

　　　　1、双标签（如：html、body）

<html><head> </head>
</html><!---即有开始又有结束的标签->

　　　　2、单标签（如：br、hr）

<br \>
<hr \>
<img \>
<!--标签只有开始没有结束，后面的\是属于XHTML的格式在H5中已经抛弃可以省略不写-->

　　（3）HTML标签关系

　　　　1、嵌套关系或者父子关系

<head> <title> </title>
</head>

View Code

　　　　2、并列关系或者兄弟关系

1 <head></head>
2 <body></body>

　　（4）、文档类型<!DOCTYPE>

　　　　1、打开编辑软件sublime,经常能看到一个：如下

<!doctype html>

　　　　问：它究竟是什么咧？

　　　　答：这句话就是告诉我们使用哪个html版本？我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。

　　　　2、有时候我们不能看到如下：

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">

　　　　这是HTML中的strict版本。

　　　　3、

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">

　　　　这是HTML般本的transitional解析代码等等的。

　　（5）页面的lang

　　　　1、<html lang="en"> 指定语言种类

　　　　　　1、最常见的2个：

　　　　　　　　en定义语言为英语，zh-CN定义语言为中文。

考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值

　　（6）HTML标签的语义化

　　　　白话：所谓标签语义化，就是指标签的含义。

　　　　　1 、为什么要有语义化标签

　　　　　　　　1、方便代码的阅读和维护

　　　　　　　　2、同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容

　　　　　　　　3、使用语义化标签会具有更好的实现搜索引擎优化

核心： 合适的地方给一个最为合理的标签。

语义是否良好：当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。( 裸奔起来一样好看 )

白话，一眼看去，就知道那个是重点，结构是什么，知道每块的内容是干啥的。

遵循的原则：先确定语义的HTML ，再选合适的CSS。所以，我们接下来学习html标签，要根据语义去记忆。 HTML网页中任何元素的实现都要依靠HTML标签

　　　　（7）、HTML中的排版标签　　　

<h1>一级标题</h1><h2>二级标题<p>我是一个段落</p></h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>

　　　　　　注意：请不要利用标题标签来改变同一行中的字体大小在一个HTML文件中一级标题只能出现一次因为h1标签非常重要！h1标签的权重最高！搜索引擎在搜索的时候它最先搜索的就是h1标签里面的内容。

　　　　　（8）、文本修饰标签(了解)

　　　　　　　　在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

标签名	功能	描述
<b></b>	将文本设置加粗显示	bold
<strong></strong>	将文本设置加粗显示
<i></i>	将文本设置为斜体效果	italic
<em></em>	将文本设置为斜体效果
<u></u>	给文本增加下划线	underline
<ins></ins>	给文本增加下划线	insert
<s></s>	给文本增加删除线	strikethrough
<del></del>	给文本增加删除线
<sup></sup>	上标
<sub></sub>	下标

　　（9）链接标签(重点)

单词缩写： anchor 的缩写 [ˈæŋkə(r)] 。基本解释锚, 铁锚的

在HTML中创建超链接非常简单，只需用标签把文字或者图片包括起来就好，其基本语法格式如下：

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

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有self和blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

注意：

外部链接需要添加 http:// www.baidu.com
内部链接直接链接内部页面名称即可比如 < a href="index.html"> 首页 </a >
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

href设置为javascript:void(0)

第一种空链接：<a  href="#">空链接</a>第二种空链接：<a href="javascript:void(0)">空链接</a>

空链接主要是用于配合javascript来使用

不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
```
<a href="https://view.inews.qq.com/topic/275789"><img src="mx.jpg"></a>
```

　　　（10）、锚点定位（难点）

通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：

1.使用相应的id名标注跳转目标的位置。 找到锚点链接  id属性每一个标签都有   <h3 id="two">第2集</h3> 2.使用“<a href=”#id属性值>“链接文本"</a>创建链接文本（被点击的）<a href="#two">找到锚点</a>

base 标签

语法：

<base target="_blank" />　

结束：此处因为篇幅太长省略（路径、字符实体的内容）

转载于:https://www.cnblogs.com/learningPHP-students2018/p/9328205.html