HTML学习

初识HTML

  • HTML：Hyper Text Markup Language（超文本标记语言）
  • HTML5+CSS3
  • 纯天然跨平台

W3C：World Wide Web Consortium(万维网联盟)

W3C标准：

  • 机构化标准语言：HTML、XML
  • 表现标准语言:CSS
  • 行为标准DOM、ECMAScript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<body>、</body>等成对的标签，分别叫做开放标签和闭合标签。
单独呈现的标签（空元素），如<hr/>;意为用/来关闭标签。

网页基本信息

<!--注释的写法 -->    
<!-- DOCTYPE:告诉浏览器，我们要使用什么规范，默认HTML5-->
<!DOCTYPE html>

<!-- 总标签-->
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meta 描述性标签，它用来描述我们网站的一些信息 -->
    <!--meta 一般用来做SEO -->
    <meta charset="UTF-8">
    <meta name="keywords" content="ssl,ss,ll">
    <meta name="description" content="真的很强">
    <!--title网页标题  -->
    <title>第一个网站</title>
</head>

<!--body标签代表网页主体-->
<body>

Hello， world！

</body>
</html>

网页基本标签

  • 标题标签

    • <h1> 一级标签 </h1>
<h2> 二级标签 </h2>
<h3> 三级标签 </h3>
<h4> 四级标签 </h4>
<h5> 五级标签 </h5>
<h6> 六级标签 </h6>
......

  • 段落标签

    • <p>两只老虎，两只老虎， </p>
<p>跑得快，跑得快，</p>
<p>一只没有眼睛,</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>

  • 换行标签

    • 两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有耳朵，<br/>
一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>

  • 水平线标签

    • <hr/>

  • 字体样式标签

    • 粗体: <strong> i love you </strong>
斜体: <em> i love you </em>

  • 注释和特殊符号

<!--特殊符号-->
<!--  空格:   &nbsp;   -->
11&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;11
<br\>
大于  &gt;
<br\>
小于  &lt;
<br\>
版权  &copy;
<br\>
<!--
特殊符号记忆方式：
&开头 ;结尾
-->

图像标签

