HTML知识点 - 技术栈

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

一、W3C标准

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

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

➢http://www.w3.org/

➢http://www.chinaw3c.org/

➢W3C标准包括：

1.结构化标准语言(HTML、XML)

2.表现标准语言(CSS)

3.行为标准(DOM、ECMAScript )

二、HTML基本结构

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

三、网页基本信息

1.DOCTYPE声明

2.<title>标签

3.<meta>标签

复制代码

<!--注释快捷键： Ctrl+/ -->
<!--DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>

<!--总标签-->
<html lang="en">

<!-- head标签代表网页头部-->
<head>
    <!--meta描述性标签，它用来描述我们网站的一些信息-->
    <!--meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="班班学Java">
    <meta name="description" content="学习HTML">

    <!--title网页标题-->
    <title>Title</title>
</head>

<!--body标签代表网页主体，代码写在这里面-->
<body>
Hello,World!
</body>

</html>

四、网页基本标签

➢标题标签 <h1>一级标签</h1>

➢段落标签 <p> </p>

➢换行标签 <br/>

➢水平线标签 <hr/>

➢字体样式标签粗体： <strong> </strong> 斜体： <em> </em>

➢注释和特殊符号

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p> 两只老虎 两只老虎 </p>

<p> 跑得快 跑得快 </p>

<p> 一只没有尾巴 一只没有耳朵 </p>

<p> 真奇怪 真奇怪 </p>

<!--水平线标签-->
<hr/>

<!--换行标签-->
 两只老虎 两只老虎 <br/>

 跑得快 跑得快 <br/>

 一只没有尾巴 一只没有耳朵 <br/>

 真奇怪 真奇怪 <br/>

<!-- 粗体 ， 斜体-->
<h1>字体样式标签</h1>

粗体： <strong>I  love you</strong>
斜体：  <em> I love you</em>

<br>
<!--特殊符号-->

空   格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

<br>
&gt;
<br>
&lt;
<br>
&copy;版权所有

<!--
特殊符号记忆方式

&   ;

-->

</body>
</html>

五、图片标签

➢常见的图片格式：

JPG、GIF、PNG、BMP...

src: 图像地址；alt:图像的代替文字；title：鼠标悬停提示文字；width：图像宽度；hieght:图像高度

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>

<!-- img学习
src: 图像地址
     相对地址（推荐使用） ， 绝对路径
     ../   --上级目录
-->
<img src="../resources/imags/x.jpg" alt="小哥" title="藏海花" width="500" height="300">

</body>
</html>

六、超链接标签及应用

1.页面间链接：从一个页面链接到另一个页面

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

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

<a href="1.我的第一个网页.html">
    <img src="../resources/imags/x.jpg" alt="小哥" title="藏海花" width="500" height="300">
</a>

</body>
</html>

2.锚链接

............

复制代码

<body>
<a id ="top">顶部</a>   【点击锚链接之后回到的位置】

........

复制代码

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

........

3.功能性链接

复制代码

<!--功能性链接
邮件链接：mailto
-->
<a href="mailto:1504612398@qq.com">点击联系我</a>

七、块元素和行内元素

➢块元素：

无论内容多少，该元素独占一行

（p、h1-h6）

➢行内元素：

内容撑开宽度，左右都是行内元素的可以排在一行

（a、strong、em...）

八、列表标签

1.什么是列表

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

2.列表的分类

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

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

◆定义列表 <dl> </dl>

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签学习</title>
</head>
<body>

<ol>
    <li>java</li>
    <li>python</li>
    <li>C/c++</li>
    <li>大数据</li>
</ol>

<hr/>

<ul>
    <li>java</li>
    <li>python</li>
    <li>C/c++</li>
    <li>大数据</li>
</ul>

<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>C/c++</dd>
    <dd>大数据</dd>

    <dt>位置</dt>
    <dd>贵州</dd>
    <dd>江苏</dd>
    <dd>河南</dd>
</dl>

</body>
</html>

九、表格标签

1.为什么使用表格

◆简单通用 ◆结构稳定

2.基本结构

◆单元格 ◆行 ◆列 ◆跨行 ◆跨列

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>

<!--表格table
行： tr rows
列： td
-->

<table border="lpx">
  <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

■音频元素：audio

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

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

<audio src="../resources/audio/1.mp3" controls autoplay></audio>


</body>
</html>

十一、页面结构分析

十二、iframe内联框架

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--iframe内联框架
src ： 地址
w-h ： 宽度高度
-->
<!-- <iframe src="https://www.4399.com/" width="1000px" height="800px"></iframe> -->

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

<a href="https://www.4399.com/" target="hello">点击跳转到4399</a>

</body>
</html>

十三、初识表单post和get提交

get方式提交：我们可以在url中看到我们提交的信息，不安全，高效。

post：比较安全，可以传输大文件。

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
action ： 表单提交的位置，可以是网站，也可以是一个请求处理地址
metho ： post ， get 提交方式
-->
<form action="1.我的第一个网页.html" method="get">
    <!--文本输入框：  input type="text"  -->
    <p>名字： <input type="text" name="username"></p>
    <!--密码框：  input type="password"  -->
    <p>密码： <input type="password" name="pwd"></p>
    
    <p>
        <input type="submit">
        <input type="reset">
    </p>

</form>

</body>
</html>

十四、表单元素格式

1.文本框

复制代码

<!--文本输入框：  input type="text"
  value="班班"  默认初始值
  maxlength="8"  最长能写几个字
  size="30"   文本框的长度
  -->
<p>名字： <input type="text" name="username" value="班班" maxlength="8" size="30"></p>

2.单选框

复制代码

<!--单选框：
    input type="radio"
    value : 单选框的值
    name ：表示组（相同的组内选择）
    -->
 <p>性别：
     <input type="radio" value="boy" name="sex">男
     <input type="radio" value="girl" name="sex">女
 </p>

3.按钮

复制代码

<!--按钮
input type="button"  普通按钮
input type="image"    图像按钮
<input type="submit"  提交按钮
input type="reset"    重置
-->
<p>按钮：
    <input type="button" name="btn1" value="点击变长">
    <input type="image" src="../resources/imags/x.jpg">
</p>

<p>
    <input type="submit">
    <input type="reset">
</p>

4.多选框

复制代码

<!--多选框
     input type="checkbox"
   -->
<p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby">敲代码
    <input type="checkbox" value="chat" name="hobby">聊天
    <input type="checkbox" value="game" name="hobby">游戏
</p>

5.列表框（下拉框）

复制代码

<!--下拉框，列表框
selected：默认
-->
<p>国家：
    <select name="列表名称">
        <option value="china">中国</option>
        <option value="us">美国</option>
        <option value="eth" selected>瑞士</option>
        <option value="yingdu">印度</option>
    </select>
</p>

6.文本域

复制代码

<!--文本域
       cols="50"（列）   rows="10（行）"
     -->
<p>反馈：
<textarea name="textarea" cols="50" rows="10" >文本内容</textarea>
</p>

7.文件域

复制代码

<!-- 文件域
input type="file" name="files"
-->
 <p>
     <input type="file" name="files">
     <input type="button" value="上传" name="upload">
 </p>

扩展：

8.简单验证

复制代码

<!--邮箱验证-->
 <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="1">
 </p>

9.滑块

复制代码

<!--滑块
input type="range"
-->
 <p>音量：
     <input type="range" name="voice" min="0" max="100" step="2">
 </p>

10.搜索框

复制代码

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

十五、表单的应用

1.隐藏域 hidden

复制代码

<p>密码： <input type="password" name="pwd" hidden value="123"></p>

2.只读 readonly

复制代码

<p>名字： <input type="text" name="username" value="班班" readonly></p>

3.禁用 disabled

复制代码

<input type="radio" value="boy" name="sex" disabled>男

4.增强鼠标可用性

复制代码

<p>
<!--增强鼠标可用性-->
    <label for="mark">你点我试试看</label>
    <input type="text" id="mark">
</p>

十六、表单初级验证

常用方式：

1.piaceholder 提示信息（可用于所有输入框）

复制代码

<p>名字： <input type="text" name="username" placeholder="请输入用户名" > </p>

2.required 非空判断（可用于所有输入框）

复制代码

<p>名字： <input type="text" name="username" placeholder="请输入用户名" required> </p>

3.pattem 正则表达式

复制代码

<p>自定义邮箱：
    <input type="text" name="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
</p>