HTML-白红宇

HTML

阅读量：7064 次

发布时间：2019-06-28

本文共 3691 字，大约阅读时间需要 12 分钟。

WWW初级概念

什么是WWW

WWW 指万维网（World Wide Web），万维网常被称为Web

Web 是由遍布全球的计算机所组成的网络，所有 Web 中的计算机都可以彼此通信

所有这些计算机都使用名为 HTTP 的通信标准

WWW 如何工作

web项目存储于服务器里面

用户通过浏览器来查看web程序

浏览器通过一个已知请求来访问服务器的网页

请求是一个包含页面地址的标准 HTTP 请求，如：

浏览器如何显示页面

所有的网页都含有其如何被显示的结构

浏览器通过阅读这些结构来显示页面

谁制定 web 标准

web 的规则制定主体是 W3C，万维网联盟（World Wide Web Consortium）

最核心的 web 标准是 HTML、CSS、XML

HTML 初级概念

HTML 指的是超文本标记语言，并非编程语言

HTML 使用标记标签来描述网页

HTML 文档描述网页，所以 HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

XHTML 初级概念

XHTML 指可扩展超文本标签语言

XHTML 的目标是取代 HTML

XHTML 是更严格更纯净的 HTML 版本

CSS 初级概念

CSS 指层叠样式表

为了解决内容与表现分离的问题（外部样式表通常存储在 CSS 文件中）

多个样式定义可层叠为一
当同一个HTML元素被不止一个样式所定义时，会使用哪个样式呢？
1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于 <head> 标签内部）
4.内联样式（在 HTML 元素内部）
内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

外部样式表可以极大提高工作效率（控制.css文件，控制多个页面的样式）

JavaScript 初级概念

JavaScript 被设计用来向 HTML 页面添加交互行为,通常被直接嵌入 HTML 页面

JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）

JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）

什么是 XML

XML 被设计用来描述数据，HTML 被设计用来显示数据

XML 指可扩展标记语言，很类似 HTML

XML 标签没有被预定义。您需要自行定义标签

XML 使用文件类型声明（DTD）或者 XML Schema 来描述数据

XML 不会做任何事情。XML 被设计用来结构化、存储以及传输信息
下面是 John 写给 George 的便签，存储为 XML：


    
     
      George
     
     
      John
     
     
      Reminder
     Don't forget the meeting!

Web 构件

HTML 4.01

CSS 的使用（样式表）

XHTML

XML 和 XSLT

客户端脚本

服务器端脚本

通过 SQL 管理数据

Web 的未来

标签（按功能分类）

基础

<br>换行符，它是一个空标签（意味着它没有结束标签）。<br> 标签会告诉浏览器立即停止当前的文本流，并在下一行显示。
<br>标签的 clear 属性只对这些左对齐或右对齐的图像或表格起作用。它可以具有三个值：left、right 或者 all，每个值都代表一个边界或两边的边界。当指定的边界没有图像时，浏览器才会继续输出文本。

格式

<abbr>标记缩写。在 <abbr> 标签中使用全局的 title 属性，这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本。
```
The PRC was founded in 1949.
```

<mark>突出显示部分文本。默认是黄色背景，可以通过定义style切换mark的背景色
```
Do not forget to buy milk today.
Do not forget to buy milk today.
```

表单

<form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
```
        
       First name: 
  
       Last name: 
  
       
      
```

图像

<map>和<area>带有可点击区域的图像映射（点击图片区域跳转）。
```
      
```

音频/视频

<audio>定义声音，比如音乐或其他音频流(具体属性：)。

<video>定义视频，比如电影片段或其他视频流(具体属性：)。

<source>允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
```
      
```

链接

<a>定义锚，超链接，用于从一张页面链接到另一张页面。target 属性规定在何处打开页面上的所有链接。
```
W3School
```

<link>链接一个外部样式样式样式表。
```
      
```

列表

<ul>无序列表，点开头


        
       Coffee
  
       Tea
  
       Milk

<ol>有序列表，数字开头（默认1开始累加）

属性

里面有很多神奇的功能，但是多数不常用！！！

accesskey属性 规定激活（使元素获得焦点）元素的快捷键。

HTML 教程

注释：请使用Alt + accessKey (或者 Shift + Alt + accessKey) 来访问带有指定快捷键的元素。

data-* 属性 嵌入自定义数据。
这个属性用于存储页面或应用程序的私有自定义数据，可以应用在所有 HTML 元素上。存储的（自定义）数据能够被页面的 JavaScript 中获取。
data-* 属性包括两部分：
1.属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
2.属性值可以是任意字符串
```
物种
点击某个物种来查看其类别：
        
       喜鹊
  
       金枪鱼
    
       蝇虎
  
      
```