第三十二讲——HTML

第三十二讲——HTML

Hyper Text Markup Language 超文本标记语言

HTML

<!-- DOCTYPE 文档类型: 告诉浏览器，我们要用什么规范  -->
<!-- 这是注释  Ctrl + / 快捷键-->
<!DOCTYPE html>

<html lang="en">
    
<!-- head 标签代表网页头部 是唯一的-->
<head>  <!-- 像这种成对出现的标签叫 开发标签和闭合标签-->
<!--  meta 描述性标签 ，它用来描述我们网站的一些信息  -->
<!--    meta一般用来做 SEO-->
    <meta charset="UTF-8"> <!-- 像这种只有一个标签的叫 自闭合标签-->
    <!-- 关键字 -->
    <meta name = "keywords"	 content="Study HTML">
    <!-- 说明和描述-->
    <meta name = "description" content="来这个地方可以学习 Java">

<!-- title 网页标签 网页名字-->
    <title>baidu</title> <!-- 标签 -->
    
</head>
    
<!-- body 标签代表网主体部分-->
<body>

Hello World
</body>
</html>
<!-- 单独呈现的标签(空元素) 如 <hr/> ; 意为用/来关闭空元素 -->

graph LR; 1(网页)-->2(DOCTYPE &#40 文档类型声明 &#41 ) 1-->3(html &#40 lang &#41) 3-->4(head) 4-->10(meta) 10-->5(a charset) 10-->6( keywords) 10-->7( description) 4-->8(title) 3-->9(body)

1——网络的基本标签

DeScription

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

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

<!-- 按一个 p + TABkey 自动生成  # p*n 表示生成n个p标签 利用鼠标中键的块选择可以完成批量的 p标签-->
<h3>2.——p 段落标签</h3>  <!-- Ctrl+Shift+/ 多行注释-->
<!-- 不会分行，全显示在一行-->


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

<h3>3.—— br/ 换行标签(自闭合标签)</h3>

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

<h3>4.—— hr/ 水平线标签(自闭合标签)</h3>
<hr/>

<h3>5.——字体样式标签 (粗体，斜体)</h3>

粗体 :  <strong>I  LOVE  YOU</strong>
斜体 :  <em>I  LOVE  YOU</em>

<hr>
<h3>6.——特殊符号</h3>
空     格
<br>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格 <br>
&gt;<br> <!--大于号" > " -->
&lt; <br><!--小于号" < " -->
&copy;版权所有XXZ <br>
<!--
&  ;
查百度 HTML转义字符
-->

</body>
</html>

Result

2——图像标签（img）

常见的图像格式

JPG

GIF

PNG

BMP

、、、

<img src = "path" alt = "text" tilte = "text" width = "x" height = "y" />

Description

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

<!-- img 学习
src : 图片地址
 相对路径 , 绝对路径(推荐使用)

 ../  当前 html 所在文件夹的上一级目录

-->

<h1>图片标签</h1>
<hr/>
<br/>

<img  title = "悬停内容: 一剑下去可是会死的"  src="../Resources/01.jpg" alt= "img 标签学习 找不到!!!直接裂开" width="500" height ="500" >

</body>
</html>

Result

3——链接标签(a)

超链接

graph LR; 1(超链接)-->2(页面间链接 &nbsp target参数) 1-->3(锚链接) 3--> 5(页面内回顶部操作) 3--> 6(配合页面间链接 &#44 进入其他页面具体位置) 1-->4(功能性链接 &nbsp &nbsp 了解)

页面间链接

从一个页面链接到另一个页面

文本链接

图片链接（以图片作为点击对象）

Description

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--锚链接 设置一个锚 name = top-->
<!-- 在body 下方设置 name-->
<!-- 使用 name 作为标记-->
<a name="top">顶部</a>

<!-- a 标签
href : 必填, 表示要跳转到那个页面
target : 表示窗口在哪里打开
     #  _blank 在新页面打开
     #  _self  在自己的页面中打开

-->
<h1>a 标签</h1>
<hr/>

<h2>1. —— 网络超链接</h2>
<hr/>

<a href= "3.%20图像标签.html" target="_self"> 点击跳转 &nbsp; &nbsp; &nbsp;本地HTML 图像标签</a>

<br/><br/>  <hr/>  <br/>


<a href= "http://www.baidu.com " > 点击跳转 &nbsp; &nbsp; &nbsp; 百度页面</a>

<h2>1.0 ——图片超链接( 把图片作为点击对象 )</h2>
<hr/>

<a href  = "http://www.baidu.com" >
<img title = " 酷酷的 " src=" ../Resources/01.jpg" alt = "看不见啦，出问题了！" width ="100" height = "100" >
</a>

<!--  锚链接 可以跳转到一个页面中具体位置

1. 需要一个锚
2. 跳转到标记 ( 链接地址 + # + 锚名称 ) 跳转
 (锚链接可以实现 1. 本链接回顶部操作  2. 跳转其他页面的准确锚位置)
-->
<h2>2.——锚链接</h2>
<a href="#top"> 回到顶部 </a>

<h2>2.0——锚链接配合页面间链接跳转</h2>
<!--假设在目标页面设置了 Down 的锚 那么就会跳转相应位置-->
<a href="3.%20图像标签.html#Down" >点击跳转(锚链接)</a>

<h2>3.——功能性链接</h2>
<!--功能性链接 : mailto
邮件链接 : mailto
qq推广 QQ链接 反正都不太行 初步了解一下 有这个功能就像
-->

<!-- 初步理解 可以发送邮件 但是没有安装插件什么的 反正现在不行 -->
<a href="mailto :1608343875@qq.com" > 点击联系我 </a>


<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2991755428&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1608542875:53" alt="你好" title="你好"/></a>

</body>
</html>

Result

行内元素和块元素
- 块元素（初步理解：显示出来的时候，自成一行的，不需要，打换行）
  - 无论内容多少，该元素独占一行
  - （p、 h、、、）
- 行内元素（初步理解：写出来是在一个行里的元素）
  - 内存撑开宽度，左右都是行内元素的可以排在一行
  - （a、strong、em、、、）

4——列表标签(list Label)

Desrciption

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

<!-- 有序列表-->
<ol>
    <dt>程序语言名称</dt>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>

</ol>

<hr/>
<!-- 无序列表-->

<ul>
    <dt>程序语言名称</dt>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>

</ul>

<hr>


<!--自定义列表
dl : 标签
dt : 列表名称
dd : 列表内容
-->
<dl>
    <dt>学科</dt>

    <dd>Java<</dd>
    <dd>Python</dd>
    <dd>运维</dd>
    <dd>前端</dd>
    <dd>C/C++ </dd>


    <dt>位置</dt>
    <dd>中国</dd>
    <dd>浙江</dd>
    <dd>丽水</dd>

</dl>




</body>
</html>

Result

程序语言名称

Java
Python
运维
前端
C/C++

程序语言名称

Java
Python
运维
前端
C/C++

学科: Java<; Python; 运维; 前端; C/C++
位置: 中国; 浙江; 丽水

5——表格便签(TableLabel)

Description

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

-->

<table border="2px">
    <tr>
        <!-- colspan 跨列    -->
        <td colspan="4">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
        <td>1-5</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>
        <td>3-4</td>

    </tr>

</table>

</body>
</html>

Result

1-1				1-2	1-3	1-4	1-5
2-1	2-2	2-3	2-4
2-1	3-1	3-2	3-3	3-4

作业

成绩单

学生成绩
张三	语文	120
张三	数学	120
李斯	语文	120
李斯	数学	120

6.——媒体元素(videoLabel)

Description

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

<!--音频和视频

src : 资源路径
controls : 控制条 不加好像不能播放奥 不要写成 constrol 要死人的!!!!
autoplay : 自动播放(打开后)
-->

<!--
autoplay : 自动播放, 但是,不是全部软件都支持自动播放, 后来发现经过跳转的网站是可以有声自动播放的
方案一 添加 muted 元素 默认静音 没有方案二,哪里有百分百能解决得问题呢

-->

<video  muted src="../Resources/Video/WeChat.mp4"  autoplay controls  title="拜托,腻很弱唉"  width = "200" height = "200" >播放失败就会看见我</video>

<!-- 代码看清楚!!!!   错一个都不行啊!!!-->
<audio controls   src="../Resources/Audio/1.mp3" autoplay > </audio>


</body>
</html>

Result

7.——页面结构分析

elementsName	Description
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web 页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

Description

<!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>

Result

8.——内嵌框架(iframeLabel)

Description

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内嵌框架</title>

</head>
<body>

<!--iframe
src : 地址
w-h : 宽度和高度
frameborder : 是否需要边框 值 0 or 1 (作用不明显)
-->

<iframe src= "" name = "Hello" frameborder= "1" width="300px " height="400px"></iframe>

<br>

<!-- iframe 内嵌框架 配合跳转
跳转的链接是媒体,目标是 hello , hello 是一个空的框架,相当于是一个容器,自然是可以投过去的,包括 hello 原有网页的话会被覆盖,因为网页跳转默认 self
-->

<a href="7.媒体元素.html"  target="Hello">点击跳转 媒体元素</a>

</body>
</html>

Result

9.——表单（form）

表单（form）

Description

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

<h1>注册</h1>
<!--表单 from  只要是 input 标签都需要 name 值
action : 表单提交的位置,可以是网站,也可以是一个请求处理地址
method : post get 提交方式
        # get 方式提交 我们可以在url 中看见提交的信息(密码) 不安全 高效
        # post : 比较安全(需要加密才能变的安全) 能传输大文件
value = "xxz" :　设置一个初始值
size = "5" :  输入框的长度
maxlength = "8" :　最大输入字符


-->

<form action="../HTML/7.媒体元素.html" method="get">
    
      <!--    文本输入框 : input type="text"-->
    <p>名字: <input type="text" name="userName" value="XXZ" maxlength="12"> </p>

      <!--  密码框 : input type="password"  -->
    <p>密码: <input type="password" name="pwd"></p>

       <!--radio 单选标签
       input type : "radio"
       value : 单选框的值
       name : 表示组名 同一个组名才起单选作用 不写组名会一起提交
       checked : 初始选择
        -->
    <p>性别 :
      <!--  radio 需要放如一个组里才会起到单选的作用-->
        <input type="radio" value="boy"  name="sex"/>男
        <input type="radio" value="girl" name="sex" checked/>女
    </p>

    <!-- 多选框
    input type = "checkbox"
    checked : 初始选择
    -->
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="program" name="hobby" checked>编程
        <input type="checkbox" value="Talk" name="hobby">聊天
        <input type="checkbox" value="playGame" name="hobby">打游戏
    </p>

    <!--  按钮
    input type="button" : 普通按钮
    input type="image"  : 图片按钮(点击会提交)


    -->

    <p>按钮 :
        <input type="button" value="点击变长" name="btn1">
    <!-- 至于点击图片为什么会跳转就不知道了 -->
        <input type="image" src="../Resources/Picture/01.jpg" width="20" height="20" title="图片按钮">
    </p>



    <!--  下拉框 列表框
    selected : 默认选择
     -->
    <p>国家下拉框:

        <select name="列表名称" id="10">
            <option value="china" selected>中国</option>
            <option value="usa">美国</option>
            <option value="eth" >瑞士</option>
            <option value="yingdu">印度</option>
        </select>
    </p>


    <!-- 文本域
    -->
    <p>反馈:
        <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
    </p>

    <!-- 文件域
    input type="file" name="files" input 一定要有name name 相当于某个功能的操作 不给name 就无法操作
    -->

    <p>
        <input type="file" name="files">
        <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="number" max="10" min="0" step="1">
    </p>

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

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

    </p>

    
    <!--    p 段落标签 是块元素 无论元素多少 独占一行 把这些在一行的 用块标签放在一起-->
    <p>
    <!--   value 可以给按钮改名字  -->
        <input type="submit">
        <input type="reset" value="点击清空">
    </p>


</form>


</body>
</html>

Result

表单元素格式

表单应用

Description

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

<h1>注册</h1>

<from action="../HTML/7.媒体元素.html" method="get">

    <!-- 表单操作
       hidden   : 隐藏
       readonly : 只读
       disabled : 禁用 关闭选择
       label : 增强鼠标可用性
     -->
    <p>
        账号: <input type="text" name="users" value="admin" readonly ><br>
        密码: <input type="password" name="pwd" value="123456" hidden>
    </p>

    <p>
        <input type="radio" value="boy" name="sex" disabled>男
        <input type="radio" value="boy" name="sex">女
    </p>
    
    <p>
    <!-- 增强鼠标可用性  -->
        <label for="mark"> 你点我试试 </label>
        <input type="text" id="mark">
        
    </p>
    
    <p>

        <input type="submit" value="提交表单">
        <input type="reset" value="点击清空">
    </p>

</from>

</body>
</html>

Result

表单验证

Description

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

<h1>注册</h1>

<form action="../HTML/7.媒体元素.html" method="get">

    <!-- 表单验证
       placeholder="请输入用户名" : 提示信息 (一定要有输入框中)
       required : 非空判断 | 必须填写得 | 必需得
       pattern : 正则表达式 通过输入参数 来规整输入内容 可以百度相应的表达式!
     -->
    <p>
        账号: <input type="text" name="users" placeholder="请输入用户名" required ><br>
        密码: <input type="password" name="pwd" value="123456" hidden>
    </p>

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

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

    </p>

    <p>自定义邮箱;
        <input type="email" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">

    </p>
    
    <p>
        <!--   value 可以给按钮改名字  -->
        <input type="submit">
        <input type="reset" value="点击清空">
    </p>
    
</form>

</body>
</html>

Result

新增单词

0	keywords	关键字
1	description	描述 \|　说明		javaScript
2	directory	目录		getDirectory 获取相对路径
3	strong	粗体 \| 强壮的		em 斜体
4	height	身高
5	resources	资源		source 来源
6	anyway	无论如何	按腻威~	delete Anyway （选项）
7	href	超链接	H瑞夫
8	self	自己
9	blank	空白处 \| 新建一页	布兰克	bank 银行 self blank
10	mailto	邮箱 \| 邮向指示协议指示器	mai l to
11	border	边界	博得儿
12	colspan	跨列	扣丝潘
13	rowspan	跨行	肉丝潘
14	audio	音频	啊迪奥
15	autoplay	自动播放
16	muted	静音	缪特得
17	footer	页脚	夫特
18	section	部分	塞寻
19	article	独立文章	啊提扣
20	nav	导航栏		nav bar
21	HyperTextMarkupLanguage	超文本标记语言	嗨per text 麦可up 兰歌age	markup 标记 \| flag 标志位
22	aside	侧边栏	额赛的
23	submit	提交	赛步米特
24	disabled	关闭选项	dis able
25	option	选项
26	range	滑块
27	readonly	只读	read 恩列
28	hidden	隐藏域	黑等
29	placeholder	占位符
20	required	非空判断 \| 必须得	瑞块而得
31	pattern	正则表达式	泰瑟
32	notFound	未找到
33	checked	默认选中
34	aside	相关内容 \| 侧边栏	阿赛的
35	nav	导航栏
36	hobby	爱好
37	image	图标(按钮 button)		input

posted @ 2021-12-20 17:13 项晓忠阅读(32) 评论(0) 编辑收藏举报

Deep

朝闻道，夕死可矣

第三十二讲——HTML

第三十二讲——HTML

1——网络的基本标签

2——图像标签（img）

3——链接标签(a)

超链接

4——列表标签(list Label)

5——表格便签(TableLabel)

6.——媒体元素(videoLabel)

7.——页面结构分析

8.——内嵌框架(iframeLabel)

9.——表单（form）

表单（form）

表单应用

表单验证

新增单词

公告

Deep

朝闻道，夕死可矣

第三十二讲——HTML

第三十二讲——HTML

1——网络的基本标签

2——图像标签（img）

3——链接标签(a)

超链接

4——列表标签(list Label)

5——表格便签(TableLabel)

6.——媒体元素(videoLabel)

7.——页面结构分析

8.——内嵌框架(iframeLabel)

9.——表单（form）

表单 （form）

表单应用

表单验证

新增单词

公告

表单（form）