day15--HTML详解

HTML详解

一、 初识HTML

Hyper Text Markup Language (超文本标记语言)

HTML5+CSS3

浏览器都支持H5

跨平台

W3C （万维网联盟）

http://www.w3.org

W3C标准包括

  • 结构化标准语言
  • 表现标准语言（css)
  • 行业标准（DOM)

闭合标签

自闭合标签

二、网页基本标签

1、注释

<!-- 注释 -->

DOCTYPE html 告诉浏览器我们要使用的规范

1、头部

<head> 
    
</head>

meta 标签描述性标签，一般用来做SEO

<meta charset="UTF-8">
    <meta name="keywords" content="我的第一个网页">
        <meta name="description" contents="aa bb cc dd">

标题标签

一级标签

二级标签

三级标签

四级标签

五级标签
六级标签

段落标签

<p></p>

换行标签

<br/>

水平线标签

<hr/>

字体样式标签

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

注释和特殊符号

空格： 

&nbsp;

大于号

大
&gt;
小
&lt;
版权号
&copy;

查百度特殊字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 标题标签  -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!-- 段落标签 -->
<p>两只</p>
<p>老虎</p>
<p>跑得快</p>
<!-- 换行标签 -->
两只<br/>
老虎<br/>

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

<!-- 字体样式标签 -->
粗体：<strong>I love you</strong> <br/>
斜体：<em>I love you</em>  <br/>

<!-- 特殊字符标签 -->
空                                          格： &nbsp; <br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格   <br/>
&gt;
&lt;
&copy;
&lambda;

</body>
</html>

三、 图像、超链接、网页布局

常见的图像格式

  • jpg
  • gif
  • png
  • bmp
<img src="path" alt="text" title="悬停文字" width="300" height="300" >

相对地址：../resources/image/1.jpg

绝对地址: 带盘符的路径

../ 上一级目录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<img src="./resources/image/1.jpg" alt="图像" title="悬停文字" width="400" height="500">
</body>
</html>

四、超链接标签及应用

<a href="https://www.baidu.com" >链接文字</a>
<a href="我的第一个网页.html" >链接文字</a>

文本超链接

图像超链接

target

  • _blank 新页面打开
  • _self 在自有页面打开

页面间链接

锚链接

  • 回到底部
  • 回到顶部

  1. 需要一个标记

  2. 跳转到标记

  3. 需要name 做标记

功能性链接

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
<a name="top"></a>
<a href="#bottom">到底部</a>
<!-- 页面间链接 -->
<a href="我的第一个网页.html" title="第一" target="_self">文字链接</a>
<a href="https://www.baidu.com" target="_blank">文字链接</a>
<br>
<!-- 图片链接 -->
<a href="https://www.baidu.com" target="_blank">
  <img src="./resources/image/1.jpg" alt="图片链接">
</a>
<p>
  <img src="./resources/image/1.jpg" alt="图片链接">
</p>
<p>
  <img src="./resources/image/1.jpg" alt="图片链接">
</p>
<p>
  <img src="./resources/image/1.jpg" alt="图片链接">
</p>
<p>
  <img src="./resources/image/1.jpg" alt="图片链接">
</p>
<p>
  <img src="./resources/image/1.jpg" alt="图片链接">
</p>
<p>
  <img src="./resources/image/1.jpg" alt="图片链接">
</p>
<p>
  <img src="./resources/image/1.jpg" alt="图片链接">
</p>
<p>
  <img src="./resources/image/1.jpg" alt="图片链接">
</p>
<!-- 锚链接 -->
<a href="#top">回顶部</a>
<a name="bottom"></a>

<!-- 功能性链接 -->

<a href="123123@qq.com">给我发邮件</a>

<a target="_blank"
   href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
  <img border="0" src="https://pub.idqqimg.com/wpa/images/counseling_style_53.png" alt="加我咨询更多" title="加我咨询更多"/>
</a>

</body>
</html>

五、行内元素和块元素

块元素：无论内容多少，该元素只占一行

p h1-h6 ...

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

a strong em ...

六、列表

什么是列表

信息资源的一种展示方式

有序列表

ol li

无序列表

ul li

自定义列表

dl dt dd

一般用于公司网站底部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<!-- 有序列表 -->
<ol>
  <li>java</li>
  <li>go</li>
  <li>c/c++</li>
  <li>c#</li>
</ol>

<!-- 无序列表 -->
<ul>
  <li>学习</li>
  <li>生活</li>
  <li>工作</li>
</ul>

<!-- 自定义列表 -->
<dl>
  <dt>功能</dt>
  <dd>增加</dd>
  <dd>删除</dd>
  <dd>修改</dd>
  <dd>查询</dd>

  <dt>
    位置
  </dt>
  <dd>北京</dd>
  <dd>西安</dd>
  <dd>长沙</dd>
</dl>
</body>
</html>

六、表格

为什么使用表格

  • 简单通用
  • 结构稳定

基本结构

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列

table border="1px"

tr 行

