HTML基础总结

都是自己学习时候总结的，如有错误以及需要改进的地方，请大家尽管指出，共同进步，谢谢。

HTML(Hyper text markup language)：超文本标记语言。

一、HTML文档结构：

二、HTML普通标签

1、段落标签

文本内容

特点：上下自动生成空白行。换行(br标签)不会生成空白行。

2、文字标签

文本内容

文本格式化标签：

• 文本加粗标签

    
    
    加粗内容
    加粗内容

• 文本倾斜标签

    
    
    倾斜内容
    倾斜内容

• 删除线标签

    
    
    删除线内容
    删除线内容

• 下划线标签

    
    
    下划线内容
    下划线内容

• 标题标签

h1~h6，

定义最大的标题，

定义最小的标题；
h1 在一个页面里只能出现一次；

    
    
标题1
    
标题2
    
标题3
    
标题4
    
标题5
    
标题6

3、图片标签

src：图片的来源，必写属性；
alt：替换文本，图片不显示的时候显示的文字；
title：提示文本，鼠标放到图片上显示的文字；
width：图片宽度；
height：图片高度；

4、超链接标签

• 超链接

href：去往的路径(跳转的页面)必写属性；
title：提示文本，鼠标放到链接上显示的文字；
target=”_self”：默认值，在自身页面打开(关闭自身页面，打开链接页面)
target=”_blank”：打开新页面(自身页面不关闭，打开一个新的链接页面)

• 锚链接

1、先定义一个锚点：

2、超链接到锚点：回到顶部

• 空链

• 链接优化写法，让所有超链接都在新窗口打开：

• 特殊字符

  

<  

>   

©

¥

5、列表标签

• 无序列表

    
    

        
列表项
        
列表项
        
列表项
    

type=”square”：小方块；
type=”disc”：实心小圆圈；
type=”circle”：空心小圆圈；

• 有序列表

    
    

        
列表项
        
列表项
        
列表项
    

type=”1,a,A,i,I”，
start=”3” 决定了开始的位置。

• 自定义列表

    
    

        
小标题
        
解释标题1
        
解释标题2
    

6、表格标签

• 表格标签：展示数据，是对网页重构的一个有益补充。

快速创建表格：table>tr*3>td*3

    

        
        
张三
        
18
        
经理
    

属性：
border=”1”：边框；
width=”500”：宽度；
height=”300”：高；
cellspacing=”2”：单元格与单元格的距离；
cellpadding=”2”：内容距边框的距离；
align=”left | right | center” ；
如果直接给表格用align=”center”：表格居中；
如果给tr或者td使用，tr或者td的内容居中；
bgcolor=”red”：表格的背景颜色

• 表格的标准结构(了解就行，对seo更友好)

• 表头和单元格合并

    
    
表头信息
    

        
        
米奇 6
        
        
        
前端
    
    

        
米奇
        
6
        
    
    

        
米奇
        
6
        
    

colspan=”2”：合并同一行上的单元格
rowspan=”2”：合并同一列上的单元格

• 表格标题、边框颜色、内容垂直对齐

    

        
        
米奇
        
6
        
前端
    
    

        
        
米奇
        
6
        
前端
    
    

        
米奇
        
6
        
前端
    

表格标题 用法和td一样：使标题的文字自动加粗水平居中对齐；
边框颜色：bordercolor="red"；
内容垂直对齐方式：
valign=”top | middle | bottom”

练习

细线表格

细线课程表

    
    


    

        
课程表
        

            

            
            
星期一
            
星期二
            
星期三
            
星期四
            
星期五
        
        

            
上午
            
1
            
语文
            
数学
            
物理
            
化学
            
生物
        
        

            
            
2
            
体育
            
音乐
            
几何
            
画画
            
舞蹈
        
        

            
下午
            
1
            
体育
            
画画
            
音乐
            
语文
            
音乐
        
        

            
            
2
            
英语
            
舞蹈
            
体育
            
唱歌
            
体育
        
    

三、HTML表单标签

表单的作用是收集信息

• 表单域

