HTML笔记

1.定义 1.1什么是HTML？

HTML：Hyper Text Markup Language (超文本标记语言)
超文本：可以放视频、图片等。

1.2HTML的基本结构

基本结构：

    
        
    
    
        我的第一个网页
    

​
通常：
 称为网页头部
 称为主体部分
 等成对的标签，分别叫开始标签和结束标签，单独呈现的标签（空元素），如
;意为用/来关闭空元素。

2.基本标签 2.1标题标签

...    一级标题
...    二级标题
...    三级标题
...    四级标题
...    五级标题
...    六级标题
​
注：不同等级的标题标签对比，级别越高标题的字体越大。

2.2段落标签

...

2.3换行标签

2.4水平线标签

2.5字体样式标签

加粗：
斜体：...

2.6注释和特殊符号

特殊符号	字符实体
空格特殊符号	;(牛逼三炮不让 用)
大于号(>)	> ;
小于号(<)	< ;
引号(")	" ;
版权符号©	© ;

3.图像标签 3.1常见的图像格式

JPG     GIF     PNG     BMP
​

3.2语法

3.3示例

4.链接标签 4.1页面间链接

4.1.1语法

链接文本或图像
注意：target指的是链接在哪个路径打开，默认值有_self(新网页替换本网页)和_blank（在增加一个新的标签网页，原有的网页被保存下来）
例如：
跳转到new.html  （新网页替换本网页）
跳转到new.html  （在增加一个新的标签网页，原有的网页被保存下来）

4.1.2示例

    
        
        
    
    
        跳转到Demo2页面
    

4.2锚链接

从A页面的甲位置跳转到本页中的乙位置

从A页面的甲位置跳转到B页面中的乙位置

4.2.1语法

创建跳转标记：
乙位置
​
创建跳转链接：
甲位置

4.2.2示例

    
        
        
    
    
        
        9月16日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例84例。其中境外输入病例22例（云南16例，河南2例，广东2例，上海1例，浙江1例），含2例由无症状感染者转为确诊病例（浙江1例，河南1例）；本土病例62例（福建61例，其中厦门市31例、莆田市28例、泉州市1例、漳州市1例；云南1例，在德宏傣族景颇族自治州），含1例由无症状感染者转为确诊病例（在福建）。无新增死亡病例。新增疑似病例2例，均为境外输入病例（均在上海）。
        跳转到顶部
    

4.3功能性链接

4.3.1语法

链接文本或图像

5.列表 5.1无序列表

    
张三
    
李四
    
王五
    
赵六

快捷键：li*个数+Tab键

5.2有序列表

    
张三
    
李四
    
王五
    
赵六

​
注：ol标签里只允许包含li标签

5.3定义列表

    
水果
    
苹果
    
桃子
    
李子

​
:类目名
:类目列表

6.表格 6.1基本表格

    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
1行1列的标题
1行2列的标题
1行3列的标题
1行1列的单元格
1行2列的单元格
1行3列的单元格
2行1列的单元格
2行2列的单元格
2行3列的单元格

​
:单元格的标题
:数据本身

6.2跨列（只能加在td里面）

td中属性colspan
​

    
        
        
    
    
        

        

            
姓名
            
学号
            
分数
        
        

            
张三
            
1001
            
80
        
        

            
李四
            
1002
            
56
        
        

            
王五
            
1003
            
75
        
        
    

解析：
数据内容
（跨列指的是列数<左右>单元格的合并 去掉一个td）

6.3跨行（只能加在td里面）

td中属性rowspan
​

    
        
        
    
    
        

        

            
姓名
            
学号
            
分数
        
        

            
张三
            
1001
            
80
        
        

            
李四
            
1002
            
56
        
        

            
王五
            
1003
            
75
        
        
    

解析：
数据内容
（跨行指的是行数单元格<上下单元格>的合并  去掉一个td）

7.媒体元素 7.1video播放视频

7.1.1语法

7.1.2示例

    
        
        
    
    
        
    

​

7.2video播放多种格式视频

7.2.1示例

防止各类浏览器无法播放视频
​

    
        
        
    
    
        
    

7.3audio播放音乐

7.3.1语法

7.3.2示例

7.4audio播放多种格式音乐

7.4.1语法

7.4.2示例

防止各类浏览器无法播放视频
​

    
        
        
    
    
        
            
            
        
    

8.常用表单 表单语法：

    ...

​
method：规定如何发送表单数据，常用值是get/post
action：表示向何处发送表单数据

表单格式：

​
type：input元素类型
name：input元素名称（前端传入到后端，前端触发之后后端获取value值，前端里面基本看不到）
value：input元素的值

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、image和button，默认为text
name	指定表单元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否被选中

8.1文本框——text

8.1.1语法

8.1.2示例

    
        
        
    
    
        

            
        
    

​

8.2密码框——password

8.2.1语法

8.2.2示例

8.3单选按钮——radio

8.3.1语法

8.3.2示例

    
        
        
    
    
        

            男

            女

        
    

​

8.4复选框(多选按钮)——checkbox

8.4.1语法

8.4.2示例

    
        
        
    
    
        

            足球

            篮球

            排球

        
    

​

8.5列表框——select、option

8.5.1语法

8.5.2示例

    
        
        
    
    
        

            
                南京
                北京
                上海
                深圳
            
        
    

8.6按钮——reset（重置）、submit（提交）、button

8.6.1语法

   
  后端可以获取
 后端无法获取
​
onclick：给某个元素添加事件

8.6.2示例

    
        
        
    
    
        

            

            

            男

            女

            足球

            篮球

            排球

            
                南京
                北京
                上海
                深圳
            

            
            
            
        
    

8.7默认元素——checked / selected

8.7.1示例

一般情况下：
类型中使用selected
其它类型中使用checked
​

    
        
        
    
    
        

            

            

            男

            女

            
                南京
                北京
                上海
                深圳
            

            
        
    

8.8多行文本框—— textarea

8.1.1语法

8.1.2示例

8.9文件域——file

8.9.1语法

​
accept：不写默认所有文件都可以

8.9.2示例

9.表单高级应用 9.1隐藏域——hidden

9.1.1语法

9.1.2示例

9.2只读——readonly

9.2.1语法

9.2.2示例

9.3禁用——disabled

9.3.1语法

9.3.2示例

10.表单初级验证 10.1 placeholder

10.1.1语法

10.1.2示例

10.2 required

10.2.1语法

10.2.2示例

10.3 pattern

10.3.1语法

10.3.2示例