HTML笔记

作者: Scincyc | 来源:发表于2020-07-19 11:04 被阅读0次

HTML5学习笔记之表格标签
HTML5学习笔记之表单标签
HTML5学习笔记之基础标签
HTML5学习笔记之音视频标签
Html笔记
HTML5基本介绍
第12天，HTML基础
html
js操作样式
HTML笔记--简介

1. 认识web

1.1 认识网页


网页主要由文字、图像和超链接等元素构成，还可以包含音频、视频以及Flash等。

1.2 常用的浏览器


浏览器是网页显示、运行的平台。常见的IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera，称为五大浏览器

浏览器占市场份额（知晓）


查看网站： http://tongji.baidu.com/data/browser

⭐浏览器内核（理解）


浏览器内核可以分成两部分：渲染引擎(Rendering Engine)和 JS 引擎

JS 引擎 则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果


现在，浏览器内核 指渲染引擎


作用：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机

浏览器的内核的不同，对于网页的语法解释会有不同，所以渲染的效果也不相同

常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit

| 浏览器 | 内核 | 备注 |

| :------ | :------------: | :----------------------------------------------------------- |

| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |

| firefox | Gecko | 可惜这几年已经没落了，打开速度慢、升级频繁 |

| Safari | webkit | 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了） |

| chrome | Chromium/Blink | Blink 其实是 WebKit 的二次开发。大部分国产浏览器最新版都采用Blink内核。 |

| Opera | Presto | Presto（已经废弃）是挪威产浏览器 opera 的 "前任" 内核，最新的 opera 浏览器用blink内核。 |


移动端的浏览器内核主要说的是系统内置浏览器的内核。

Android手机而言，使用率最高的就是Webkit内核

iOS以及WP7平台上，一般是Safari或者IE内核Trident的

1.3 Web标准（重点）

Web 标准的好处

1、让Web的发展前景更广阔

2、内容能被更广泛的设备访问

3、更容易被搜寻引擎搜索

4、降低网站流量费用

5、使网站更易于维护

6、提高页面浏览速度

⭐Web 标准构成


Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）


结构标准：用于对网页元素进行整理和分类 HTML

表现标准：用于设置网页元素的版式、颜色、大小等外观样式 CSS。

行为标准：是指网页模型的定义及交互的编写 Javascript

2. HTML 初识


Hyper Text Markup Language “超文本标签语言”，用来描述网页的一种语言

所谓“超文本”

因为加入了图片、声音、动画、多媒体等内容，还可从一个文件跳转到另一个文件

注意

体会文本标签语言几个词语

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)


总结： HTML 作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来。

2.1 HTML骨架格式

get start


<HTML> 

    <head>   

        <title></title>

    </head>

    <body>

    </body>

</HTML>

1.HTML标签

最大的标签根标签

2.head标签

文档的头部，描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

注意：在head标签中，必须设置title

3.title标签

文档的标题

4.body标签

文档的主体包含文档的所有内容

2.2 HTML标签分类

1.双标签


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

2.单标签（或空标签）


<标签名 />

比如 <br>、<hr>、<img>、<input>、<param>、<meta>、<link>、<base>

2.3 HTML标签关系

1.嵌套关系


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

2.并列关系


<head></head>

<body></body>

补充：快捷键


再页面中输入 以下2个单词

1.  html: 5 

2.  !

  在vs code里面然后按下enter键盘即可生成HTML骨架

3. ⭐文档类型<!DOCTYPE>


<!DOCTYPE html>

标签位于文档的最前面

用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范

浏览器才能按指定的文档类型进行解析

4. 字符集


<meta charset="UTF-8" />

utf-8是目前最常用的字符集编码方式，常用还有gbk和gb2312

gb2312 简单中文包括6763个汉字

BIG5 繁体中文港澳台等用

GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符


统统使用UTF-8 字符集, 避免出现字符集不统一而引起乱码的情况

5. HTML标签的语义化

⭐为什么要有语义化标签

方便代码的阅读和维护
便于浏览器或网络爬虫解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化

核心

合适的地方给一个最为合理的标签

语义是否良好

去掉CSS后，网页结构依然组织有序，有良好的可读性

白话

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

6. HTML常用标签

6.1 排版标签（熟记）

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

1. 标题标签 hn

