Html笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45193294/article/details/117911618

Html

一、html初始

1、Hyper Text Mark Language(超文本标记语言)

$- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PkvhdWZU-1623669426083)(C:\Users\航航\AppData\Roaming\Typora\typora-user-images\image-20210517161442008.png)]$

2、W3C标准

W3C
- world Wide Web Consorttium(万维网联盟)
- 成立于1994年，Web技术领域最权威和最具影响李的国际中立技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/

w3c标准包括

结构化标准语言（html,xml）
表现标准语言（css）
行为标准（DOM,ECMAScript）

3、html结构

<!--DOCTYPE：告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head:头部-->
<head>
    <!--meta：描述性标签，它用来描述我们的网站的一些信息-->
    <!--meta一般用来左SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="淘宝公司">
    <meta name="description" content="淘宝可以买衣服">
    <!--title网页标题-->
    <title>Title</title>
</head>

<!--body:网页主体-->
<body>
 <h1>qwertyui</h1>
</body>
</html>

二、html标签

1、网页基本标签

<!--标题标签-->
<h1>一级标签</h1>
<!--段落标签-->
<p></p>
<!--换行标签-->
<br/>
<!--水平线标签-->
<hr/>
<!--字体样式标签-->
粗体：<strong>i love you</strong>
斜体：<em>i love you</em>
<!--特殊符号-->
空格：&nbsp;
大于号：&gt;
小于号：&lt;
版权符号：&copy;

2、图像标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fleukmDa-1623669426086)(Html.assets/image-20210517165658833.png)]

<!--图像标签
src:图片地址
    相对地址
    绝对地址
    ../   --上一级目录
alt: 图片显示失败的替代文字
title:鼠标放在图片上的悬停文字   
-->
<img src="" alt="图标加载失败显示" title="鼠标悬停文字" width="300" height="300">

4、链接标签

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uBnzxaah-1623669426088)(C:\Users\航航\AppData\Roaming\Typora\typora-user-images\image-20210517170645340.png)]$

<body>
<!--a标签
target:标识链接在哪里打开
       _blank --在新标签中打开
       _self  --在自己的网页中打开
-->

<!--文字超链接-->
<a href="1.网页结构.html" target="_blank">跳转到页面一</a>
<a href="http://www.baidu.com">跳转到百度</a>
<!--图片超链接-->
<a href="1.网页结构.html">
    <img src="" alt="" title="">
</a>

<!--锚链接： 回到顶部页面内，页面间，回到底部
1、需要一个标记 --在网页的最上面做一个标记
2、跳转到标记
-->
<a name="top">4号页面的顶部的锚</a>
<a href="#top">回到4号页面的顶部</a>
<a href="1.网页结构.html#botton">调转到1号页面的顶部</a>
然后在1号页面做一个锚

<!--功能性链接
邮件链接：mailto
QQ链接
-->
<a href="mailto:2867085942@qq.com">点击发送邮件</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="给我发消息哈哈哈" title="给我发消息哈哈哈"/></a>
</body>

5、块元素和行内元素

块
- 无论多少，该元素独占一行
- ```
<p>,<h>
```
行内
- 内容撑开宽度，左右都是行内元素的可以拍成一排
- ```
<a>,<strong>,<em>
```

三、列表

1、什么是列表？

列表就是信息资源的一种展示形式，它可以使信息结构化，合理化并以列表的形式的样式显示出来，一边浏览者能更快的获得相应的信息

2、列表的分类

1、有序列表

<!--有序列表
应用：试卷，问答
-->
<ol>
    <li>java</li>
    <li>c++</li>
    <li>js</li>
    <li>html</li>
</ol>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i6dsGqNc-1623669426089)(Html.assets/image-20210517181035507.png)]

2、无序列表

<!--无序列表
应用：导航，侧边栏
-->
<ul>
    <li>java</li>
    <li>c++</li>
    <li>js</li>
    <li>html</li>
</ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vIP9Q4Of-1623669426090)(Html.assets/image-20210517181052305.png)]

3、定义列表

<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
应用：官网底部信息
-->
<dl>
    <dt>学科</dt>

    <dd>java</dd>
    <dd>python</dd>
    <dd>linux</dd>
    <dd>c</dd>

    <dt>位置</dt>
    <dd>西安</dd>
    <dd>宝鸡</dd>
    <dd>石家庄</dd>
    <dd>成都</dd>
</dl>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O7XYjJ4O-1623669426091)(Html.assets/image-20210517181104139.png)]

四、表格

1、代码

<!--表格-->
<table border="1">
    <!--跨列-->
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <!--跨行-->
    <tr>
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr >
        <td rowspan="2">阳阳</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

2、结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kkb6mXL0-1623669426092)(Html.assets/image-20210517183851930.png)]

五、媒体

<!--媒体
controls：显示音频，视频
autoplay：自动播放
-->
<!--音频-->
<audio src="../resources/audio/a.mp3" controls>音频</audio>
<!--视频-->
<video src="../resources/video/a.mp4" controls autoplay></video>
</body>

六、页面结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vN33xeEN-1623669426092)(Html.assets/image-20210517185645316.png)]

<body>
<header>
    <h2>头部</h2>
</header>
<section>
    <h2>主体</h2>
</section>
<footer>
    <h2>底部</h2>
</footer>
</body>

七、iframe内联框架

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KHEiTHdE-1623669426093)(Html.assets/image-20210517190143955.png)]

