HTML

概述

什么是HTML？

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

超文本包括：文字、图片、音频、视频、动画等

HTML5的优势：

世界知名浏览器厂商对HTML5的支持：微软、Google、苹果、Opera、Mozilla
市场的需求
跨平台

W3C标准：

什么是W3C？

W3C：World Wide Web Consortium（万维网联盟）

成立于1994年，Web技术领域最权威和最具影响力的国际中立性技术标准机构

https://www.w3.org/

https://www.chinaw3c.org/

W3C标准包括：

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

网页基本信息

DOCTYPE声明
< title > 标签
< meta >标签

 <!--注释快捷键：ctrl+/-->
 
 <!--DOCTYPE:文档说明，告诉浏览器，我们需要使用什么规范-->
 <!DOCTYPE html>
 <html lang="en">
 <!--head标签:网页头部-->
 <head>
     <!--meta标签:描述性标签，用来描述我们网站的一些信息-->
     <meta charset="UTF-8">
     <meta name="keywords" content="html学习">
     <meta name="description" content="来这里学习html">
     <!--title标签:网页标签-->
     <title>第一个网页</title>
 </head>
 <!--body标签:网页主题-->
 <body>
 你好
 </body>
 </html>

网页基本标签

标题标签 <h1>一级标题</h1>
段落标签 <p></p>
换行标签 <br>
水平线标签 <hr>
字体样式标签 <strong>粗体</strong> <em>斜体</em>
注释和特殊符号  空格 > > < <

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <!--标题标签-->
 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 
 <!--段落标签-->
 <p>床前明月光</p>
 <p>疑是地上霜</p>
 <p>举头望明月</p>
 <p>低头思故乡</p>
 
 <!--换行标签-->
 床前明月光<br>
 疑是地上霜<br>
 举头望明月<br>
 低头思故乡<br>
 
 <!--水平线标签-->
 <hr>
 
 <!--字体样式标签-->
 粗体： <strong>我爱你</strong> <br>
 斜体： <em>我爱你</em> <br>
 
 <!--特殊符号-->
 空   格
 空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格 <br>
 大于号：&gt; <br>
 小于号：&lt; <br>
 <h1></h1>
 </body>
 </html>

图像标签

常见的图片格式：JPG、GIF、PNG、BMP.........

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>图片标签</title>
 </head>
 
 <!--
 src（必填）：图片的路径     路径：相对路径 绝对路径
 相对路径（推荐，优先使用）：../resources/image/奋斗的小孩.jpg
 绝对路径：D:\Front-end\resources\image\奋斗的小孩.jpg
 ../ ：上一级目录
 
 alt（必填）:图片名字
 
 title：鼠标悬停在图片所显示的文字
 
 width height  宽 高
 -->
 
 <body>
 <img src="../resources/image/奋斗的小孩.jpg" alt="努力奋斗" title="加油" width="960" height="960">
 </body>
 </html>

链接标签

文本超链接图像超链接
锚链接
功能链接

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>链接标签学习</title>
 </head>
 <body>
 <a href="3.图片标签.html" name="top">顶部</a> <br><br><br>
 
 <!--a标签
 href（必填）：链接路径
 target :链接在哪个窗口打开
     _blank:在新标签中打开
     _self:在自己页面打开
 -->
 <!--文本标签-->
 <a href="1.FirstPage.html" target="_blank">跳转到firstPage</a>
 <a href="https://www.baidu.com/" target="_self">跳转到百度</a>
 <!--图片标签-->
 <a href="https://www.csdn.net/">
     <img src="../resources/image/奋斗的小孩.jpg" alt="csdn">
 </a>
 <a href="https://www.csdn.net/">
     <img src="../resources/image/奋斗的小孩.jpg" alt="csdn">
 </a>
 <a href="https://www.csdn.net/">
     <img src="../resources/image/奋斗的小孩.jpg" alt="csdn">
 </a>
 <a href="https://www.csdn.net/">
     <img src="../resources/image/奋斗的小孩.jpg" alt="csdn">
 </a>
 <a href="https://www.csdn.net/">
     <img src="../resources/image/奋斗的小孩.jpg" alt="csdn">
 </a>
 <a href="https://www.csdn.net/">
     <img src="../resources/image/奋斗的小孩.jpg" alt="csdn">
 </a>
 
 <!--锚链接
 1.需要一个标记点
 2.跳转到这个标记点
 
 -->
 <br>
 <a href="#top">回到顶部</a>
 <br>
 <a href="2.基本标签.html#down">down</a>
 
 <!--功能标签
 1.邮件链接：mailto
 2.qq链接：qq推广官网--推广工具--选择类型 复制里面代码
 -->
 <br>
 <a href="mailto:zcc2671185030@qq.com">点击发邮件</a>
 <br>
 <a target="_blank"
    href="http://wpa.qq.com/msgrd?v=3&uin=525211531&site=qq&menu=yes">
     <img border="0" src="http://wpa.qq.com/pa?p=2:525211531:53" alt="加我" title="加我"/></a>
 </body>
 </html>