文档标题


<title></title>

页面标题，依次重要性递减，单词缩写 head


<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

其基本语法格式如下：


<hn>  标题文本  </hn>

注意：一般h1 都是给logo使用，或者页面中最重要标题信息。

2. 段落标签p

单词缩写： paragraph


<p>  文本内容  </p>

默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行

3. 水平线标签hr

单词缩写： horizontal 横线 [ˌhɔrəˈzɑntl]


<hr />是单标签

在网页中显示默认样式的水平线

4. 换行标签br

单词缩写： break 打断 ,换行


<br />

文本直接敲回车换行，不起作用了（多个空格只显示一个）

5. div span标签(重点)

单词缩写： division 分割，分区 span, 跨度，跨距；范围


<div> 这是头部 </div>    <span>今日价格</span>

div span 没有语义，网页布局主要的2个盒子 css+div

6.2 文本格式化标签(熟记)

为文字设置粗体、斜体或下划线效果，使文字以特殊的方式显示

⭐b i s u/strong em del ins

b i s u 只有使用，没有“强调”的意思； strong em del ins 语义更强烈

6.3 标签属性

get start


<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

注意事项

1.标签可以拥有多个属性

2.属性之间不分先后顺序，以空格分开

3.任何标签的属性都有默认值，省略该属性则取默认值

4.采取键值对的格式 key="value" 的格式


<hr width="400" />

提倡：尽量不使用样式属性

img

6.4 图像标签img (重点)

单词缩写： image 图像


<img src="图像URL" />

src是img标签的必需属性

a

6.5 链接标签(重点)

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


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

1. ⭐href和target属性

href（🚩区别于src）

指定链接目标的url地址。Hyper text Reference，超文本引用。为标签应用href属性，则有超链接功能

target

指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口打开

2. 注意事项

1.外部链接需要添加 http://

2.内部链接用相对路径

3.href="#" 表示暂时为空链接

4.在网页中各种网页元素，都可以添加超链接（如文本、图像、表格、音频、视频等）

3. ⭐锚点定位（难点）

通过创建锚点链接，用户能够快速定位到目标内容

get start

链接到同一页面的锚点


1.在test.html使用相应的id/name创建锚（跳转目标的位置）

  <h3 id="two">第2集</h3> 或 <h3 name="two">第2集</h3>

2.在test.html设置好链接（被点击的链接文本）

  <a href="#two">

链接到其他页面的锚点


（1）在test2.html创建锚

<a name="test">锚</a>

（2）在test.html设置好连接

<a href="test2.html#test">连接到另外页面的锚的超链接</a>

4. base 标签

设置整体链接的打开状态

get start


...

<head>

    <title></title>

    <base target="_blank" />    <!--页面中所有a标签 默认添加 target="_blank"-->

</head>

...

注意：base 写到 head标签中

6.6 特殊字符标签（理解）

空格符


&nbsp;

小于号<


&lt;

大于号>


&gt;

版权©


&copy;

人民币￥


&yen;

6.7 注释标签


    <!-- 注释语句 -->  ctrl + /      或者 ctrl +shift + /

7. 路径(重点、难点)

7.1 相对路径

保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径

位于同一文件夹：只需输入文件名


<img src="logo.gif" />

位于当前文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开


<img src="img/img01/logo.gif" />

位于当前文件的上一级文件夹：在文件名之前加入“../”


<img src="../logo.gif" />

如果是上两级，则需要使用 “../ ../”，以此类推

7.2 绝对路径

以Web站点根目录为参考基础的目录路径。所有网页引用同一个文件时，路径一样


“D:\web\img\logo.gif”

或完整的网络地址


“http://www.itcast.cn/images/logo.gif”

8. 列表标签

包括有序<ol>和无序<ul>列表，特点：整齐、整洁、有序

ul

8.1 ⭐无序列表 ul （重点）

get start

列表项之间没有顺序级别之分，是并列的


<ul>

  <li>列表项1</li>

  <li>列表项2</li>

  <li>列表项3</li>

  ......

</ul>

应用

新闻消息列表

注意事项


1. <ul></ul>中只能嵌套<li></li>（文字也不行）

2. <li>与</li>之间相当于一个容器，可以容纳所有元素

3. 无序列表 样式交给CSS来！

ol

