一、网页的组成

二、HTML概述

1、作用

2、名字

3、HelloWorld

4、使用IDEA创建HTML页面

①创建静态资源module

②创建 HTML 文件

5、语法规则

三、各个具体标签

1、应用场景：展示一篇文章

①标题标签

②段落

③换行

④列表

⑤HTML 实体

⑥块

⑦路径

⑧图片

⑨超链接

2、应用场景：展示数据表格

①表格本身

②设置边框

③合并单元格

3、应用场景：提供表单供用户填写数据

①form标签定义整个表单

②name属性

③按钮

④请求参

⑤GET请求和POST请求区别

⑥密码框

⑦表单隐藏域

⑧单选按钮

⑨多选按钮

⑩多行文本框

⑪下拉列表

12.文件上传的表单

一、网页的组成

结构：使用HTML标签定义网页主体结构。
表现：设定HTML网页结构的展示形式，包括：颜色、边框、布局等等。
行为：让原本静态的页面能够动态和用户互动。

二、HTML概述

1、作用

HTML这门技术存在的意义就是定义网页的主体结构。

2、名字

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

Hyper Text：超文本。HTML本身是文本文件，但是网页上却可以显示图片、视频等等多媒体数据。
Markup：标记，或者说标签。意思是HTML内部主要是由标签组成的。
Markup Language：标记语言，和编程语言不同，标记语言只有标签、属性、文本。没有流程控制、数据类型、异常处理等等功能。

3、HelloWorld

第一步：新建文本文件，把扩展名改成html
第二步：编写代码
第三步：用浏览器打开，看看效果

<html>
<!-- 这是注释，不会在浏览器上显示出来 -->
<!-- head标签定义网页的头部 -->
<head>
<!-- title标签定义网页的标题 -->
<title>这是网页的标题：HelloWorld</title><!-- meta标签用来设置网页元数据 -->
<!-- charset="UTF-8"告诉浏览器解析当前网页使用的字符集 -->
<meta charset="UTF-8">
</head><!-- body标签定义网页的主体 -->
<body><!-- body标签内的标签负责浏览器窗口显示 -->
<p>HelloWorld HTML！</p></body>
</html>

4、使用IDEA创建HTML页面

①创建静态资源module

创建module时，在Language这里选择Javascript即可。

②创建 HTML 文件

在module根目录下创建HTML文件，不需要写扩展名。IDEA创建的HTML文件自动包含如下结构：

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

5、语法规则

只需编写正确的HTML代码，不要违背规则

根标签有且只有一个，就是html标签。
标签必须正确关闭双标签：
- 有开始标签也有结束标签
- 单标签：自己结束。以前旧的标准，要求自己关闭，现在最新标准不关闭也可以。
标签可以嵌套，但不能交叉嵌套。
注释不能嵌套
属性必须有值，属性值必须加引号，单、双引号都可以
- 如果属性名和属性值一致，属性值可以省略
标签和属性值都不区分大小写，但建议用小写

三、各个具体标签

1、应用场景：展示一篇文章

①标题标签

HTML一共提供了六个级别的标题，不同级别的标题体现了不同的逻辑层级。

    <h1>物质条件</h1><h2>有房吗？</h2><h3>多少平方？</h3><h2>有车吗？</h2><h3>什么品牌？</h3><h2>有存款吗？</h2><h3>有几位数？</h3><h1>兴趣爱好</h1><h2>喜欢狗吗？</h2><h2>喜欢猫吗？</h2><h2>喜欢看书吗？</h2><h3>什么书？</h3><h4>列举一段</h4>

②段落

段落用来显示一篇文章的正文。在浏览器显示时，每一个段落独占一行。

<p>叶剑英是功勋卓著的开国元帅，长期担任党、国家和军队重要领导职务，同时他还是一位素有“儒帅”美誉，深得毛泽东、周恩来等老一辈无产阶级革命家高度评价的诗人。</p>
<p>他的许多诗句饱含深刻哲理，令人展卷仰止，字里行间充满的浩然之气与他多次在重大和紧要历史关头的力挽狂澜、表现出的伟大革命气魄相得益彰，相互辉映。</p>

③换行

专门负责换行。

<p>当我深情凝望你的眼眸，<br/>昨夜的红酒焚尽了情殇。</p>

④列表

<!--无序列表-->
<ul><li>对抗路</li><ul><li>战士</li><li>坦克</li></ul><li>发育路</li><ul><li>射手</li><li>辅助</li></ul><li>中路</li><ul><li>法师</li><li>辅助</li></ul><li>野区</li>
</ul>

 <!--有序列表--><ul>    <ol><li>打野</li><li>辅助</li></ol></ul>

⑤HTML 实体

作用是在HTML页面上显示特殊符号，常用包括空格和大于号、小于号。

<!--&nbsp多个空格-->
<p>回眸一笑&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp百媚生</p>
<!--&lt:生成小于号   &gt:生成大于号-->
<P>100 &lt 200</P>
<P>1314 &gt 520</P>

