HTML前端基础 - 成就云开发者社区

文章目录

1、初识HTML
- 1.1、网页的基本信息
- 1.2、网页的基本标签
- 1.3、网页的图像标签
- 1.4、网页的超链接及其应用
- 1.5、行内元素和块元素
- 1.6、列表标签
- 1.7、表格标签
- 1.8、媒体元素标签（音频和视频）
- 1.9、页面结构分析
- 1.10、内联框架
2、表单Form
- 2.1、初识表单post和get提交
- 2.2、文本框和单选框
- 2.3、按钮和多选框
- 2.4、列表框文本域和文件域
- 2.5、搜索框滑块和简单验证
- 2.6、表单初级验证

W3C标准：

World Wild Web Consortium(万物网联盟)
成立于1994年，Web技术领域最权威和最具有影响力的国际中立性技术标准机构

W3C标准包括：

结构化标准语言（HTML/XML）
表现标准语言（CSS）
行为标准（DOM/ECMAScript）

1、初识HTML

代码语言：javascript

复制

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

</body>

</html>

代码语言：javascript

复制

<body>、</body> 等成对的标签，叫做开放标签或者是闭合标签单独呈现的标签，比如说 如 <hr/> ：表示为/来关闭空元素

1.1、网页的基本信息

代码语言：javascript

复制

<!--DOCTYPE : 告诉浏览器，我们该使用什么规范-->

<!DOCTYPE html>

<html lang="en">

<!--head标签代表的是网页的头部-->

<head>

<!--    meta：描述信息，用来描述网站的一些信息，一般用来做SEO-->

<meta charset="UTF-8">

<meta name="keywords" content="狂神说Java，西部开源">

<meta name="description" charset="you can learn Java">

<!--    Title：网页的标题-->

<title>Title</title>

</head>

<!--body:代表网页的主体-->

<body>

hello word

</body>

</html>

1.2、网页的基本标签

代码语言：javascript

复制

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

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

<p>两只老虎，两只老虎，</p>

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

<p>一只没有耳朵，</p>

<p>一只没有尾巴，</p>

<p>真奇怪！真奇怪！</p>
<!--水平线标签-->

<hr>
两只老虎，两只老虎，<br/>

跑得快，跑得快，<br/>

一只没有眼睛，<br/>

一只没有尾巴，<br/>

真奇怪！真奇怪！<br/>

两只老虎，两只老虎，<br/>

跑得快，跑得快，<br/>

一只没有耳朵，<br/>

一只没有尾巴，<br/>

真奇怪！真奇怪！<br/>
<!--粗体 斜体 样式-->

<p>粗体： <strong>I LOVE YOU</strong></p>

<p>斜体： <em>I LOVE YOU</em></p>
<br>

<!--特殊符号-->

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

&gt;

&lt;

&copy;版权所有熊凯飞
<!--特殊符号记忆方式

&    ;

-->

</body>

</html>

1.3、网页的图像标签

代码语言：javascript

复制

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>图像标签</title>

</head>

<body>

<img src="2.jpg" alt="头像加载失败" width="1000" height="1000" title="这是xxx">

</body>

</html>

1.4、网页的超链接及其应用

a标签:
href : 必填,表示要跳转到哪个页面
target：表示网页在哪里打开
锚链接
1、需要一个锚标记
2、跳转到标记
需要#号

代码语言：javascript

复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<!--在此处使用name定义一个标记-->
<a name="顶部">顶部</a>
<!--
页面间的链接
-->

<!--a标签

href : 必填,表示要跳转到哪个页面

target：表示网页在哪里打开
-->

<a href="3.图像标签.html" target="_blank">点击我要跳转的页面</a>

<a href="https://www.baidu.com">点击我要跳转到百度</a>
<br>

<!--鼠标放在图片上 跳转到对应的网址-->

<a href="1.我的第一个HTML.html">

<img src="2.jpg" alt="头像加载失败" width="300" height="300" title="这是xxx">

</a>

<p>

<a href="1.我的第一个HTML.html">

<img src="2.jpg" alt="头像加载失败" width="300" height="300" title="这是xxx">

</a>

</p>

<p>

<a href="1.我的第一个HTML.html">

<img src="2.jpg" alt="头像加载失败" width="300" height="300" title="这是xxx">

</a>

</p>

<p>

<a href="1.我的第一个HTML.html">

<img src="2.jpg" alt="头像加载失败" width="300" height="300" title="这是xxx">

</a>

</p>

<p>

<a href="1.我的第一个HTML.html">

<img src="2.jpg" alt="头像加载失败" width="300" height="300" title="这是xxx">

</a>

</p>

<p>

<a href="1.我的第一个HTML.html">

<img src="2.jpg" alt="头像加载失败" width="300" height="300" title="这是xxx">

</a>

</p>

<p>

<a href="1.我的第一个HTML.html">

<img src="2.jpg" alt="头像加载失败" width="300" height="300" title="这是xxx">

</a>

</p>
<!--功能性标记

邮件链接：mailto：

QQ链接：

-->
<!--锚链接

1、需要一个锚标记

2、跳转到标记

需要#号

-->
<a href="#顶部">回到顶部</a>
<a href=""回到顶部></a>

</body>

</html>

1.5、行内元素和块元素

>块元素：无论内容多少，该元素独占一行
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

1.6、列表标签

代码语言：javascript

复制

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>列表标签</title>

</head>

<body>

<!--有序列表-->

<ol>

<li>Python</li>

<li>Java</li>

<li>C/C++</li>

<li>linux</li>

<li>Windows</li>

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

<ul>

<li>Python</li>

<li>Java</li>

<li>Linux</li>

<li>C/C++</li>

<li>windows</li>