8.2 有序列表 ol （了解）

get start


<ol>

  <li>列表项1</li>

  <li>列表项2</li>

  <li>列表项3</li>

  ......

</ol>

所有特性基本与ul 一致（但是实际工作中，较少用 ol ）

dl

8.3 自定义列表dl（理解）

get start

常用于对术语或名词进行解释和描述


<dl>

  <dt>名词1</dt>

  <dd>名词1解释1</dd>

  <dd>名词1解释2</dd>

  ...

  <dt>名词2</dt>

  <dd>名词2解释1</dd>

  <dd>名词2解释2</dd>

  ...

</dl>

应用

页面底部的名词解释

table

9. 表格 table(会使用)

9.1 应用

常用于处理、显示表格式数据，而不是用来布局

9.2 创建表格

get start


<table>

  <tr>

    <td>单元格内的文字</td>

    ...

  </tr>

  ...

</table>

创建表格的三对基本标签


1.table用于定义一个表格。

2.tr 用于定义表格中的一行，必须嵌套在 table标签中

3.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中

注意：


1. <tr></tr>中只能嵌套<td></td>


2. <td></td>标签，他就像一个容器，可以容纳所有的元素

9.3 表格属性

一般设置“三参为0”，即border cellspacing cellpadding ="0"

border


<table border="0"></table>  <!--表格边框，默认无-->

align


<table align="left"></table> <!--表格**水平**对齐方式，默认left（还有center right）-->

注意：table的align=center是表格居中，tr的align=center是文本居中

cellspacing


<table cellspacing="2"></table> <!--设置单元格与单元格之间的距离，默认2px-->

cellpadding


<table cellpadding="1"></table> <!--设置单元格中内容和边框之间的距离，默认1px-->

width


<table width="500"></table> <!--表格宽度-->

height


<table height="500"></table> <!--表格高度-->

th

9.4 ⭐表头标签

表头一般位于表格的第一行或第一列，其文本加粗居中

get start


<table>

    <tr>

        <th></th>   <!--  <th></th>替代相应的<td></td>即可 -->

        <th></th>

    </tr>

</table>

thead #tbody

9.5 表格结构（了解）

在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚有兼容性问题)

get start


<table>

    <thead>...</thead>

    <tbody>...</tbody>

</table>

表格头部


<thead></thead> <!--包含在table标签中，一般包含网页的logo和导航等头部信息-->

表格主体


<tbody></tbody> <!--包含在table标签中-->

caption

9.6 表格标题

get start


<table>

  <caption>我是表格标题</caption>

</table>

效果：标题居中于表格之上

注意：

1、<caption>必须紧随 <table> 标签之后（caption只在table中有用）

2、只能对每个表格定义一个标题

colspan

rowspan

9.7 ⭐合并单元格(难点)

get start

跨行合并：rowspan 跨列合并：colspan


<table border="1">

    <tr>

        <td colspan="2">1</td>

        <!--<td>2</td>-->

        <td>3</td>

    </tr>

    <tr>

        <td rowspan="2">1</td>

        <td>2</td>

        <td>3</td>

    </tr>

    <tr>

        <!--<td>1</td>-->

        <td>2</td>

        <td>3</td>

    </tr>

</table>

步骤

1、先确认跨行/跨列

2、合并的顺序（先上后下先左后右）

3、删除多余行/列（删除个数 = 合并的个数 - 1）

9.8 总结表格

提供定义表格式数据的方法
表格中由行中的单元格组成
表格中没有列元素，先找到第几行，再找第几个单元格
表格外观交给CSS

10. ⭐表单标签(掌握)

10.1 应用

收集用户信息

10.2 表单的构成

表单控件

如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮

提示信息

提示用户进行填写和操作

表单域

用来容纳所有的表单控件和提示信息。可以定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法（若不定义表单域，表单数据无法传送到后台服务器）

input

10.3 ⭐input 控件(重点)

get start


<input type="" name="" />   <!--input为单标签-->

type属性

指定不同的控件类型。

radio：同一组相同name，才能单选


<input type="radio" name="sex">男

<input type="radio" name="sex">女

image：图片形式提交按钮，src指定按钮图片
```
<input type="image" src="*.png" />
```
file
```
<input type="file" />
```

常用属性

type、name、value、size、checked、maxlength