行内元素和块元素

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行例如：a,strong,em.....
块元素：无论内容多少，该元素独占一行例如：p,h1-h6......

列表标签

什么是列表？

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

列表的分类：

无序列表
有序列表
自定义列表

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>列表学习</title>
 </head>
 <body>
 <!--无序列表
 应用范围：导航、侧边栏......
 -->
 <ul>
     <li>世界</li>
     <li>中国</li>
     <li>河北</li>
     <li>石家庄</li>
 </ul>
 <hr>
 <!--有序列表
 应用范围：试卷、问答......
 -->
 <ol>
     <li>世界</li>
     <li>中国</li>
     <li>河北</li>
     <li>石家庄</li>
 </ol>
 <hr>
 <!--自定义列表
 dl：标签
 dt：列表标题
 dd：列表内容
 -->
 <dl>
     <dt>城市</dt>
 
     <dd>石家庄市</dd>
     <dd>衡水市</dd>
     <dd>保定市</dd>
     <dd>邢台市</dd>
 
     <dt>饮食</dt>
 
     <dd>早餐</dd>
     <dd>午餐</dd>
     <dd>晚餐</dd>
     <dd>夜宵</dd>
 </dl>
 
 </body>
 </html>

表格标签

为什么使用表格？简单通用结构稳定

表格的基本结构：单元格、行、列、跨行、跨列

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>表格标签</title>
 </head>
 <body>
 <!--表格标签：table
 th :表头单元格 head
 tr :行  rows
 td :列  data
 
 colspan  跨列
 rowspan  跨行
 align  对齐方式
 -->
 
 <table border="1px">
     <tr>
         <td colspan="3" align="center">成绩</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>80</td>
     </tr>
     <tr>
         <td>数学</td>
         <td>80</td>
     </tr>
 </table>
 
 </body>
 </html>

媒体元素

视频元素：video

音频元素：audio

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <!--视频和音频
 视频 video  controls 控制区  autoplay自动播放
 音频 audio  controls 控制区  autoplay自动播放
 -->
 <body>
 <!--<video src="../resources/video/G.E.M.%20邓紫棋-光年之外%20(《太空旅客》电影中国区主题曲)(蓝光).mp4" controls autoplay></video>-->
 
 <audio src="../resources/audio/莫文蔚%20-%20盛夏的果实.flac" controls autoplay></audio>
 </body>
 </html>

页面结构分析

元素名	描述
header	标题头部区域的内容(用于页面或页面中的一块区域)
footer	标记脚部区域的内容(用于整个页面或者页面的一块区域)
nav	导航类辅助内容
section	WEB页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用(常用于侧边栏)

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <header>
     <h1>网页头部</h1>
 </header>
 
 <section>
     <h1>网页主体</h1>
 </section>
 
 <footer>
     <h1>网页脚部</h1>
 </footer>
 </body>
 </html>

iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--内联框架iframe
src 路径
width 宽
height 高