官方的常用实体列表：

https://www.w3school.com.cn/html/html_entities.asp

⑥块

专门为了实现页面布局而设计出的标签，配合CSS使用。

<div>回眸一笑百媚生，定睛一看是如花(独占一行)</div><span>span块不会导致换行</span><span>span块不会导致换行</span><span>span块不会导致换行</span><span>span块不会导致换行</span>

⑦路径

物理路径：D:\file\html\index.html
相对路径：./hello/file/index.html
- 当前目录：./
- 上一级目录：../

由于我们的项目虽然在本地开发，但是，是在服务器上运行，所以必须具备『可迁移性』。所以我们开发中，不能使用物理路径。

⑧图片

用于在网页上显示图片。

  <img src="../images/no1.jpg" height=216px width=384px><img src="../images/no2.jpg" height=216px width=384px><img src="../images/no3.jpg" height=216px width=384px><img src="../images/no4.jpg" height=216px width=384px><img src="../images/no5.jpg" height=216px width=384px>

⑨超链接

作用从当前页面跳转到另一个页面

<a href="page01.html">跳转到目标页面</a>
<br>
<a href="page03.html" target="_blank">跳转到目标页面[新窗口中打开]</a>

2、应用场景：展示数据表格

①表格本身

  <table><tr>
<!--表头单元格--><th>名称</th><th>属性</th><th>分路</th></tr><tr>
<!--普通单元格--><td>花木兰</td><td>战士</td><td>战坦路</td></tr><tr><td>妲己</td><td>法师</td><td>中路</td></tr><tr><td>后羿</td><td>射手</td><td>发育路</td></tr></table>

②设置边框

  <style>table{border: 1.5px solid deeppink;border-collapse: collapse;}th,td{border: 1.5px solid deeppink;}</style>

③合并单元格

    <tr><td>漩涡鸣人</td><!-- rowspan 属性：设置当前单元格横跨几行 --><td rowspan="2">风</td><!-- colspan 属性：设置当前单元格横跨几列 --><td colspan="2">下忍</td><!-- 被合并单元格覆盖的单元格通常要删掉<td>木叶</td> -->
<!-- 被合并单元格覆盖的单元格通常要删掉<td>砂</td> --></tr>

3、应用场景：提供表单供用户填写数据

①form标签定义整个表单

<!-- form 标签：本身不显示，仅仅只是从逻辑上定义一个表单 -->
<!-- action 属性：指定表单提交的目标地址（将来这里肯定是对接 Java 程序） -->
<!-- method 属性：指定提交当前表单后，使用什么请求方式。可选值包括：get、post -->
<!-- 请求方式建议使用 post --><form action="page01.html" method="get"></form><form action="page01.html" method="post"></form>

②name属性

一个表单可以向服务器提交很多数据，服务器接收后需要分清哪个数据对应哪个具体属性。

"tom",25,"java",5000

所以每一个数据，都需要专门起一个名字，这个名字就通过表单项的 name 属性来指定

③按钮

  <button type="button">普通按钮,需要配合js使用，否则点击无效</button><button type="submit">提交按钮，点击之后提交表单</button><button type="reset">重置按钮，点击之后表单项恢复默认值</button>

④请求参

如果请求参数放在URL地址后面，那么遵照下面格式：

请求参数列表和请求地址之间用问号分开
请求参数名和请求参数值之间用等号分开
各个请求参数之间用&符号连起来

⑤GET请求和POST请求区别

GET请求：请求参数附着在URL地址后面
- 如果请求参数中包含密码，那么密码就会明文显示出来，不安全
- 请求地址这里能够携带的数据有限，如果请求参数多，可能丢失
POST请求：请求参数放在请求体中
- 请求参数放在请求体中，不容易被看到，安全行更好
- POST请求使用请求体发送数据没有数据量的限制，所以将来上传文件就必须使用POST请求方式

⑥密码框

密码：<input type="password" name="userPwd"/><br>

⑦表单隐藏域

不会在浏览器窗口有任何显示，但是能够携带数据发送到服务器端。通常用来维护私密的、后端需要拿到的数据。

<input type="hidden" name="userId" value="5533" />

⑧单选按钮

请选择你喜欢的季节：<br/>春天：<input type="radio" name="season" value="spring" /><br/>夏天：<input type="radio" name="season" value="summer" checked /><br/>秋天：<input type="radio" name="season" value="autumn" /><br/>冬天：<input type="radio" name="season" value="winter" /><br/>

⑨多选按钮

选择喜欢的菜<br>京酱肉丝<input type="checkbox" name="dishes" value="jingjiangrousi"/><br>宫保鸡丁<input type="checkbox" name="dishes" value="jiding"/><br>鱼香肉丝<input type="checkbox" name="dishes" value="yuxiangrousi"/><br>开水白菜<input type="checkbox" name="dishes" value="baicai"/><br>葱烧海参<input type="checkbox" name="dishes" value="haishen"/><br>油闷大虾<input type="checkbox" name="dishes" value="daxia"/><br>溜肉段<input type="checkbox" name="dishes" value="rouduan"/><br>锅包肉<input type="checkbox" name="dishes" value="guobaorou"/><br>地锅鸡<input type="checkbox" name="dishes" value="ji"/><br>