</ul>
<!--自定义列表

dl:标签

dt:列表标签

dd:列表内容

-->

<dl>

<dt>学科</dt>

<dd>Python</dd>

<dd>Java</dd>

<dd>C/C++</dd>

<dt>位置</dt>

<dd>长沙</dd>

<dd>常德</dd>

<dd>郴州</dd>
</dl>

</body>

</html>

1.7、表格标签

基本结构：

单元格
行
列
跨行
跨列

代码语言：javascript

复制

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>表格标签</title>

</head>

<body>

<table border="1px">

<!--    colspan：跨列-->

<tr>

<td colspan="3">学习成绩</td>

</tr>

<!--    rowspan：跨行-->

<tr>

<td rowspan="2">狂神</td>

<td>语文</td>

<td>100</td>

</tr>

<tr>

<td>数学</td>

<td>95</td>
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td rowspan=&#34;2&#34;&gt;黄思远&lt;/td&gt;
    &lt;td&gt;语文&lt;/td&gt;
    &lt;td&gt;96&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;数学&lt;/td&gt;
    &lt;td&gt;35&lt;/td&gt;
&lt;/tr&gt;

</table>

</body>

</html>

1.8、媒体元素标签（音频和视频）

代码语言：javascript

复制

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>媒体元素</title>

</head>

<body>

<video src="E:\Data_study\Programming_study\HTML\src\com\company\html\video.mp4" controls autoplay></video>

<audio src=""E:\Data_study\Programming_study\HTML\src\com\company\html\audio.mp3" ></audio>

</body>

</html>

1.9、页面结构分析

代码语言：javascript

复制

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

1.10、内联框架

这里就是表示，当你的target等于Albert_xiong时候的时候，网页就跳转到另一个网站

代码语言：javascript

复制

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>内联框架</title>

</head>

<body>

<iframe src="" name="Albert_xiong" frameborder="0"></iframe>

<a href="https://www.bilibili.com/video/BV1DK4y1o7e6?t=32" target="Albert_xiong">点击跳转</a>

</body>

</html>

2、表单Form

所有的都要习惯性写出name 属性，没有name属性，就没有那个键

2.1、初识表单post和get提交

表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，但是很高效
post:比较安全，传输大文件

代码语言：javascript

复制

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>post和get提交</title>
</head>
<body>
<!--
表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，但是很高效
    post:比较安全，传输大文件
-->
<form action="https://www.baidu.com" method="post">

<!--    输入文本框：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>

2.2、文本框和单选框

输入文本框：input type=“text”
value=“黄思远回家去拿衣服去了” 文本框的默认值
maxlength=“12” 最大的输入字符
size=“30” 文本框的长度

代码语言：javascript

复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>post和get提交</title>
</head>
<body>
<!--
表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，但是很高效
    post:比较安全，传输大文件
-->
<form action="https://www.baidu.com" method="post">

<!--    输入文本框：input type="text"

value="黄思远回家去拿衣服去了" 文本框的默认值

maxlength="12" 最大的输入字符

size="30"  文本框的长度-->

<p>名字：<input type="text" name="username" value="黄思远回家去拿衣服去了" maxlength="12" size="30"></p>

<!--    密码框：input type="password"-->

<p>密码：<input type="password" name="pwd"></p>
<!--    单选框标签

name设置代表在一个组别里面

-->

<p>性别

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

<input type="radio" value="girl" name="sex">女

</p>

<p>

<input type="submit">

<input type="reset">

</p>
</form>

</body>

</html>

2.3、按钮和多选框

代码语言：javascript

复制

<!--多选框

input type="checkbox"
-->

<p>科目：

<input type="checkbox" value="Math" name="hobby">数学

<input type="checkbox" value="Chinese" name="hobby">语文

<input type="checkbox" value="English" name="hobby">英语

<input type="checkbox" value="Biology" name="hobby">生物

</p>
<!--    按钮

input type="button"   普通按钮

input type="image"    图片按钮

input type="submit"   提交按钮

input type="reset"    重置按钮

-->

<p>

<input type="button" name="btn1" value="点击边长...">按钮

<input type="image" src="E:\Data_study\Programming_study\HTML\src\com\company\html\2.jpg">

</p>

2.4、列表框文本域和文件域

代码语言：javascript

复制

<!--    下拉框，列表框-->

<p>

<select name="列表名称">

<option value="China">中国</option>

<option value="US">美国</option>

<option value="UK" selected>英国</option>

<option value="India">印度</option>

<option value="Brazil">巴西</option>

</select>

</p>
&lt;!--文本域--&gt;
&lt;p&gt;反馈：
    &lt;textarea name=&#34;textarea&#34; cols=&#34;30&#34; rows=&#34;10&#34;&gt;文本内容&lt;/textarea&gt;
&lt;/p&gt;

<!--    文件域-->

<p>

<input type="file" name="files">

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

</p>

2.5、搜索框滑块和简单验证

代码语言：javascript

复制

<!--    邮箱验证-->

<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="2">

</p>

<!--    滑块-->

<p>音量：

<input type="range" name="voice" max="100" min="0" step="2">

</p>

<!--    搜索框-->

<p>搜索框：

<input type="search" name="search">

</p>

2.6、表单初级验证

点击正则表达式网站可以看到正则表达式的相关信息！！！
常用方式：

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

代码语言：javascript

复制

<!--    表单初级验证-->

<!--    自定义邮箱-->

<p>自定义邮箱：

<input type="email" name="email" pattern="/^([a-z0-9_.-]+)@([\da-z.-]+).([a-z.]{2,6})$/

/^[a-z\d]+(.[a-z\d]+)@(\da-z?)+(.{1,2}[a-z]+)+$/或\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)">

</p>