技术点1:HTML

郭少 2020-11-08 12:54:37
技术 html HTML/CSS 博客园


HTML页面

一、B/S 软件的结构

 

 

 二、前端开发流程

 

 

 三、网页的组成部分

HTML:是网页的结构(骨架),就是我们在页面中能看到的内容。

CSS:是网页的表现,指的是这些内容在页面上的展示形式。比如说。布局,颜色,大小等等。

JavaScript:是网页的行为,指的是页面中元素与输入设备交互的响应。

四、HTML 简介

超文本标记语言:Hyper Text Markup Language (简写为HTML)

HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)

五、创建HTML 文件

1.创建一个web工程

 

 

 

 

 

 

 

 

 2.在工程下创建 html 页面

 

 

 选择要执行的浏览器:

 

 

 第一个HTML页面示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first.html</title>
</head>
<body>
第一个HTML页面
</body>
</html>

注:HTML 文件它不需要编译,直接由浏览器进行解析执行。

六、HTML的注释

注释:<!-- 注释内容 -->

注:注释的内容可以在F12查看源代码中看到。

 

 

 七、HTML标签介绍

 

 

 1.标签的分类

单标签:<标签名 属性名 = "属性值" /> 如:<br />

双标签:<标签名 属性名 = "属性值">封装的数据</标签名>    如:<div>我是div</div>

2.标签的属性

基本属性:可以修改简单的样式效果

 

 

 效果如下:

 

 

 事件属性:可以直接设置事件响应后的代码

 

 

 效果如下:

 

 

 3.标签名大小写不敏感

4.标签的语法

①标签不能交叉嵌套;

②标签必须正确的关闭;

③标签的属性必须有值,属性值必须加引号;

④注释不能交叉嵌套。

八、常用标签介绍

1.font 字体标签

需求1:在网页上显示 我是字体标签 ,并修改字体为 宋体,颜色为红色。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体标签</title>
</head>
<body>
<!--需求1:在网页上显示 我是字体标签 ,并修改字体为 宋体,颜色为红色。-->
<font face="宋体" color="red" size="7">
我是字体标签
</font>
</body>
</html>

效果如下:

 

 

 2.特殊字符

需求1:把 <br> 换行标签 变成文本 转换成字符显示在页面上

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特殊字符</title>
</head>
<body>
<!--需求1:把 <br> 换行标签 变成文本 转换成字符显示在页面上-->
我是&lt;br /&gt;标签
</body>
</html>

效果如下:

 

 

 以后根据业务需要,可以去w3cschool去找:

 

 

 

3.标题标签

明确:标题标签只有h1~h6.

示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<!--
标题标签:h1~h6
h1最大
h6最小
属性:align(可以设置标题标签中数据的对齐方式)
属性值:
center:居中
left:居左
right:居右
-->
<h1 align="center">标题1</h1>
<h2>标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6 align="left">标题6</h6>
</body>
</html>

效果如下:

 

 

 

