HTML笔记

HTML

这里是{html}

1、DOCTYPE

文档类型声明
告诉浏览器按当前标准解析代码

2、标签

双标记 封闭类型标记
div,p,a,span
table,tr,td,th
ul,li
body,html,style
单标记 非封闭类型标记
link
img
input
br
meta
hr

3、元素

块级元素和行内元素的区别：
1)块级元素独占一行，行内元素同一行显示
2）块级元素默认宽高为100%，行内元素是有内容撑开
3）块级元素可以设置宽高，行内元素设置宽高不生效
4）块级元素用magin和padding可以设置四周，行内元素只能设置左右
5）块级元素可以包含块级元素和行内元素，行内元素一般不包含块级元素
6）块级元素{div,body,html,table,tr,td,ul,li,p,h1~h6}
7)行内元素{a,s,i,del,video,span,img}

4、图片

<img src="路径" alt="图片不能正常显示给予提示" title="鼠标悬停给予提示">

5、超链接

<a href="路径" target="设置打开的窗口_self|_blank" name="锚点"></a>

6、表格

<table>
    <caption>标题</caption>
    <thead>
        <tr>
            <th colspan="水平合并" rowspan="垂直合并"></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

7、表单

1）作用
提交数据，是页面具有交互性
2）标签

<form action="提交的地址" name="名称" method="提交的方式get|post"></form>

get和post的区别：
①get不安全，提交的数据会在地址栏中显示；post安全
②get只能提交少量的数据，post理论上没有限制
3）表单元素
文本框；

<input type="text">

密码框;

<input type="password">

单选框；

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

多选框；

<input type="checkbox">

提交框；

<input type="submit">

重置框；

<input type="reset">

按钮；

<input type="button">

<button>提交</button>
<button type="reset">重置</button>
<button type="button">没有功能的按钮</button>

文件；

<input type="file">

隐藏域；

<input type="hidden">

图片提交按钮；

<input type="image" src="">

下拉列表；

<select name="" id="">
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
</select>

多行文本框；

<textarea name="" id="" cols="30" rows="10"></textarea>

这个按钮用于提升用户体验；

<label for=""></label>

4）表单元素的属性
name 名称
value 当前值
checked 默认被选中，配合单选按钮和多选按钮使用
selected 默认显示，配合option使用
readonly 只读
disabled 禁用

5）H5新增type类型

<input type="email">
<input type="url">
<input type="search">
<input type="color">
<input type="number">
<input type="range">
<input type="tel">
<input type="date">
<input type="week">
<input type="month">

6）H5新增属性
placeholder="" 默认提示
autofocus 自动获取焦点
required 必填项
multiple 可以输入多个，用逗号隔开，配合邮箱和网址使用
min和max 最小值和最大值，配合数字和范围使用
minlength和maxlength 最小长度和最大长度

8、H5新增语义化布局标签

<header>头部</header>
<nav>导航</nav>
<aside>侧边栏</aside>
<article>文章、帖子、博客等</article>
<section>章节</section>
<footer>页脚</footer>

9、语义化标签

看到标签知道其含义

优点：
1）有利于SEO
2）有利于开发与维护
3）有利于屏幕阅读者去读取

10、视频和音频

1）视频

<video src="" autoplay loop controls muted poster="" width="" height="">您的浏览器不支持视频，请升级</video>

2）音频

<audio src="" autoplay loop controls muted>您的浏览器不支持音频，请升级</audio>

autoplay;自动播放
loop;循环播放
controls;显示控制面板
muted;静音
poster;播放前显示一张图片

11、四大通用属性

11、四大通用属性
除了br，其他元素都有的属性
title 鼠标悬停给予提示
style 行内样式
class 类选择器
id ID选择器