属性：
action：处理信息；
method="get | post"
get通过地址栏传输信息，安全性差；
post 通过1.php来处理信息，安全性高

• 文本输入框

用户名：

name="username"：输入框的名称；
value="大前端"：默认值，将输入框的内容传给处理文件
maxlength="6" ：限制输入字符长度；
readonly="readonly"：将输入框设置为只读模式(不能编辑)
disabled="disabled"：输入框为未激活状态；

• 标注

    
        输入账号：
        
    

    
        输入账号：
        
        
        

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

1. 用lalbe 直接进行包裹input 就可以了
2. 如果label里面有多个表单，想定位到某个 可以通过for id 的格式来进行

• 密码输入框

密码：

文本输入框的所有属性对密码输入框都有效

• 单选框

 
男
女

只有将name的值设置成相同的时候，才能实现单选效果；
checked=”checked”：设置默认选择项

• 下拉列表

省(市)：
                    河北
                    山西
                    山东
                    北京
               

属性：
multiple="multiple"：将下拉列表设置为多选项；
selected="selected"：设置默认选中项

• 下拉列表分组

市(区)：
            
            昌平区
            海淀区
            朝阳区
            大兴区
            
        
        
                              
            昌平区
            海淀区
            朝阳区
            大兴区
            
        

：对下拉列表进行分组；
label=""：分组的名称

• 多选框

喝酒
抽烟
烫头

checked="checked"：设置默认选中项

• 多行文本框

cols：控制输入字符的长度；
rows：控制输入的长度

• 文件上传控件

• 文件提交按钮

可以实现提交信息功能

• 普通按钮

不能提交信息，配合JS使用

• 图片按钮

图片按钮，可以实现提交功能

将信息重置到默认状态

• 表单信息分组

        
        

            
分组信息
        

：对表单信息进行分组；

：表单信息分组名称

四、HTML5标签

常用新标签：

• header：定义文档的页眉 头部；

    
语义：定义文档的页眉 头部

• nav：定义导航栏；

    
语义：定义导航栏

• footer：定义文档或节的页脚底部；

    
语义：定义文档或节的页脚底部

• article：定义文章

       
语义：定义文章

• section：定义文档中的节(section、区段)

      
语义：定义区域

• aside：定义其所处内容之外的内容 侧边

语义：定义其所处内容之外的内容 侧边

新增的type属性值：

• datalist：标签定义选项列表。请与input元素配合使用该元素

• fieldset：可将表单内的相关元素分组、打包 和legend搭配使用

    

        
        
用户登录
        用户名：
        

        

        密 码：
  

• 网址控件

• 搜索控件

• 日期控件：年月日

• 月份控件：获得年月

• 星期控件：获得星期

• 时间控件：小时 分钟

• 邮件控件

• 数字控件

• 滑块控件

• 颜色控件

常用新属性

• placeholder：占位符提供可描述输入字段预期值的提示信息 ：当用户输入的时候，里面的文字消失，删除所有文字，自动返回

• autofocus： 规定当页面加载时 input 元素应该自动获得焦点

• mutiple：多文件上传

• autocomplete：规定表单是否应该启用自动完成功能

1、autocomplete 首先需要提交按钮
2、这个表单您必须给他名字
  

• required： 必填项，内容不能为空

• accesskey：规定激活（使元素获得焦点）元素的快捷键：采用alt+字母的形式

多媒体标签

• embed（会使用）：
  embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

优酷，土豆，爱奇艺，腾讯、乐视等等

1. 先上传
2. 在分享

• audio：
  HTML5通过

并且可以通过附加属性可以更友好控制音频的播放，如：
autoplay：自动播放
controls：是否显不默认播放控件
loop：循环播放，loop = 2就是循环2次；loop 或者loop = "-1"是无限循环
多浏览器支持的方案，如下图

• video：
  HTML5通过

同样，通过附加属性可以更友好的控制视频的播放
autoplay：自动播放
controls：是否显示默认播放控件
loop：循环播放
width：设置播放窗口宽度
height：设置播放窗口的高度