初识HTML

最新推荐文章于 2022-10-18 09:41:01 发布

Super_Robot

最新推荐文章于 2022-10-18 09:41:01 发布

阅读量464

点赞数

分类专栏： HTML 文章标签： HTML标签图片超链接简单选择器布局

本文链接：https://blog.csdn.net/Super_Robot/article/details/91409442

版权

HTML 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

初识HTML

什么是HTML(Hyper Text Markup Language)

HTML：**超文本标记语言(Hyper Text Markup **Language)

**超文本：**超越了文本、不仅仅是文本。除了文本外还包含图片、链接，甚至音乐、程序等非文字元素。

HTML不是一种编程语言，而是一种标记语言，描述网页的语言

一般来讲编程语言都拥有选择和循环结构。

HTML使用标签描述网页中图片、文本、音乐、视频、超链接等

XML：(eXtensive Markup Language)可扩展的标记语言。

**XML和HTML区别：**我们的XML它是可以随意在文件中定义自己的标记，但是HTML它的标记都是官方定制的语法，无法自定义。XML的宗旨是用来传输数据，HTML是用来在网页中描述信息。

扩展名为.htm和.html。

md markdown 一种文件格式，程序员必会！它支持一些标记语法，甚至支持HTML。

HTML的发展史

HTML发展历史

W3C和WHATWG

W3C（万维网联盟）国际性的中立的技术标准组织，它维护了很多技术的标准，HTML、XML、XHTMTL、CSS、JavaScript…等都是由它维护标准的。

WHATWG（网页超文本应用技术工作小组）主流的浏览器公司：欧朋、Mozilla、苹果、微软…

WHATWG成立的原因是W3C意图放弃HTML，而力图发展XML（可扩展标记记语言下的一个子集）技术。WHATWG邮件列表公布于2004-6-4 , 在Opera–Mozilla宣布加入后的2天便否决了由万维网联盟（W3C）成员在W3C工作室的Web标准

2007-7-10 , Mozilla Foundation, Apple, Opera Software 建议 W3C跟随WHATWG’的HTML5，将新的HTML（标准通用标记语言下的一个应用）命名为"HTML5".2007-4-7, 新的HTML工作组采纳了他们的建议。

2019年6月的一份新闻稿中，W3C 和 WHATWG 宣布，他们终于把他们的分歧放在一边，并签署了一份新的谅解备忘录。

根据这份新协议，W3C 正式发布未来的 HTML 和 DOM 标准，并支持 WHATWG，将控制权完全交还给浏览器厂商。

取而代之，W3C 及其数百名成员将起草未来的 Web 标准需要包含什么特性的“建议”。然后，WHATWG 将决定把哪些加入到他们的产品中。当前由 WHATWG 维护的 HTML Living Standard 将成为 HTML 标准的官方版本。DOM Living Standard 也是如此。

HTML基本标签

快捷输入标签：输入标签名，按Tab键

Ctrl+D快速复制一行

名称	标签	示例
标题标签	<h1>~<h6>	<h1>静夜思<h1>
段落和换行标签	<p>…</p>、<br/>	<p>床前明月光<br/>疑是地上霜</p>
水平线标签	<hr/>	<hr/>
斜体	<em>…</em>	举头望明月
字体加粗	<strong>…<strong>	低头思故乡

<!-- Document Type 声明 声明格式和HTML标准版本  -->
<!DOCTYPE html>
<!-- 根标签 固定的结构组成 -->
<html>
    <!-- 头标签：一般在头标签中编写大量的网页配置信息 -->
	<head></head>
    <!-- 体标签：一般情况下网页中显示的超文本内容都是在其中定义的 -->
    <!-- 这里是定义HTML用什么编码 -->
    <meta charset="UTF-8"/>
     <!--Keywords：关键字列表
        Description：网站描述-->
    <meta name="Keywords" content="HTML,网页,关键字"/>
	<meta name="Description" content="这里是一个描述。"/>
    <!-- 网页标题 -->
	<title>首页</title>
	<body>
		Hello HTML!
	</body>
</html>

标题标签

<!-- h1~h6 标题一(最大的)...标题六(最小的) -->
<body>
    <h1>标题一</h1>
    <h2>标题二</h2>
    <h3>标题三</h3>
    <h4>标题四</h4>
    <h5>标题五</h5>
    <h6>标题六</h6>
    <!-- 水平线，可以不写参数 -->
    <hr width="200px" align="left">
    <p>
        <em>人生得意须尽欢，</em><br/>莫使金樽空对月。
    </p>
    <p>
    天生我材必有用，<br/>千金散尽还复来。
    </p>
</body>

Web前端开发常用IDE：Sublime Text3、HBuilder X、HBuilder、WebStorm、VSCode、DreamWeaver…

标黑的是企业开发比较常用的

图像标签

常见图片格式：jpg、gif、bmp、png

<body>
    <img src="图片路径" alt="替换文本" width="x" height="y"/>
</body>

…/ 返回上一级目录

alt 图片不能正常显示才出现

超链接

<body>
    <a href="链接地址" target="目标窗口位置">文本或图像</a>
<body>

target：
_self: 自身窗口打开

_blank: 新建窗口打开

超链接的应用

1、页面间连接：A页到B页，网上常见链接

<a href="index1.html" target="_blank" title="点我跳啊">跳转到下一页</a>
<!--文字这里也可以嵌套图片-->
<a href="index1.html" target="_blank" title="点我跳啊"><img src="../../05-图片标签/img/001.png"/></a>

2、锚链接：跳至自身固定位置，或A页跳到B页固定位置，需锚标记

加标志位

<a href="#login">用户登录帮助</a>
# 跳转到本页指定位置
<a name="login">用户登录帮助</a>
# 跳转到其他页面指定位置
<a href="help.heml#login">用户登录帮助</a>

3、功能性链接：电子邮件、QQ、MSN等链接

<a href="mailto:zhangsan@163.com">给站长写信<a>

注释和特殊符号

特殊符号	字符实体
空格	&nbsp；
大于号(>)	&gt；
小于号(<)	&lt；
引号(“)	&quot ；
版权符号@	&copy；

W3C标准(World Wide Web Consortium, 万维网联盟)

规范（很重要）

标签名称、属性名称必须小写
标签必须严格嵌套，并且必须闭合，即使空元素标签也必须闭合
属性值必须用引号引起来

视频标签

传统插入方式

<video src = "视频路径" controls/></video>

根据浏览器兼容性来选择视频

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。

<!--
controls 提供播放、暂停和音量的控件
autoplay 自动播放
width 宽度
height 高度
loop 循环播放
-->
<video  controls autoplay loop width="500" height="500">
    <source src = "视频路径" type="视频格式"/>
    <source src = "video/video.webm" type="video/webm"/>
    <source src = "video/video.mp4" type="video/mp4"/>
</video>

浏览器支持视频格式

音频标签

<audio controls>
	<source src = "music/music.mp3" type = "audio/mpeg"/>
	<source src = "music/music.ogg" type = "audio/ogg"/>
</audio>

页面布局分析

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容(用于整个页面或页面的一块区域)
section	Web页面中的一块独立区域
article	独立文章内容
aside	相关内容或应用(常用于侧边栏)
nav	导航类辅助内容
div	独立区域

<body>
    <header>
        <h2>网页头部<h2>
    </header>
    </section>
        <h2>网页主体部分</h2>
    </section>
    <footer>
        <h2>网页底部<h2>
    <footer>
    <div>
        <ul>
            <li>无序列表</li>
        </ul>
    </div>    
</body>

CSS

层叠样式表(Cascading Style Sheet)

CSS的优势

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录

CSS语法规则

标签选择器

选择器{声明1；
		声明2；
		声明3；
		……
}

h1{
	font-size：12px;
	color:#F00;
}

h1:选择器

font-size:属性

12px:值

color:#F00; 声明

所有的这些标签会使用统一的样式。

类选择器

/* 声明时要写“.” */
.red{
	color:read;
}
<h1 class="red">xxxx</h1>
<p class="red">xxx</p>

可多次使用

CSS注释：/* */

ID选择器

/*名字要见名知意*/
#green{
	color:#00ff00;
}
<p id="green"></p>

规范只能使用一次且优先级最高

颜色：可以写英文，也可以写十六进制数

如：ff 00 00 代表RGB

R：red
G：green
B：blue

网页中引用CSS样式

内联样式表

/*一般不推荐的写法，不利于复用，耦合性高*/
<p style=""></p>

内部样式表
```
<style></style>
```
外部样式表

新建一个css文件（.css）

把样式写到css文件中，谁想用就调用即可
```
/*链接式*/
<link rel="stylesheet" href="样式文件的路径">
/*导入式*/
<style>
	@import "css/types.css";
</style>
```
链接式和导入式的区别

<link/>标签数据XHTML，@import是属于CSS2.1

使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示

使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中

@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的。

推荐使用link结构先加载样式