label

10.4 label标签(理解)

get start


<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male">


<label for="male">

    <input type="radio" name="sex" id="male" value="male">

</label>

注意：内含多个input & 不指定for，则无效


<label for="male">

    <input type="radio" name="sex" id="male" value="male">

    <input type="radio" name="sex" id="female" value="female">

</label>

label 标签作用

绑定一个表单元素（点击label标签 -> 被绑定的表单元素获得输入焦点）

for 属性

规定 label 与哪个表单元素（id）绑定

textarea

10.5 textarea控件(文本域)

get start


<textarea cols="每行中的字符数" rows="显示的行数">

  文本内容

</textarea>

注意：cols rows显示用（一般不用），宽高用css

应用

网友评论文本域

select

10.6 select下拉菜单

get start


<select>

  <option>选项1</option>

  <option>选项2</option>

  <option>选项3</option>

  ...

</select>

注意：

<select></select>中至少包含一对<option></option>。
在option 中定义selected =" selected "时，当前项即为默认选中项。

form

10.7 form表单域

get start


<form action="url地址" method="提交方式" name="表单名称">

  各种表单控件

</form>

form标签作用

用于定义表单域，即创建一个表单，实现用户信息的收集和传递。form中的所有内容都会被提交给服务器。

常用属性

Action

用于指定接收并处理表单数据的服务器url地址

method

用于设置表单数据的提交方式，其取值为get或post

get提交数据会出现在url，post不会

name

用于指定表单的名称，以区分同一个页面中的多个表单

注意：每个表单都应该有自己表单域。

11. 查文档

11.1 W3C

http://www.w3school.com.cn/

11.2 MDN

https://developer.mozilla.org/zh-CN/

HTML5学习笔记之表格标签
HTML5学习笔记之表格标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...
HTML5学习笔记之表单标签
HTML5学习笔记之表单标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...
HTML5学习笔记之基础标签
HTML5学习笔记之基础标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...
HTML5学习笔记之音视频标签
HTML5学习笔记之音视频标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记...
Html笔记
Html笔记
HTML5基本介绍
HTML5基本介绍其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 ...
第12天，HTML基础
@(Html)[笔记] 目录一、HTML初识 1.1 html结构告诉浏览器使...
html
html学习笔记
js操作样式
CSS HTML 笔记
HTML笔记--简介
HTML笔记--简介标签（空格分隔）： HTML 1. html简介： 2. html的规范： *一个html文...

HTML笔记

1. 认识web

1.1 认识网页

1.2 常用的浏览器

浏览器占市场份额（知晓）

⭐浏览器内核（理解）

1.3 Web标准（重点）

Web 标准的好处

⭐Web 标准构成

2. HTML 初识

所谓“超文本”

注意

2.1 HTML骨架格式

get start

1.HTML标签

2.head标签

3.title标签

4.body标签

2.2 HTML标签分类

1.双标签

2.单标签（或空标签）

2.3 HTML标签关系

1.嵌套关系

2.并列关系

补充：快捷键

3. ⭐文档类型<!DOCTYPE>

4. 字符集

5. HTML标签的语义化

⭐为什么要有语义化标签

6. HTML常用标签

6.1 排版标签（熟记）

1. 标题标签 hn

2. 段落标签p

3. 水平线标签hr

4. 换行标签br

5. div span标签(重点)

6.2 文本格式化标签(熟记)

⭐b i s u/strong em del ins

6.3 标签属性

get start

注意事项

img

6.4 图像标签img (重点)

a

6.5 链接标签(重点)

1. ⭐href和target属性

2. 注意事项

3. ⭐锚点定位 （难点）

4. base 标签

6.6 特殊字符标签 （理解）

空格符

小于号<

大于号>

版权©

人民币￥

6.7 注释标签

7. 路径(重点、难点)

7.1 相对路径

7.2 绝对路径

8. 列表标签

ul

8.1 ⭐无序列表 ul （重点）

get start

应用

注意事项

ol

8.2 有序列表 ol （了解）

get start

dl

8.3 自定义列表dl（理解）

get start

应用

table

9. 表格 table(会使用)

9.1 应用

9.2 创建表格

get start

9.3 表格属性

border

align

3. ⭐锚点定位（难点）

6.6 特殊字符标签（理解）