HTML

最新推荐文章于 2024-07-25 11:52:08 发布

南风未凉

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量205

点赞数

分类专栏：前端基础文章标签： html web 列表

本文链接：https://blog.csdn.net/Memory_share/article/details/114903357

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML

初识HTML

什么是HTML

在这里插入图片描述

HTML发展史

在这里插入图片描述

HTML5的优势

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

w3w标准

W3C
- World Wide Web Consortium(万维网联盟)
- 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构。
- http://www.w3.org/
- http://www.chinaw3c.org/
W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）

HTML基本结构

在这里插入图片描述

网页基本结构

<!-- DOCTYPE:告诉浏览器，我么们要使用什么规范-->
<!--快捷键：ctrl+/-->
<!DOCTYPE html>
<html lang="en">

<!--head标签用来代表网页头部-->
<head>
    <!--meat描述性标签，它用来描述我们网站的一些信息-->
    <!-- meat一般用来做SEO   -->
    <meta charset="UTF-8">
    <meta name="keywords" content="狂神说Java">
    <meta name="description" content="来到这个地方一起来学习Java">
    <title>Title</title>
</head>
<!--body标签用来代表网页主体-->
<body>
Hello.World!

</body>
</html>

网页基本标签

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

<!--段落标签-->
<p> 丢、丢、丢手绢</p>
<p>轻轻的放在小朋友的后面</p>
<p>大家不要告诉他</p>
<p>快点快点抓住他快点快点抓住他</p>
<p>丢手绢丢手绢</p>
<p>轻轻的放在小朋友的后面</p>
<p>大家不要告诉他大家不要告诉他</p>
<p>快点快点捉住他，快点快点捉住他。</p>

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

<!--换行标签-->
丢、丢、丢手绢<br/>
轻轻的放在小朋友的后面<br/>
大家不要告诉他<br/>
快点快点抓住他快点快点抓住他<br/>
丢手绢丢手绢<br/>
轻轻的放在小朋友的后面<br/>
大家不要告诉他大家不要告诉他<br/>
快点快点捉住他，快点快点捉住他。<br/>

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

粗体：<strong>I love You！</strong><br/>
斜体：<em>I love You！</em>

<br/>
<!--特殊符号-->
空   格：
空&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
&gt;>
<br/>
&lt;<
<br>
&copy;版权所有：浅陌

</body>
</html>

在这里插入图片描述

标题标签:
段落标签：
换行标签：
水平线标签：
字体样式标签
- 粗体：
- 斜体：
注释和特殊符号：
空格：&nbsp
大于号：&gt
小于号: &lt
作者：&copy

图像标签

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图形标签</title> </head> <body>  <img src="../resources/images/1.jpg" alt="动漫头像"title="图片"height="640"width="640">; </body> </html>

链接标签

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签</title> </head> <body>  <a name="top">顶部</a>  <a href="https://www.baidu.com">点击跳转到百度</a> <a href="3.图像标签.html" target="_blank">点击跳转页面三</a> <a href="3.图像标签.html" t target="_self">点击跳转</a>  <p> <a href="1.我的第一个网页.html"> <img src="../resources/images/2.jpg" alt="动漫头像"title="图片"height="140" width="280">; </a> </p> <p> <a href="1.我的第一个网页.html"> <img src="../resources/images/2.jpg" alt="动漫头像"title="图片"height="140" width="280">; </a> </p> <p> <a href="1.我的第一个网页.html"> <img src="../resources/images/2.jpg" alt="动漫头像"title="图片"height="140" width="280">; </a> </p> <p> <a href="1.我的第一个网页.html"> <img src="../resources/images/2.jpg" alt="动漫头像"title="图片"height="140" width="280">; </a> </p>  <a href="#top">回到顶部</a> <a name="down">down</a>  <a href="mailto:378214218@qq.com">点击联系我</a> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2:378214218:53" alt="你好，加我免费领取小电影" title="你好，加我免费领取小电影"/></a> </body> </html>

文本图像超链接

<a href=’" path" target=“目标窗口位置”>链接文本或图像
href:必填，表示要跳转到那个界面
target：表示窗口在哪里打开
_blank 在新标签打开
_self 在自己的网页中打开