4.超链接 ( **** 重 点 ,必 须 掌 握 *

说明:在网页中点击之后可以跳转的内容是超链接。

需求1:普通的 超连接。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<!--
a标签是超链接标签(默认在一行内显示)。
属性:
href:跳转的目标地址
target:以怎样的方式进行跳转
_self:当前页面跳转(默认值)
_blank:新的页面进行跳转
br:换行标签
-->
<a href="http://www.baidu.com">百度一下</a> <br/>
<a href="http://www.baidu.com" target="_blank">百度一下_blank</a> <br/>
<a href="http://www.baidu.com" target="_self">百度一下_self</a> <br/>
</body>
</html>

效果如下:

 

 5.列表标签

需求1:使用无序列表方式,把东北F4,赵四,刘能,小沈阳,宋小宝,展示出来

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<!--需求1:使用无序列表方式,把东北F4,赵四,刘能,小沈阳,宋小宝,展示出来-->
<!--
无序列表使用ul标签表示,li是列表项。
-->
<ul>
<li>赵四</li>
<li>刘能</li>
<li>小沈阳</li>
<li>宋小宝</li>
</ul>
</body>
</html>

效果如下:

 

 6.img标签

img标签可以在HTML页面上显示图片。

需求1:使用img 标签显示一张美女的照片。并修改宽高,和边框属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--
需求1:使用img 标签显示一张美女的照片。并修改宽高,和边框属性.
img标签可以在HTML页面上显示图片。
属性:
border:设置图片的边框
width:设置图片的宽度
height:设置图片的高度
align:设置图片的对齐方式
src:设置图片的路径
alt:当在某个路径下找不到需要的图片时,给用户的提示信息
关于路径:
在JavaSE中:
绝对路径:盘符:/目录/文件名
相对路径:从工程名开始算
在web中:
绝对路径:http://ip:port/工程名/资源路径
相对路径:
. 表示当前文件所在的目录
.. 表示当前文件所在目录的父目录
文件名 表示当前文件所在的目录,相当于./文件名.其中,./可以省略
-->
<img border="1" width="400" height="400" align="center" src="./timg.jpg" alt="美女找不到" />
</body>
</html>

效果如下:

 

 7.表格标签( **** 重点,必须掌握 *

先明确表格标签能干嘛?

 

 如上的内容使用的就是表格标签,可以让页面更整齐美观。

 

需求1:做一个 带表头的 ,三行,三列的表格,并显示边框

需求2:修改表格的宽度,高度,表格的对齐方式,单元格间距。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!--
需求1:做一个 带表头的 ,三行,三列的表格,并显示边框
需求2:修改表格的宽度,高度,表格的对齐方式,单元格间距。
table:表格标签
border:设置边框
width:设置表格的宽度
height:设置表格的高度
align:设置表格的对齐方式
cellspacing:设置单元格的间距
tr是行标签。
th是表头标签。(具有特殊样式)
td是单元格标签:
align:设置单元格文本的对齐方式
-->
<table border="1" width="300" height="300" align="center" cellspacing="0">
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>001</td>
<td align="center">郭鹏</td>
<td>25</td>
</tr>
<tr>
<td>002</td>
<td>郭新</td>
<td>24</td>
</tr>
</table>
</body>
</html>

效果如下:

 

 跨行跨列表格 (* 次重点,必须掌握 *)

需求1:新建一个五行五列的表格,第一行第一列的单元格要跨两列,第二行第一列的单元格跨两行,第四行第四列的单元格跨两行两列。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨行跨列</title>
</head>
<body>
<!--
需求1:新建一个五行五列的表格,第一行第一列的单元格要跨两列,
第二行第一列的单元格跨两行,第四行第四列的单元格跨两行两列。
-->
<table border="1" width="300" height="300" cellspacing="0">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
</body>
</html>

效果如下:

 

 8.iframe框架标签

ifarme 标签它可以在一个 html 页面上,打开一个小窗口,去加载一个单独的页面.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe标签</title>
</head>
<body>
<!--
iframe可以在页面上开辟一个小区域显示一个单独的页面。
iframe和a标签搭配使用:
1.给iframe设置name属性,属性值任意
2.a标签的target属性值设置成iframe对应的name属性值即可
-->
一个单独的完整的页面 <br/> <br/>
<iframe src="http://www.baidu.com" width="400px" height="400px" name="label"></iframe>
<br/>
<a href="https://www.huya.com/" target="label">虎牙直播</a>
<a href="https://egame.qq.com/" target="label">企鹅电竞</a>
<a href="https://www.douyu.com/" target="label">斗鱼直播</a>
</body>
</html>

效果如下:

 

 

9.表单标签 ( ***** 重点 ,必须掌握 *

什么是表单?
表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form标签</title>
</head>
<body>
<!--需求1:创建一个个人信息注册的表单界面。包含用户名,密码,确认密码。性别(单选),
兴趣爱好(多选),国籍(下拉列表),隐藏域,自我评价(多行文本域)。重置,提交。-->
<!--
form标签就是表单。
text:文本输入框,value设置默认显示内容。
password:密码输入框,value设置默认显示内容。
radio:单选框,name可以对其进行分组(一组中的内容只能选一个),checked是默认选中状态
checkbox:多选框,checked是默认选中。
select:下拉列表
option:下拉列表项,selected表示默认选中
hidden:隐藏域(隐藏域用户是看不到的)
textarea:多行文本域
cols是列数
rows是行数
多行文本域的默认值是textarea的文本内容。
reset和submit只需要注意value属性是按钮显示的内容。
-->
<form>
用户名 : <input type="text" value="默认值" /> <br/>
密码 : <input type="password" value="abcde" /> <br/>
确认密码 : <input type="password" value="abcde" /> <br/>
性别 : <input type="radio" name="sex" /><input type="radio" name="sex" checked="checked" /><br/>
兴趣爱好 : <input type="checkbox" name="hobby" checked="checked" />Java
<input type="checkbox" name="hobby">JS
<input type="checkbox" name="hobby">C++ <br/>
国籍 : <select>
<option>--请选择国籍--</option>
<option>中国</option>
<option selected="selected">美国</option>
<option>日本</option>
</select><br/>
<input type="hidden" name="username" value="password" /><br/>
<textarea cols="20" rows="10">我才是默认值</textarea><br/>
<input type="reset" value="重置" /><br/>
<input type="submit" value="提交" /><br/>
</form>
</body>
</html>

效果如下:

 

  我们发现,上面的表单不够规范,用户体验极差。因此,需要对表单进行格式化。

表单格式化:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form标签</title>
</head>
<body>
<form>
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td>用户名 : </td>
<td><input type="text" value="默认值" /></td>
</tr>
<tr>
<td>密码 : </td>
<td><input type="password" value="abcde" /></td>
</tr>
<tr>
<td>确认密码 : </td>
<td><input type="password" value="abcde" /></td>
</tr>
<tr>
<td>性别 : </td>
<td>
<input type="radio" name="sex" /><input type="radio" name="sex" checked="checked" /></td>
</tr>
<tr>
<td>兴趣爱好 : </td>
<td>
<input type="checkbox" name="hobby" checked="checked" />Java
<input type="checkbox" name="hobby">JS
<input type="checkbox" name="hobby">C++
</td>
</tr>
<tr>
<td>国籍 : </td>
<td>
<select>
<option>--请选择国籍--</option>
<option>中国</option>
<option selected="selected">美国</option>
<option>日本</option>
</select>
</td>
</tr>
<tr>
<td><input type="hidden" name="username" value="password" /></td>
</tr>
<tr>
<td>自我评价 : </td>
<td><textarea cols="20" rows="10">我才是默认值</textarea></td>
</tr>
<tr>
<td><input type="reset" value="重置" /></td>
<td><input type="submit" value="提交" /></td>
</tr>
</table>
</form>
</body>
</html>

效果如下:

 

 表单提交细节:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form标签</title>
</head>
<body>
<!--
form是表单标签。
action:表单提交的地址
method:提交的方式。GET(默认值)或 POST
表单提交的时候,数据没有发送给服务器的3中情况。
1.表单项没有name属性值;
2.单选,复选,下拉列表需要设置value属性,以便发送给服务器;
3.表单项没有在form标签中。
GET请求:
1.浏览器地址栏地址是:action属性值[+?+请求参数]
2.数据不安全
3.有长度的限制
POST请求:
1.浏览器地址栏是:action属性值
2.安全
3.理论上没有数据长度的限制
-->
<form action="http://www.baidu.com" method="get">
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td>用户名 : </td>
<td><input type="text" name="user" value="默认值" /></td>
</tr>
<tr>
<td>密码 : </td>
<td><input type="password" name="pwd" value="abcde" /></td>
</tr>
<tr>
<td>确认密码 : </td>
<td><input type="password" value="abcde" /></td>
</tr>
<tr>
<td>性别 : </td>
<td>
<input type="radio" name="sex" value="boy" /><input type="radio" name="sex" checked="checked" value="girl" /></td>
</tr>
<tr>
<td>兴趣爱好 : </td>
<td>
<input type="checkbox" name="hobby" checked="checked" value="java" />Java
<input type="checkbox" name="hobby" value="javascript" />JS
<input type="checkbox" name="hobby" value="cpp">C++
</td>
</tr>
<tr>
<td>国籍 : </td>
<td>
<select name="country">
<option value="none">--请选择国籍--</option>
<option value="cn">中国</option>
<option value="us" selected="selected">美国</option>
<option value="jp">日本</option>
</select>
</td>
</tr>
<tr>
<td><input type="hidden" name="username" value="password" /></td>
</tr>
<tr>
<td>自我评价 : </td>
<td><textarea name="desc" cols="20" rows="10">我才是默认值</textarea></td>
</tr>
<tr>
<td><input type="reset" value="重置" /></td>
<td><input type="submit" value="提交" /></td>
</tr>
</table>
</form>
</body>
</html>

效果如下:

 

 

九、其它标签

需求1:div、span、p 标签的演示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其它标签</title>
</head>
<body>
<!--
说明:
div:每个div独占一行
span:多个span在一行内显示
p:会在前或后空出一行
-->
<div>div标签</div>
<span>span标签</span>
<p>段落标签</p>
</body>
</html>

效果如下:

 

版权声明
本文为[郭少]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/897463196-a/p/13943963.html

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple