HTML基础

zoukankan html css js c++ java

HTML基础
HTML & CSS 概述

HTML & CSS 到底是什么，有什么用？

它们是两门语言。

语言：沟通的工具。人和人沟通的语言：自然语言

人和计算机沟通的工具：计算机语言

HTML + CSS + Javascript = 网页

HTML：Hyper Text Markup Language 超文本标记语言；定义网页中有什么。

CSS：Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子。

术语
1. web
互联网
1. w3c
万维网联盟，非盈利性的组织：w3.org

为互联网提供各种标准。
1. XML
可扩展的标记语言：extension markup language，用于定义文档结构的。
```
请在每周周一下午两点，从人人网下载最新美剧《权力的游戏》
```
```
<任务>
    <执行日期> 每周一 </执行日期>
    <执行时间> 下午两点 </执行时间>
    <下载地址> 人人网 </下载地址>
    <下载目标> 最新版《权力的游戏》 </下载目标>
</任务>
```
什么是HTML？

HTML是W3C组织定义的语言标准：HTML是用于描述页面结构的语言。

结构：有什么东西，该东西表示什么含义

HTML：Hyper Text Markup Language，超文本标记语言。

书写一个一级标题：
```
<h1> 一级标题 </h1>
```
MDN：Mozilla Development Network，Mozilla开发者社区。

什么是CSS？

CSS是W3C定义的语言标准：CSS是用于描述页面展示的语言

CSS决定了页面长什么样子。

执行HTML CSS

HTML、CSS -> 浏览器内核 -> 页面

浏览器：
1. shell：外壳
2. core：内核（JS执行引擎、渲染引擎）
IE: Trident
Firfox: Gecko
Chrome: Webkit / Blink
Safari: Webkit
Opera: Presto / Blink

版本和兼容性

HTML5、CSS3

HTML5：2014年

CSS3：目前还没有制定完成。

XHTML：可以认为是HTML的一种一个版本，完全符合XML的规范。

第一个网页

Emmet插件：自动生成HTML代码片段

注释

注释为代码的阅读者提供帮助，注释不参与运行
开一个空行，Ctrl+?自动补全注释
在HTML中，注释使用如下格式书写：
```

```
元素

其他叫法：标签、标记
```
<a href="https://www.baidu.com" title="百度一下">百度</a>
<title>Document</title>
```
整体：element （元素）

元素 = 起始标记（begin tag） + 结束标记（end tag） + 元素内容 + 元素属性

属性 = 属性名 + 属性值

属性的分类：
- 局部属性：某些元素特有的属性（不强调）
- 全局属性：所有元素通用
```
<meta charset="UTF-8">
```
有些元素没有结束标记，这样的元素叫做：空元素

空元素的两种写法：
1. <meta charset="UTF-8">
2. <meta charset="UTF-8" />
元素的嵌套

元素不能相互嵌套

父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父元素的两个元素）

标准的文档结构

HTML：页面、HTML文档

1.文档声明
```
<!DOCTYPE html>
```
文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5。

不写文档声明，将导致浏览器进入怪异渲染模式。

2.html根元素
```
<html lang="en">
</html
```
根元素，一个页面最多只能一个，并且该元素是所有其他元素的父元素或祖先元素。

HTML5版本中没有强制要求书写该元素

lang属性：language，全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。

1.文档头
```
<head>

</head>
```
文档头，文档头内部的内容，不会显示到页面上。
```
<meta>
```
文档的元数据：附加信息。

charset：指定网页内容编码。
```
<title>Document</title>
```
网页标题

2.文档体
```
<body>
</body>
```
文档体，页面上所有要参与显示的元素，都应该放置到文档体中。

语义化

什么是语义化
1. 每一个HTML元素都有具体的含义
a元素：超链接
p元素：段落
h1元素：一级标题
1. 所有元素与展示效果无关
元素展示到页面中的效果，应该由CSS决定。

因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式。

重要：选择什么元素，取决于内容的含义，而不是显示出的效果

为什么需要语义化？
1. 为了搜索引擎优化（SEO）
搜索引擎：百度、搜搜、Bing、Google

每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码
1. 为了让浏览器理解网页
阅读模式、语音模式

文本元素

HTML5中支持的元素：HTML5元素周期表

h

标题：head

h1~h6：表示1级标题~6级标题
快速写入：
h(*6>{)级标题}

p

段落，paragraphs

lorem，乱数假文，没有任何实际含义的文字

span【无语义】

没有语义，仅用于设置样式

以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）
到了HTML5，已经弃用这种说法。

pre(按理说是无语义)

预格式化文本元素

空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格

例外：在pre元素中的内容不会出现空白折叠

在pre元素内部出现的内容，会按照源代码格式显示到页面上。

该元素通常用于在网页中显示一些代码。

pre元素功能的本质：它有一个默认的css属性

显示代码时，通常外面套code元素，code表示代码区域。

HTML实体

实体字符， HTML Entity

实体字符通常用于在页面中显示一些特殊符号。
1. &单词;
2. &#数字;
- 小于符号
<
- 大于符号
>
- 空格符号
- 版权符号
©
- &符号
&

a元素

超链接

href属性

hyper reference：通常表示跳转地址

普通链接

锚链接

跳转当前页面的某一个位置
```
    a[href="#chapter$"]*6>{章节$}
    ((h2[id="chapter$"]>{章节$})+p>lorem1000)*6
```
id属性：全局属性，表示元素在文档中的唯一编号

功能链接

点击后，触发某个功能
- 执行JS代码，javascript:
```
    <a href="javascript:alert('你好！')">
            弹出：你好！
    </a>
```
- 发送邮件，mailto:
```
    <a href="mailto:234234324324@qq.com">
            点击给我发送邮件
    </a>
```
要求用户计算机上安装有邮件发送软件：exchange
- 拨号，tel:
要求用户计算机上安装有拨号软件，或使用的是移动端访问
```
    <a href="tel:14354663333">
        点击给我拨打电话
    </a>
```
target属性

表示跳转窗口位置。

target的取值：
- _self：在当前页面窗口中打开，默认值
- _blank: 在新窗口中打开
```
<a href="https://douyu.com" target="_blank" title="斗鱼，每个人的直播平台">
    斗鱼直播
</a>
```
路径的写法

站内资源和站外资源

站内资源：当前网站的资源

站外资源：非当前网站的资源

绝对路径和相对路径

站外资源：绝对路径

站内资源：相对路径
1. 绝对路径
绝对路径的书写格式：

url地址：
```
协议名://主机名:端口号/路径

schema://host:port/path
```
https://www.baidu.com:443/
https://mbd.baidu.com/newspage/data/
http://www.renren.com:80/
http://127.0.0.1:5501/

协议名:http、https、file
主机名:域名、IP地址
端口号:如果协议是http协议，默认端口号80;如果协议是https协议，默认端口号为443

当跳转目标和当前页面的协议相同时，可以省略协议
1. 相对路径
以./开头，./表示当前资源所在的目录

可以书写../表示返回上一级目录

相对路径中：./可以省略
```
    <a href="../1. 第一个网页/index.html">
        我的第一个网页
    </a>
```
图片元素

img元素

image缩写，空元素

src属性：source

alt属性：当图片资源失效时，将使用该属性的文字替代图片

和a元素联用
```
<a target="_blank" href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin">
    <img usemap="#solarMap" src="./img/solar.jpg" alt="这是一张太阳系的图片">
</a>
```
和map元素

map：地图

map的子元素：area

衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具：

ps、pxcook、cutpro（本人开发）

和figure元素

指代、定义，通常用于把图片、图片标题、描述包裹起来

子元素：figcaption

多媒体元素

video 视频

audio 音频

video

controls: 控制控件的显示，取值只能为controls

某些属性，只有两种状态：1. 不写 2. 取值为属性名，这种属性叫做布尔属性

布尔属性，在HTML5中，可以不用书写属性值

autoplay: 布尔属性，自动播放。

muted: 布尔属性，静音播放。

loop: 布尔属性，循环播放

audio

和视频完全一致

兼容性
1. 旧版本的浏览器不支持这两个元素
2. 不同的浏览器支持的音视频格式可能不一致
mp4、webm
```
<video controls autoplay muted loop style="500px;">
    <source src="media/open.mp4">
    <source src="media/open.webm">
    
    <p>
        对不起，你的浏览器不支持video元素，请点击这里下载最新版本的浏览器
    </p>
```
列表元素

有序列表

ol: ordered list

li：list item

无序列表

把ol改成ul

ul：unordered list

无序列表常用于制作菜单或新闻列表。

定义列表

通常用于一些术语的定义

dl: definition list

dt: definition title

dd: definition description

容器元素

容器元素：该元素代表一个块区域，内部用于放置其他元素

div元素

没有语义

语义化容器元素

header: 通常用于表示页头，也可以用于表示文章的头部

footer: 通常用于表示页脚，也可以用于表示文章的尾部

article: 通常用于表示整篇文章

section: 通常用于表示文章的章节

aside: 通常用于表示侧边栏

元素包含关系

以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外

元素的包含关系由元素的内容类别决定。

例如，查看h1元素中是否可以包含p元素

总结：
1. 容器元素中可以包含任何元素
2. a元素中几乎可以包含任何元素
3. 某些元素有固定的子元素（ul>li，ol>li，dl>dt+dd）
4. 标题元素和段落元素不能相互嵌套，并且不能包含容器元素
查看全文

相关阅读:
shell基础--变量的数值计算
 shell基础--字符串和变量的操作
 shell基础--shell特殊变量
 Asp.net MVC 控制器扩展方法实现jsonp
ASP.NET web api 跨域请求
 asp.net Web API简单的特性路由配置
 ASP.Net Web API 输出缓存转载 -- Output caching in ASP.NET Web API
基础拾遗 C# Json 与对象相互转换
 内存溢出和内存泄漏
 软件测试面试题（一）

原文地址：https://www.cnblogs.com/cxynb/p/12167020.html

HTML & CSS 概述

HTML & CSS 到底是什么，有什么用？

术语

什么是HTML？

什么是CSS？

执行HTML CSS

版本和兼容性

第一个网页

注释

元素

元素的嵌套

标准的文档结构

1.文档声明

2.html根元素

1.文档头

2.文档体

语义化

什么是语义化

为什么需要语义化？

文本元素

h

p

span【无语义】

pre(按理说是无语义)

HTML实体

a元素

href属性

普通链接

锚链接

功能链接

target属性

路径的写法

站内资源和站外资源

绝对路径和相对路径

图片元素

img元素

和a元素联用

和map元素

和figure元素

多媒体元素

video

audio

兼容性

列表元素

有序列表

无序列表

定义列表

容器元素

div元素

语义化容器元素

元素包含关系