HTML祥解（初）

什么是HTML语言

Hyper Text Markup Language（超文本标记语言）

现在都是 Html5+css3

W3C： world wide web consortium（万维网联盟）

成立于1994，w3c标准包括结构化标准语言（HTML,XML），表现标准语言（css），行为标准（DOM,ECMAScript） www.w3.org

注释

<!-- -->

DOCTYPE :告诉浏览器，我们要使用什么规范

meta：描述网页的信息，一般用来做seo

标题标签：h1. 段落标签：p 换行标签br

水平线标签 hr 字体样式：粗体：strong 斜体：em

特殊符号： 空格：&nbsp 大于号：&gt 小于号&lt 版权符号：&copy

图像标签

<img src="" alt="" title="" width="" height="">
alt:在文件加载失败时显示的文字
title：鼠标悬停显示的文字

链接标签

<a href=""></a>       //在当前页面打开

<a href="" target="_blank"><img src="" alt=""></a>  //嵌套图片

<a href="" target="_blank"></a>   //打开一个新的页面

锚链接：也可以实现跨页面锚链接

<a name="top"></a>          用途：回到顶层，底层
<a href="#top"></a>         用法：定义一个标记，用a标签链接过去

邮件链接

<a href="mailto:"></a>

QQ推广

列表

有序列表      <ol><li></li><li></li><li></li></ol>

无序列表        <ul><li><li><li></li></li></li></ul>

自定义列表     <dl><dt><dd></dd><dd></dd></dt>
            <dt><dd></dd><dd></dd></dt></dl>

表格

<table><tr><td><td><td></td></td></td></tr>
    <tr><td><td><td></td></td></td></tr>
    <tr><td><td><td></td></td></td></tr></table>    三行三列

<table border="1px"><tr><td><td><td></td></td></td></tr>
    <tr><td><td><td></td></td></td></tr>
    <tr><td><td><td></td></td></td></tr></table>     //border 加边框 

<td colspan="">   跨列
<td rowspan="">    跨列 

插入音频

<video src="../html/resouse/869529087.mp4" controls autoplay></video>
必须要加controls  

<audio src="" controls autoplay></audio>  //和视频一样

页面结构分析

header	标题头部区域
footer	标记脚部区域
section	web页面中独立区域
article	独立文章内容
aside	相关内容
nav	导航或者辅助类

iframe内联框架

<iframe src=""  frameborder="0" width="" height="" ></iframe>  直接显示

<iframe src="" name="top" frameborder="0" width="1000" height="800" ></iframe>
<a href="https://www.baidu.com/" target="top">跳转</a>    通过加name和target实现跳转

表单提交

<h1>注册</h1>
<form action="表单提交的位置" method="get">
    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="userpsw"></p>
    <p>
    <input type="submit">
    <input type="reset"></p>
</form>

type是属性

get方式提交可以在url中看到提交的信息，高效

post方式安全，传输大文件

value：默认字符

maxlength：最大字符长度

size：设置文本框长度

文本框和单选框

<p>性别：<input type="radio" value="boy" name="sex"/>男<input type="radio" value="girl" name="sex"/>女</p>           单选框标签     要有相同的name  要赋予value

复选框

<p>爱好: <input type="checkbox" value="" name="hobby">1
        <input type="checkbox" value="" name="hobby">2
        <input type="checkbox" value="" name="hobby">3
        <input type="checkbox" value="" name="hobby">4
    </p>

按钮

<p><input type="button" value="你敢点我？"></p>    普通按钮
 <p><input type="image" src=""></p>        图片按钮
​

下拉框

<p>国家：
        <select name="列表名称" id="">
            <option value="选项的值">中</option>
            <option value="选项的值">美</option>
            <option value="选项的值">英</option>
​
​
        </select>
​
    </p>

文本域

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

传文件

    <p><input type="file" name="file"></p>

简单验证

    <p><input type="email" name=""></p>
    <p><input type="url" name=""></p>
    <p><input type="number" name="" max="" min="" step=""></p>   step用来一次增加多少

滑块

 <p><input type="range" min="" max="" step="2"></p>

还有其他一些比如只读，隐藏，不可点的（readonly，hidden，diable）

增强鼠标可用性

<p>哈哈
        <label for="text"></label>
        <input type="text" id="text">
​
    </p>

在文本框提示验证

<p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>  //placeholder提示 required 表示不能为空
<p> 提交：<input type="text" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"></p>
//正则表达式来限定框里填什么