checkbox：名词，是指一个多选框

checked：形容词，是指被选中的状态

⑩多行文本框

<textarea name="desc" cols="30" rows="20">duifadbzilucha;jdbnzpuhfa;jdn;kljchbailjdbflkjd p diaopdijfha;old iodh o; h
</textarea>

⑪下拉列表

  <select name="food"><option value="null" ></option><option value="liurouduan">溜肉段</option><option value="guobaorou" selected>锅包肉 </option><option value="disanxian">地三鲜</option></select>

12.文件上传的表单

  <!--上传文件的表单--><form action="target.html" method="post" enctype="multipart/form-data">请选择你的头像<input type="file" name="picture"/><br><button type="submit">上传头像</button></form>

网页的组成、HTML概述、标签相关推荐

Highmaps网页图表教程之数据标签与标签文本
Highmaps网页图表教程之数据标签与标签文本 Highmaps数据标签数据标签用于在地图图表上展现节点对应的数据.数据标签展现数据是静态的,只要节点一加载,数据标签就会出现在节点附近.在High ...
java获取页面标签_java获取网页源代码后，提取标签内容……
java获取网页源代码后,提取标签内容-- 关注:245 答案:2 mip版解决时间 2021-02-01 09:11 提问者咏bù琂败 2021-01-31 13:49 import java ...
html基本页面的构成,HTML网页的基本组成概述
HTML网页的基本组成概述互联网发布时间:2008-10-17 18:56:54 作者:佚名我要评论网页中的信息主要是以文本为主的.在网页中可以通过字体.大小.颜色.底纹.边框等来 ...
php网站的构成,HTML_HTML网页的基本组成概述，网页中的信息主要是以文本为 - phpStudy...
HTML网页的基本组成概述网页中的信息主要是以文本为主的.在网页中可以通过字体.大小.颜色.底纹.边框等来设置文本的属性.这里指的文字是文本文字,而并非图片中的文字.在网页制作中,文字都可以方便地设 ...
【融职培训】Web前端学习第2章网页重构11 HTML5新增标签
一.html5概述 html5是超文本标记语言(html)的第五次重大修改,可以简单的理解为是html的第五个大版本.我们平时所说的html5其实是包含了html5,css3的新特性,以及新增的Jav ...
对网页是否为当前展示标签页、是否最小化、以及是否后台运行进行监听
html5新加了window.visibilitychange事件以及window.visibilityState属性,当浏览器标签页被隐藏或显示时会触发window.vixibilitychange ...
[python] 常用正则表达式爬取网页信息及分析HTML标签总结
这篇文章主要是介绍Python爬取网页信息时,经常使用的正则表达式及方法.它是一篇总结性文章,实用性比较大,主要解决自己遇到的爬虫问题,也希望对你有所帮助~ 当然如果会Selenium基于自动化测试爬 ...
a标签href不跳转_[网页编程]-06 HTML5 超链接标签
超链接的作用实际上就是为实现页面跳转功能以及锚点功能(跳转到当前页面的顶部和尾部或设定的位置) 测试代码 <!DOCTYPE html> <html><head>& ...
HTML表格设计用到哪些标签,网页设计：HTML表格标签
表格组成: table 表格容器(外框) :定义表格的标题::定义一个表格头: :定义一个表格行: :定义一个单元格: 标签属性: 1)table(表)常用属性: border:边框粗细 height ...
常用正则表达式爬取网页信息及分析HTML标签总结
这篇文章主要是介绍Python爬取网页信息时,经常使用的正则表达式及方法.它是一篇总结性文章,实用性比较大,主要解决自己遇到的爬虫问题,也希望对你有所帮助~ 当然如果会Selenium基于自动化测试爬 ...

网页的组成、HTML概述、标签

一、网页的组成

二、HTML概述

1、作用

2、名字

3、HelloWorld

4、使用IDEA创建HTML页面

①创建静态资源module

②创建 HTML 文件

5、语法规则

三、各个具体标签

1、应用场景：展示一篇文章

①标题标签

②段落

③换行

④列表

⑤HTML 实体

⑥块

⑦路径

⑧图片

⑨超链接

2、应用场景：展示数据表格

①表格本身

②设置边框

③合并单元格

3、应用场景：提供表单供用户填写数据

①form标签定义整个表单

②name属性

③按钮

④请求参

⑤GET请求和POST请求区别

⑥密码框

⑦表单隐藏域

⑧单选按钮

⑨多选按钮

⑩多行文本框

⑪下拉列表

12.文件上传的表单

网页的组成、HTML概述、标签相关推荐

最新文章

热门文章