-->
<body>
<iframe src="" name="hello" frameborder="0" width="800" height="800"></iframe>

<a href="7.媒体元素.html" target="hello">跳转</a>
</body>
</html>

表单语法

表单元素格式：

属性	说明
type	指定元素的类型：text、password、checkbox、radio、submit、reset、file、hidden、image、button。默认为text
name	指定表单元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否被选中

文本框、单选框、多选框、按钮、列表框、文本域、文件域、搜索框滑块...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单语法</title>
</head>
<body>
<h1>注册账号</h1>

<!--表单 form
action :表单提交的位置，可以是网站，也可以是一个请求处理地址
method :提交方式  post：比较安全，可以传输大文件
                 get：可以在提交的url中看到我们提交的信息 ，不安全，但高效  默认就是get
-->
<form action="1.FirstPage.html" method="get" >

    <!--文本输入框：<input type="text" name="username">
    readonly  只读
    -->
    <p>用户名：<input type="text" name="username" value="超" readonly></p>

    <!--密码框：<input type="password" name="password">-->
    <p>密&nbsp;码：<input type="password" name="password" id="mark"></p>

    <!--按钮：
    单选按钮：<input type="radio" value="boy" name="sex">
    name是一个组 一个组的才能实现radio功能
    多选按钮：<input type="checkbox" value="girl" name="hobby">
    普通按钮：<input type="button" name="btn01" value="一键减肥">
    图片按钮：<input type="image" src="../resources/image/奋斗的小孩.jpg">
    提交按钮：<input type="submit" value="提交">
    重置按钮：<input type="reset" value="重置">

    checked:设置默认选中
    disabled:禁用
    -->
    <p>
        性别：
        <input type="radio" value="boy" name="sex" disabled>男
        <input type="radio" value="girl" name="sex">女
    </p>
    <p>
        爱好：
        <input type="checkbox" value="girl" name="hobby" checked>女孩
        <input type="checkbox" value="code" name="hobby" checked>敲代码
<!--        hidden  隐藏-->
        <input type="checkbox" value="study" name="hobby" hidden>学习
    </p>
    <p>
        <input type="button" name="btn01" value="一键减肥">
<!--        <input type="image" src="../resources/image/奋斗的小孩.jpg">-->
    </p>
    <!--下拉框 列表框 select  option
        selected:设置默认置顶
    -->
    <p>国家：
        <select>
            <option value="China">中国</option>
            <option value="America">美国</option>
            <option value="India">印度</option>
            <option value="England">英国</option>
            <option value="Muscovy" selected>俄国</option>
        </select>
    </p>
    <!--文本域textarea
    cols：列
    rows：行-->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">请输入您要反馈的内容：</textarea>
    </p>
    <!--文件域-->
    <p>
        <input type="file" name="files">
    </p>
    <!--邮件验证-->
    <p>邮箱地址：
        <input type="email" name="email">
    </p>
    <!--url-->
    <p>url地址：
        <input type="url" name="url">
    </p>
    <!--数字-->
    <p>商品数量：
        <input type="number" min="1" max="20" step="1">
    </p>
    <!--滑块-->
    <p>音量：
        <input type="range" min="0" max="100" step="2">
    </p>
    <!--搜索框-->
    <p>搜索
        <input type="search" name="search">
    </p>

<!--增强鼠标可用性-->
    <p>
        <label for="mark">点我一下</label>
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>
</body>
</html>

表单的应用

隐藏域：hidden
只读：readonly
禁用：disabled

表单初级验证

常用方式：

placeholder 设置提示信息
required 设置非空判断
pattern 正则表达式

posted @ 2022-04-11 19:05 超、自律即自由阅读(73) 评论(0) 编辑收藏举报

刷新页面返回顶部

zccjy

HTML

HTML

概述

网页基本信息

网页基本标签

图像标签

链接标签

行内元素和块元素

列表标签

表格标签

媒体元素

页面结构分析

iframe内联框架

表单语法

表单的应用

表单初级验证

公告