常见的图像格式：JPG、GIF、PNG、BMP(位图）...

<img src="图像地址" alt="图像显示失败的代替文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度"/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src :图片地址
      相对路径(推荐)，绝对路径
      ../   --上一级目录
alt :图像显示失败的代替文字
title:鼠标悬停提示文字
width:图像宽度
height:图像高度
-->
<img src="../resources/image/1.png" alt="头像" title="鼠标悬停提示文字" width="537" height="392">
</body>
</html>

超链接标签及应用

  • 文本超链接
  • 图像超链接
<a href="path" target="目标窗口位置">链接文本或图像</a>
  • 锚链接
<a id="top">顶部</a>
<a href="#top">回到顶部</a>
  • 功能性链接
<a href="mailto:123@qq.com">联系我</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记，现在已经弃用了，用id-->
<a id="top">顶部</a>

<!--a 标签
href:必填，表示要跳转到哪个页面
target:表示窗口在哪里打开
  _blank 在新标签页中打开
  _self 在自己的网页打开
-->
<a href="1.我的第一个网页.html"> 跳转到页面一</a>
<br/>
<a href="https://www.baidu.com"> 点我去百度</a>
</body>

<br/>

<a href="https://www.baidu.com">
  <img src="../resources/image/1.png" alt="头像" title="鼠标悬停提示文字" width="537" height="392">
</a>

<br/>
<a href="https://www.baidu.com">
  <img src="../resources/image/1.png" alt="头像" title="鼠标悬停提示文字" width="537" height="392">
</a>

<br/>
<a href="https://www.baidu.com">
  <img src="../resources/image/1.png" alt="头像" title="鼠标悬停提示文字" width="537" height="392">
</a>

<br/>
<a href="https://www.baidu.com">
  <img src="../resources/image/1.png" alt="头像" title="鼠标悬停提示文字" width="537" height="392">
</a>

<br/>
<!--锚链接
1.需要一个锚标记
2.跳转到标记#
-->
<a href="#top">回到顶部</a>

<!--功能性链接
邮件链接：mailto:
qq链接：qq推广，自动生成。
-->
<a href="mailto:123@qq.com">联系我</a>
</html>

行内元素和块元素

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

列表标签

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

分类：

  • 无序列表

    • <ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

  • 有序列表

    • <ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

  • 定义列表

    • <dl>
  <dt>列表名称</dt>
  <dd>a</dd>
  <dd>b</dd>
  <dd>c</dd>
  <dd>d</dd>
</dl>

表格标签

表格的优点:简单通用、结构稳定

基本结构: 单元格、行、列、跨行、跨列

<table >
  <tr>
    <!--colspan 跨列-->
    <td colspan="4">1-1</td>

  </tr>
  <tr>
    <!--rowspan 跨行-->
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>

  </tr>
</table>

视频和音频

<!--视频video
    src：资源路径
    controls 控制条
    autoplay 自动播放
-->
<video src="../resources/video/1.mp4" controls autoplay></video>

<!--音频audio
    src：资源路径
    controls 控制条
    autoplay 自动播放
-->
<audio src="../resources/audio/1.mp3" controls autoplay></audio>

页面结构

元素名 描述
header 标题头部区域的内容(用于页面或页面中的一块区域)
footer 标记脚步区域的内容(用于页面或页面中的一块区域)
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用(常用于侧边栏)
nav 导航类辅助内容 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
  <header>
    <h2>页面头部</h2>
  </header>

  <section>
    <h2>网页主体</h2>
  </section>

  <footer>
    <h2>页面底部</h2>
  </footer>
</body>
</html>

iframe内联框架

<iframe src="path" name="mainFrame">

</iframe>

<body>
<iframe src="//player.bilibili.com/player.html?aid=428389802&bvid=BV1NG411p73L&cid=774808937&page=1"
        scrolling="yes" border="0" frameborder="yes" framespacing="0" allowfullscreen="true"> </iframe>

<iframe src="//player.bilibili.com/player.html?aid=899473498&bvid=BV1YN4y1G7k6&cid=803337401&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

</body>

name:链接跳转

<body>
<iframe src="" name="hello"  width="1000px" height="800"></iframe>

<a href="https://www.bilibili.com/video/BV1x4411V75C?p=11&spm_id_from=pageDriver&vd_source=b1c9346178fc41766e00c3d88901f1cf" target="hello">dian</a>
</body>

初识表单post和get提交

表单语法：

<!--
    method:
        get方式提交，可以在url看到信息，不安全，高效
        post方式提交：
-->
<body>
    <form method="post" action="提交的页面">
        <p>名字：<input name="name" type="text"></p>
        <p>密码：<input name="pass" type="password"></p>
        <p>
            <input type="submit" name="Button" value="提交"/>
            <input type="reset" name="Reset" value="重填"/>
        </p>
    </form>
</body>

表单元素格式

属性 说明
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时，指定按钮是否是被选中

单选框radio

name选定一组
<p>
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
</p>

多选框 checkbox

name选定一组

name选定一组
<p>
    <input type="checkbox" value="sleep" name="habby"/>睡觉
    <input type="checkbox" value="play" name="habby"/>玩
</p>

按钮button

<p>
    <input type="button" name="btn1" value="按钮"/>   普通按钮
    <input type="image" src="网址"/>    图片按钮，点击跳转
    <input type="submit" name="Button" value="提交"/> 提交按钮
    <input type="reset" name="Reset" value="重填"/>  重置按钮
</p>

列表框文本域和文件域

  • select /option
<p>下拉框
    <select name="列表名称">
        <option value="1">1</option>
        <option value="2" checked>2</option>  默认
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</p>
  • textarea
<p>
    <textarea name="textarea" id="" cols="30" rows="10"></textarea>
</p>
  • 文件域
<!--        文件域-->
        <p>
            <input type="file" name="file">
            <input type="button" value="上传" name="upload">
        </p>

搜索滑动块和简单验证

<!--邮件验证-->
<p>邮箱
    <input type="email" name="email">
</p>
<!--URL-->
<p>URL
    <input type="url" name="url">
</p>
<!--数字-->
<p>数字
    <input type="number" name="num" max="100" min="0" step="10">
</p>

<!--滑块-->
<p>滑块：
    <input type="range">
</p>

<!--搜索框-->
<p>搜索：
    <input type="search" name="搜索" >
</p>

表单的应用

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disabled
        <!-- 增强鼠标可用性-->
        <p>
            <label for="mark">你点我试试</label>
            <input type="text" id="mark">
        </p>

表单的初级验证

常用方式：

  • placeholder 提示信息
  • required 非空判断
  • pattern 正则表达式（格式）