锚链接：

锚链接
1.需要一个锚标记
2.跳转到标记

<使用name作为标记>

功能性链接：

功能性链接
邮件链接： mailto
QQ链接

点击联系我

行内元素和块元素

块元素
无论内存多少，该元素独占一行
（p、h1-h6）

行内元素
内容撑开宽度，左右都是行内元素的可以排在一行。
（a、strong、em…）

列表标签

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

列表的分类
无序列表
有序列表
定义列表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表学习</title> </head> <body>  <ol> <li>Java</li> <li>Python</li> <li>C#</li> <li>C/c++</li> </ol> <hr/>  <ul> <li>Java</li> <li>Python</li> <li>C#</li> <li>C/c++</li> </ul>  <dl> <dt>学科</dt> <dd>Java</dd> <dd>Python</dd> <dd>Linux</dd> <dd>Go语言</dd> <dt>位置</dt> <dd>西安</dd> <dd>北京</dd> <dd>上海</dd> </dl> </body> </html>

表格标签

为什么使用表格：简单通用、结构稳定
基本结构：
单元格
行
列
跨行
跨列

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格学习</title> </head> <body>  <table border="1dx"> <tr>  <td colspan="4">1-1</td> </tr> <tr>  <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> <hr/> <tr> <td colspan="3">学生成绩</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>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> </table> </body> </html>

媒体元素：视频和音频

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>视频音频学习</title> </head> <body>   <audio src="../resources/audio/1.mp3"controls autoplay>落差</audio> </body> </html>

页面结构分析

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

iframe内联框架

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架</title> </head> <body>  <iframe src=""name="hello" frameborder="0" width="1000"height="800"></iframe> <a href="3.图像标签.html"target="hello">点击跳转</a>  </body> </html>

表单语法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <h1>注册</h1>  <form action="1.我的第一个网页.html" method="get"> <p>用户名：<input type="text"name="username"></p> <p>密码：<input type="password"name="password"></p> <p> <input type="submit"> <input type="reset"> </p> </form> </body> </html>

post方法查看源码

表单元素格式

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

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

表单的初级验证

为什么要进行验证：1.减轻压力 2.提高安全性

方式

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <h1>注册</h1>  <form action="1.我的第一个网页.html" method="get">  <p>用户：<input type="text"name="username"value="无敌"placeholder="请输入用户名称" readonly ></p> <p>密码：<input type="password"name="password" placeholder="请输入密码" readonly></p>  <p>性别： <input type="radio"value="boy"name="sex">男 <input type="radio"value="girl" name="sex">女 </p>  <p>爱好： <input type="checkbox"value="sleep"name="hobby">睡觉 <input type="checkbox"value="code"name="hobby">敲代码 <input type="checkbox"value="game"name="hobby">玩游戏 </p> <p> <input type="button"value="点击变大"name="but1">  </p>   <p>国家 <select name="下拉框" > <option value="china"selected>中国</option> <option value="USA">美国</option> <option value="UK">英国</option> <option value="jp">日本</option> </select> </p>  <p>反馈 <textarea name="textarea" cols="30" rows="10"></textarea> </p>  <p> <input type="file"name="files"> <input type="button"value="上传" name="upload"> </p>  <p>邮箱： <input type="email" name="邮箱" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"> </p>  <p>url： <input type="url" name="url"> </p>  <p>商品数量： <input type="number" name="num" max="100" min="0" step="1"> </p>  <p>音量控制 <input type="range" name="音量" max="100" min="0" step="5"> </p>  <p>搜索 <input type="search" name="search"> </p> <p>  <label for="mark" id="mark"></label> </p> <p> <input type="submit"> <input type="reset"value="点击重置表单"> </p> </form> </body> </html>

HTML总结

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

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

南风未凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML

HTML初识HTML什么是HTMLHTML发展史HTML5的优势世界知名浏览器厂商对HTML5的支持微软Google苹果OperaMozilla市场的需求跨平台w3w标准W3CWorld Wide Web Consortium(万维网联盟)成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构。http://www.w3.org/http://www.chinaw3c.org/W3C标准包括结构化标准语言（HTM
复制链接

扫一扫

专栏目录