<body>
<!--iframe内联框架：网页的嵌套
其常用属性如下：
height属性：用于规定 iframe 的高度。
width属性：用于规定 iframe 的宽度。
frameborder属性：规定是否显示 iframe 周围的边框，设置属性值为 “0” 就可以移除边框。
name属性：与a标签的 target 属性联用可使 iframe 用作链接的目标。
-->
    <!--在这个页面中嵌套一个bing页面-->
<iframe src="https://cn.bing.com/?mkt=zh-CN" name="xoxo" height="1080" width="1920" frameborder="8"></iframe>

<iframe src="" name="hello" width="1500" height="800"></iframe>
<a href="http://www.baidu.com" target="hello">将百度首页，显示在hello框架中</a>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nbkAmrBY-1623669426093)(Html.assets/image-20210517192409720.png)]

八、表单

1、表单格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4oTt8V7q-1623669426094)(Html.assets/image-20210517192816470.png)]

2、input标签的属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dm5kDhm0-1623669426094)(Html.assets/image-20210517193529164.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GylvC6ZL-1623669426095)(Html.assets/image-20210517205518531.png)]

3、单选框，复选框，按钮

<form action="1.网页结构.html" method="get">
   <p>性别：<br/>
        <!--name="sex":这代表下面两个单选框是一组，每次只能选一个-->
        <!--checked：默认选中 -->
        <input type="radio" name="sex" value="男" checked/>男
        <input type="radio" name="sex" value="女"/>女
    </p>
    <p>
        <!--多选框也是分组的，一组可以提交成一个数组-->
        <!--checked：默认选中 -->
        爱好：<br/>
        <input  type="checkbox" name="hobby" value="eat"/>吃饭<br/>
        <input  type="checkbox" name="hobby" value="sleep"/>睡觉<br/>
        <input  type="checkbox" name="hobby" value="code" checked/>敲代码<br/>
        <input  type="checkbox" name="hobby" value="game"/>游戏<br/>
    </p>
    <p>
        按钮：<br/>
        <input type="button" name="bt1" value="好大的按钮"/><br/>
        <!--图片也可以提交-->
        <input type="image" src="../resources/img/a.jpg"><br/>

    </p>
    <p>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置">
    </p>
</form>

4、下拉框，文本域，文件域

<p>
    <!--下拉框-->
    <!--selected：默认选择-->
    国家：
    <select name="国家">
        <option value="china">中国</option>
        <option value="US">美国</option>
        <option value="UK" selected>英国</option>
        <option value="French">法国</option>
        <option value="Japan">日本</option>
    </select>
</p>
<P>
    <!--文本域-->
    评价： <br/>
    &nbsp;&nbsp;&nbsp;&nbsp;<textarea name="文本" rows="5" cols="10"></textarea>
</P>
<p>
    <!--文件域-->
    <input type="file" name="files" value="文件"/>
    <input type="button" value="下载">
</p>

5、各种验证

<!--邮箱验证-->
<p>
    邮箱：
    <input type="email" name="email">
</p>
<!--url验证-->
<p>
    url：
    <input type="url" name="url">
</p>

6、数量，滑块，搜索

<!--数量-->
<p>
    商品数量：
    <input type="number" name="num" min="1" max="100" step="2">
</p>
<!--搜索框-->
<p>
    百度搜索：
    <input type="search" name="search">
</p>
<!--滑块,音量-->
<p>
    音量：
    <input type="range" name="voice" min="1" max="100" step="2" >
</p>

7、表单的验证

placeholder：提示信息
required：不能为空
pattern：正则表达式

<!--placeholder：提示信息-->
<!--required：不能为空-->
<p>
    用户名：<input type="text" name="username" placeholder="请输入用户名"  required/><br/>
    密码：<input type="password" name="pwd" placeholder="请输入密码" /><br/>
</p>
<!--pattern:正则表达式-->
<p>
    自定义邮箱：<br/>
    <input type="text" name="diuemail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
</p>

九、表单案例

<form action="#" method="post">
    <table border="1" align="center" width="500">
        <tr>
            <td width="100"><label for="username">用户名</label> </td>
            <td><input type="text" name="username" id="username" placeholder="请输入用户名"/></td>
        </tr>
        <tr>
            <td><label for="password">密码</label> </td>
            <td><input type="password" id="password" name="password" placeholder="请输入密码"/></td>
        </tr>
        <tr>
            <td><label for="email">邮箱</label> </td>
            <td><input type="email" name="email" id="email" placeholder="请输入邮箱"/></td>
        </tr>
        <tr>
            <td><label for="tele">手机号</label> </td>
            <td><input type="tel" name="tele" id="tele" placeholder="请输入手机号"/></td>
        </tr>
        <tr>
            <td><label>性别</label> </td>
            <td>
                <input type="radio" name="sex"  value="male"/>男
                <input type="radio" name="sex"  value="female"/>女
            </td>
        </tr>
        <tr>
            <td><label for="birthday">出生日期</label> </td>
            <td><input type="date" name="birthday" id="birthday"/></td>
        </tr>
        <tr>
            <td><label for="evlate">评价</label> </td>
            <td width="200" height="150"><textarea name="evlate" id="evlate" ></textarea></td>
        </tr>
        <tr>
            <td><label for="checkcode">验证码</label></td>
            <td>
                <input type="text" name="checkcode" id="checkcode"/>
                <img src="../resources/img/c.png">
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="button" value="提交" ></td>
        </tr>
    </table>
           <td width="200" height="150"><textarea name="evlate" id="evlate" ></textarea></td>
        </tr>
        <tr>
            <td><label for="checkcode">验证码</label></td>
            <td>
                <input type="text" name="checkcode" id="checkcode"/>
                <img src="../resources/img/c.png">
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="button" value="提交" ></td>
        </tr>
    </table>

在这里插入图片描述