td 列 跨列 colspan="4" 跨行 rowspan=“2“

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<table border="1px">
  <tr>
    <td colspan="3">学生成绩</td>
  </tr>
  <tr>
    <td rowspan="2">张三</td>
    <td>100</td>
    <td>90</td>
  </tr>
  <tr>
    <td>88</td>
    <td>99</td>
  </tr>
  <tr>
    <td rowspan="2">李四</td>
    <td>100</td>
    <td>90</td>
  </tr>
  <tr>
    <td>99</td>
    <td>77</td>
  </tr>
</table>
</body>
</html>

七、媒体元素

视频元素

video controls autoplay

音频元素

audio controls autoplay

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体标签</title>
</head>
<body>
<!--视频元素-->
<video src="./resources/video/20220505_200440.mp4" controls autoplay></video>
<!--音频元素-->
<audio src="./resources/audio/rsj.m4a" controls autoplay></audio>
</body>
</html>

八、页面结构分析

header 头部

footer 底部

section 独立区

article 文章

aside 侧边

nav 导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面框架</title>
</head>
<body>
<header>
  <h1>这是头部</h1>
</header>
<section>
  <h1>这是独立区</h1>
</section>
<footer>
  <h1>这是脚部</h1>
</footer>
</body>
</html>

九、iframe内联框架

iframe 引用页面地址 name 框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--方式一,直接加src-->
<!--<iframe src="我的第一个网页.html" frameborder="0"></iframe>-->

<!--方式二，通过 a标签加载到iframe中-->
<iframe src="" name="hello" frameborder="0" width="800" height="600"></iframe>
<a href="https://www.cnblogs.com/" target="hello">点击跳转</a>

</body>
</html>

十、表单语法

form

method 如何发送 get post

action 发送到何处 可以是网站，也可以是请求处理地址

input

type text 文本输入框 name标签名

​ password 密码框

​ submit 提交

​ reset 重置

get 不安全，高效

post 较安全，可以提交大文件

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

<h3>登录</h3>
<!--<form action="./h5test/我的第一个网页.html" method="get">
  <p>账号：<input type="text" name="username"></p>
  <p>密码：<input type="password" name="pwd"></p>
  <p><input type="submit" > &nbsp;<input type="reset" ></p>
</form>-->
<form action="./h5test/我的第一个网页.html" method="post">
  <p>账号：<input type="text" name="username"></p>
  <p>密码：<input type="password" name="pwd"></p>
  <p><input type="submit" > &nbsp;<input type="reset" ></p>
</form>

</body>
</html>

十一、表单元素格式

type: text,password,checkbox,radio,submit,reset,file,hidden,image,button

name: 指定表单元素名称

value: 元素初始值

maxlength: 最长几个字符

size: 文本框长度

checked: 指定按钮是否是被选中

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

<h3>登录</h3>
<!--<form action="./h5test/我的第一个网页.html" method="get">
  <p>账号：<input type="text" name="username"></p>
  <p>密码：<input type="password" name="pwd"></p>
  <p><input type="submit" > &nbsp;<input type="reset" ></p>
</form>-->
<form action="./h5test/我的第一个网页.html" method="post">
  <p>账号：<input type="text" name="username"></p>
  <p>密码：<input type="password" name="pwd"></p>
  <p>性别：<input type="radio" value="1" name="sex">男
          <input type="radio" value="0" name="sex">女
  </p>
  <p><input type="submit" > &nbsp;<input type="reset" ></p>
</form>

</body>
</html>

十二、多选框、下拉框、文本域、文件域、

checkbox

button

image src

列表框，下拉框

select name id

option value

文本域

textarea name cols rows

文件

<p>爱好：
    <input type="checkbox" value="1" name="hobby">睡觉
    <input type="checkbox" value="2" name="hobby">聊天
    <input type="checkbox" value="3" name="hobby">学习
    <input type="checkbox" value="4" name="hobby">游戏
  </p>
  <p><input type="submit" > &nbsp;<input type="reset" ></p>
  <p>按钮：
    <input type="button" value="按钮" name="btn">
    <input type="image" src="h5test/resources/image/1.jpg">
  </p>

  <p>国家：
    <select name="下拉框名称" id="1">
      <option value="none"></option>
      <option value="cn">中国</option>
      <option value="us">美国</option>
      <option value="in">印度</option>
      <option value="ra">俄罗斯</option>
    </select>
  </p>
  <p>
    <textarea name="textarea" id="masthead-label-1" cols="50" rows="10" >
      文本内容
    </textarea>
  </p>

  <p>
    <input type="file" name="file">
    <input type="button" name="upload" value="上传">
  </p>

功能验证

email

url

number max min step

滑块

range min max name step

搜索框

search name

  <p>Email:
    <input type="email" name="email">
  </p>
  <p>URL：
    <input type="url" name="url">
  </p>
  <P>滑块：
    <input type="range" name="range" max="100" min="0" step="1">
  </P>
  <p>商品数量：
    <input type="number" name="num" max="100" min="0" step="1">
  </p>
  <p>搜索：
    <input type="search" name="search">
  </p>

十三、表单的应用

只读 readonly

禁用 disabled

隐藏 hidden

增强鼠标可用性

label for="mark"

id="mark"

十四、表单初级验证

常用方式

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

自定义邮箱

常用正则表达式
posted @ 2022-05-05 23:56  LukeZhang_sz  阅读(47)  评论(0)    收藏  举报