HTML笔记

一.基础知识

1.计算机基础

（1）硬件

：CPU，内存，硬盘，键盘，鼠标，音响，显示器。

（2）软件：

（指挥硬件进行工作）系统软件：windows，Linux，Max，Harmony。
应用软件：C/S架构：如;哔哩哔哩，微信，腾讯视频。
B/S架构：典型就是网页。（虽然B/S架构好，但是不能抛弃C/S架构）
C：Client B：Browser S：Server

（3）服务器：

相当于一个中转站，帮我们保存信息，传达信息，是用户之间的一个桥梁。

2.浏览器相关知识

（1）主流浏览器：Chrome(Blink)，IE(Trident)，Firefox(Gecko)，Safari(Web kit)，Opera(Blink)···(五大浏览器，四大内核)

（2）内核：浏览器的核心，处理各种资源。（HTML，CSS，3 S）

（3）网页：结构，表现，行为。

二.正式学HTML

1.全称：Hyper Text Markup Language

超文本：超链接，a标签，各种跳转方式···，标记，语言
真正含义：指连接单个网站内或多个网站间的网页链接

2.发展史：

3.属性：

独有属性，如：< marquee loop=“1”>
其中“”中不能是字母或0，否则为无限循环。
通用属性：如id。

4.基本结构：

< ! D O C TYPE html>
< html lang=“en”>
< head>
< meta charset=“U T F-8”>
< meta name=“view port” content=“width=device-width, initial-scale=1.0”>
< title>Document
< /head>
< body>

< /body>
< /html>

5.注释<! - -文字- -！>

文档声明<! D O C T Y P E html>

6.字符编码：

字符集ASCII，ISO 8859-1,GB 2312,G BK，U T F-8
原则一：存储时，务必采用合适的字符编码，否则无法存储，数据会丢失。
原则二:存储时和读取时采用相同方式，否则乱码。
编码：ASCII，ISO 8859-1,GB 2312,G BK，U T F-8
解码：浏览器采用解码方式默认为U T F-8< meta charset=“U T F-8”/>
另：Live Server可以使浏览器与自己的编码方式统一。

7.设置语言：

大部分浏览器会自动弹出翻译语句，但是连在一句的不同语言不会；
< html lang=“z h - C N”>< Hans >为中文简体，< H a n t>
z h，en等为语言代码，C N ,T W,US,GB等为语言地区

8.插入图片：插入的图片格式为 . I O C

9.开发者文档：m d n，W 345

10.标题< h 1>,< h 2>,< h 3>,< h 4>,< h 5>,< h 6>不能互相嵌套

< div >可折叠段落
< p>标签（表示正文）里面不能有 h 1~h 6，div，以及p.（p中不能写块级元素，marquee不推荐使用，可通过CSS完成动画效果）

11.语义化标签：

概念：用特定的标签，去表达特定的含义‘
原则：标签的默认效果不重要（后期可以通过CSS随便控制效果），语义最重要！
优势：1.代码的可读性强清晰；
2.有利于S E O搜索引擎优化，爬虫，代码，机器人；
3.方便设备解析（屏幕阅读器，盲人阅读器）

12.块级元素与行内元素

块级元素：独占一行，如：div，h 1，marquee.
规则一：块级元素中能写行内元素，块级元素(基本什么都能写)
行内元素：不独占一行，如：input（暂时），span.
规则二：行内元素中能写行内元素，但不能写块级元素。

13.文本标签

常用的标签
1.用于包裹：词汇，短语
2.通常写在排版标签里面
3.排版标签更宏观（大段的文字），文本标签更微观（词汇，短语）
4.文本标签通常为行内元素
**< em>着重< strong>**着重（但与h 1没有可比性）
**< span>**用于包裹短语的通用容器（写排版标签不知道写啥的时候用div，文本标签不知道写啥的时候用span）
5.换行：< b r> 分隔线 < hr> 按原文显示< p re>
不常用的

注：l t r：left turn right（r l t 同理）

14.图片标签

< i m g width=" " s r c=" “alt=” ">(目前为行内元素)

15.相对路径和绝对路径

相对路径**./ 同级 …/上一级 /上一级**
绝对路径（根位置为参考点）：本地绝对路径，网络绝对路径

16.常见图片格式

17.超链接跳转页面

代码中多个回车被浏览器解析为一个空格
a超链接，hr e f要跳转的具体位置，target跳转时的打开方式target _ blank（新标签中打开） , target _self（本标签中打开）

跳转文件

浏览器能直接打开的文件，不能打开的文件，会自动触发下载
强制下载download

跳转锚点

a h r e f=“#(id)”超链接
a name.先入为主，锚点
p id（推荐）
java script=" "

唤起指定应用

< a h r e f=“tel:10010”>
< a h r e f= ''mailto:1234567 @q q .com ">
< a h r e f=“s m s:10086” >

三.列表

1.分类：

有序列表：< o l> < l i>
无序列表：< u l> < l i>
自定义列表：突出术语< d l>，突出术语名称< d t> 突出术语描述< dd>
< l i>不建议单独使用，可以嵌套

2.表格（table）

**基本结构：**表格标题（caption），表格头部（t head），表格主体（t body），（表格脚注）（t foot），行（tr），单元格（t h），主体中用（t d）
常用属性： （table）cells pacing，height，width，border / （t head）height ，align（水平方向对齐方式left，center，right），v align（垂直方向对齐方式top，middle，bottom） / （t body）height，align，v align / （t foot）height，align，v align
**单元格跨行跨列：**跨列（col span=”数字“）跨行（row span=”数字“)
文本域：text area name=“” cols rows
input不能换行，text area不能写type
下拉框：select name=“place” < option value=“文字” selected>

3.表单

form action=“网址/s”）搜集手机用户数据：target，_self,_blank,method
input（输入）：type，name，date（年月日），daytime（年月日时）
button(按钮)

4.表单控件

文本框和密码框：value值，max length ，type（text，password），name（account）
单选框和复选框：input=“radio”，name=”gender”，value=“male”
默认：checked
隐藏域：hidden
提交按钮：button type=“submit”
重置按钮：button type=“reset” value
普通按钮：value=“普通按钮”（默认值为submit）
placeholder提供输入提示

5.禁用表单控件：

disabled不能输入，被固定

6.label标签

< label for=“id内容”>< / label>
field set和legend分类

表单总结