html笔记

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

html常用的标签

    加粗标签
    斜体
    
    加粗标签
    斜体
    
    删除标签
    
    上标字
    
    
预格式话文本标签
    
    
引用块,比如引用别人的名言
    
    lol
    
    陈chen
    
    带标记的标签
    
    我是自定义标签
    
    

        
隐藏内容的标题
        
woshineirongyi
    

实体字符

大于号:>
小于号:<
空格符: 
引号:"
注册商标:®
版权:©
&符号:&

a标签

link(未被访问的链接) visited(以被访问的链接)
hover(鼠标移到链接上) active(正在被点击的链接)

href:地址
target:跳转方式
    _self:(默认值)在当前页面打开链接
    _blank:跳转到新窗口
作用:
             1.页内跳转:
             2.空链接
             3.实现下载(不安全)

无序列表 ul （重点）

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

  
列表项1
  
列表项2
  
列表项3
  ......

脚下留心：

 1. 
中只能嵌套
，直接在
标签中输入其他标签或者文字的做法是不被允许的。
 2. 
与
之间相当于一个容器，可以容纳所有元素。
 3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

有序列表 ol （了解）

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

  
列表项1
  
列表项2
  
列表项3
  ......

自定义列表（理解）

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

  
名词1
  
名词1解释1
  
名词1解释2
  ...
  
名词2
  
名词2解释1
  
名词2解释2
  ...

创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

    ...
  
  ...

  

    
单元格内的文字

在上面的语法中包含三对HTML标签，分别为

、、，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释

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

2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

3.td /td：用于定义表格中的单元格，必须嵌套在标签中，一对  中包含几对，就表示该行中有多少列（或多少个单元格）。

注意：

1. 中只能嵌套

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

表头标签

表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签替代相应的单元格标签即可。

合并单元格(难点)

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

合并单元格的思想：

​ 将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。

​ 公式： 删除的个数 = 合并的个数 - 1

合并的顺序 先上 先左

热区：通过map地图的名字与图片关联起来

        属性：shape：定义地图形状，coords定义地图坐标，href：定义地图链接地址
        定义地图坐标方法：
            矩形地图rect：测量矩形左上角的坐标，从大图的左上角开始到目标地图左上角的距离即是矩形左上角的坐标值，
                        测量矩形右下角的坐标，从大图的左上角开始到目标地图的右下角的距离即是矩形右下角的坐标值，
                        然后按从左到右的顺序依次写坐标值（注意先写x轴坐标再写y轴坐标），坐标值之间用逗号隔开。
            圆形地图circle：测量目标地图的圆心坐标，从大图的左上角开始到目标地图的圆心的距离即是圆心的坐标值，
                        依次将坐标值写入coords这里，第三个参数是目标地图的半径。
            自定义形状poly：测量目标地图的坐标从左上角的角开始测量，依次测量出每个角的坐标值，写入coords，完成。         
    
    

iframe:引入其他页面

src：需要引入的目标页面的路径
            frameborder：iframe的边框
                0/no:表示隐藏边框
                1/yes：表示显示边框
            scrolling:iframe的滚动条
                no:表示隐藏滚动条
                yes：表示显示滚动条
                auto：自动
                
        优点：提取网站公共部分，比如底部的信息
        缺点：不利于搜索引擎优化，百度爬虫不能识别iframe引入的页面的内容。
    
    
    

语义化标签

header nav section article footer

表单和表单元素

  action:提交数据给后台的路径
        method:提交表单的方式
            get:提交内容显示在地址栏，通过？连接在提交地址的后面,对于有敏感信息的数据不适合用get方式提交(不安全)。
            post:一般适合用于敏感信息的数据提交，适合数据比较多的时候使用。
        enctype:定义表单提交数据的格式
  表单元素类型type(默认为text)
                    radio:单选按钮，可以通过label关联到文字
                    text:文本框
                    password：密码
                    CheckBox：复选框
                    submit：提交按钮
                    reset：重置按钮
                    image:提交表单按钮
                    button:普通按钮
                    hidden:隐藏域
                    file:上传文件(提交表单方式用post，定义表单的数据格式为enctype="multipart/form-data")
                    
                required:表示此文本框是必填项
                placeholder:用户提示语
                readonly:表示只读
                disabled:禁用
                readonly和disabled的区别，1、页面显示样式不一样,2、readonly可以提交数据到后台，disabled不能提交数据到后台
                maxlength:输入内容的最大长度
                size:定义input框的大小
                checked:复选框默认选项
                accept:定义文件上传类型
                color:拾色器
                    data:日期控件
                    email:定义邮箱字段,判断邮箱地址格式是否正确
                    number:只能输入数字
                    search:搜索框
                    ulr:定义url文本字段，提交表单时会检测url地址格式是否正确
                多行文本域
                rows:定义多行文本域的行数
                cols：定义多行文本域的列数
                浏览器不能解析多行文本域里面的标签的
                resize:none;禁止用户拉伸文本框

媒体标签

音频audio
            src:音频路径
            autoplay:音乐自动播放
            controls：音乐控制器,比如播放按钮等
            loop:循环播放音乐
            preload:页面加载时进行加载，当设置了autoplay时，此属性不起效。
video视频
            poster:设置视频播放前的封面