• Web前端 | HTML基本标签、实体符号、表格、超链接、列表

    ✅作者简介：一位材料转码农的选手，希望一起努力，一起进步！

    📃个人主页：@每天都要敲代码的个人主页

    🔥系列专栏：Web前端

    目录

    一：HTML概述

    1. B/S架构和C/S架构

    2. HTML是什么

    3. 第一个HTML页

    二：HTML实操

    1. HTML基本标签

    2. HTML的实体符号

    3. HTML的表格

    4. 图片和超链接

    5. HTML列表（了解）

    一：HTML概述

    1. B/S架构和C/S架构

     B/S架构：Browser / Server  （浏览器/服务器的交互形式）

    （1）Browser支持哪些语言：HTML、CSS、JavaScript
    （2）S是服务器端Server，Server端的语言很多：C C++ Java python.....（我主要是使用Java语言完成服务器端的开发）

    （3）B/S架构的系统的优点和缺点（网页版）
             优点：升级方便，只升级服务器端代码即可；维护成本低
             缺点：速度慢、体验不好、界面不炫酷
    （4） 企业内部的解决方案都是采用B/S架构的系统，因为企业内部办公需要的一些系统不需要炫酷，不需要特别好的用户体验，只要能做数据的增删改查即可。并且企业内部更注重维护的成本。

    （5）B/S架构的系统代表：京东、百度、天猫、新浪....

    C/S架构：Client / Server     （客户端/服务器端的交互形式）

    （1）C/S架构的系统的优点和缺点（APP版）

              缺点：升级麻烦，维护成本较高
              优点：速度快，体验好，界面炫酷（娱乐型的系统多数是C/S架构的）

    （2）常见的C/S架构的系统：QQ、微信、支付宝 ....

    2. HTML是什么

    （1）HTML: Hyper Text Markup Language （超文本标记语言）
    由大量的标签组成，每一个标签都有开始标签和结束标签。

    超文本: 流媒体、图片、声音、视频....       

    1.         <标签>
    2.             <标签>
    3.                 <标签 属性名="属性值" 属性名="属性值">
    4.                 标签>
    5.             标签>
    6.         标签>

    （2） HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm
    HTML也有专业的开发工具，例如：DreamWeaver、HBuilder.....

    直接采用浏览器打开HTML文件就是运行。

    （3）HTML是谁制定的？

    W3C：世界万维网联盟，W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。
    HTML规范目前最高的版本是：HTML5.0，简称H5

    W3C制定了很多规范：HTML/XML/http协议/https协议......

    为了方便中国web前端程序员的开发，提供大量的帮助文档，为开发提供方：
    w3school：先出现的，和W3C  没有关系
    w3cschool：后出现的，和W3C也没有关系

    3. 第一个HTML页面

    （1）这是HTML的注释
    （2）加上就表示HTML5语法。去掉就表示HTML4.0
    （3）HTML不区分大小写，语法松散不严格。

    2. <html> 
    3.  
    4. 	
    5. 	<head>
    6. 		
    7. 		<title>网页的标题title>
    8. 	head>
    9.  
    10. 	
    11. 	<body>
    12. 		网页的主体内容，欢迎学习HTML！
    13. 	body>
    14. html>

    二：HTML实操

    1. HTML基本标签

    （1）段落标记：

    <p>段落标记p>

    （2）标题字：是HTML预留的格式，1-6       

    1.  <h1>标题字1h1>
    2.  <h2>标题字2h2>
    3.  <h3>标题字3h3>
    4.  <h4>标题字4h4>
    5.  <h5>标题字5h5>
    6.  <h6>标题字6h6>

    （3）换行，独目标记

    Hello <br> World!

    （4）水平横线，独目标记

    1. <hr>
    3. <hr color="red" width="50%">
    5. <hr color='green' width=30%>

    （5）预留格式

    1. <pre>
    2. for(int i=0;i<10;i++){
    3.    System.out.println("Hello");
    4. }
    5. pre>

    （6）删除字

    <del>删除字del>

    （7）插入字

    <ins>插入字ins>

    （8）粗体字        

    <b>粗体字b>

    （9）斜体字

    <i>斜体字i>

    （10）右上角加字

    10<sup>m<sup>

    （11）右下角加字

    10<sub>n<sub>

    （12）font字体标签

    <font color="read" size="50">字体标签font>

    效果展示：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<title> HTML基本标签 title>
    5. 	head>
    6. 	<body>
    7. 		
    8. 		<p>黛玉葬花》是文学名著《红楼梦》中的经典片段。p><p>林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。p><p>她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。p><p>贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。p>
    9. 		
    10. 		
    11. 		<h1>标题字1h1>
    12. 		<h2>标题字2h2>
    13. 		<h3>标题字3h3>
    14. 		<h4>标题字4h4>
    15. 		<h5>标题字5h5>
    16. 		<h6>标题字6h6>
    17. 		
    18. 		
    19. 		Hello <br>World!
    20.  
    21. 		
    22. 		<hr>
    23. 		
    24. 		<hr color="red" width="50%">
    25. 		
    26. 		<hr color='green' width=30%>
    27.  
    28. 		
    29. 		<pre>
    30. 		for(int i=0;i<10;i++){
    31. 			System.out.println("Hello");
    32. 		}
    33. 		pre>
    34.         
    35. 		
    36. 		<del>删除字del> <br>
    37.  
    38. 		
    39. 		<ins>插入字ins> <br>
    40.  
    41. 		
    42. 		<b>粗体字b> <br>
    43.  
    44. 		
    45. 		<i>斜体字i> <br>
    46.  
    47. 		
    48. 		10<sup>m<sup>  <br>
    49. 		
    50. 		
    51. 		10<sub>n<sub> <br>
    52.  
    53. 		
    54. 		<font color="read" size="50">字体标签font>
    55.  
    56.  
    57.  
    58.  
    59. 	body>
    60. html>

    2. HTML实体符号

    体符号特点：以&开始，以;结束；&nbps;是空格，< 是小于号， > 是大于号

    （1）空格

    2. a         b
    4. a &nbps; &nbps; &nbps; &nbps; &nbps; b

    （2）大于号

    2. a > b

    （3）小于号

    2. a < b

    效果展示：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<title> HTML实体符号 title>
    5. 	head>
    6. 	<body>
    7. 	
    8. 	Hello              World! <br>
    9. 	Hello             World! <br>
    10.  
    11. 	
    12. 	a > b <br>
    13.  
    14. 	
    15. 	b < c <br>
    16. 	
    17. 	
    18. 	a<b>c 
    19. 	a < b > c
    20.  
    21. 	body>
    22. html>

    3. HTML的表格

    （1）基本表格

    1. table是整个表格框架

    （1）border="1px" 设置表格的边框为1像素宽度
    （2）width="300px" 设置表格的宽度为300像素宽度，也可以写成百分比的形式，例如：width="60%" 占整个窗口的60%
    （3）height="100px" 设置表格的高度为100像素宽度
    （4）align = "center" 对齐方式为中间对齐，也可以使用

    标签

    2. tr代表一行

    3. td代表一行里的一个格子

    1. <center> <table  border="1px" width="60%" height="100px"> center>
    2. table>
    3. <table  align="center" border="1px" width="60%" height="100px">
    4. table>

    效果展示：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<title> HTML表格 title>
    5. 	head>
    6. 	<body>
    7. 	
    8. 	<h1 align = "center" >员工信息表h1> 
    9. 	<hr>hr> 
    10.  
    11. 	<center> <table  border="1px" width="60%" height="100px"> center> 
    12. 		<tr>  
    13. 			<td align = "center" >1td> 
    14. 			<td align = "center" >2td>
    15. 			<td align = "center" >3td>
    16. 		tr>
    17.  
    18. 		<tr> 
    19. 			<td>4td> 
    20. 			<td>5td> 
    21. 			<td>6td> 
    22. 		tr>
    23.  
    24. 		<tr> 
    25. 			<td>7td> 
    26. 			<td>8td> 
    27. 			<td>9td> 
    28. 		tr>
    29.  
    30. 	table>
    31.  
    32. 	body>
    33. html>

     

    （2）单元格合并

    （1）row(行)合并的时候，删除“下面的”单元格，保留上面的；然后使用rowspan
    （2）col(列)合并的时候，对删除哪个没有要求，都可以；然后使用colspan

    （3）例如：6和9合并，6在上面，我们删除9，然后使用rowspan合并

                        7和8合并，左右关系，删除或保留那个都可以，然后使用colspan   

    1. html>
    2. <html>
    3. 	<head>
    4. 		<title> HTML表格 title>
    5. 	head>
    6. 	<body>
    7.  
    8. 	<center> <table "center" border="1px" width="60%" height="100px"> center>
    9. 		<tr> 
    10. 			<td>1td> 
    11. 			<td>2td>
    12. 			<td>3td>
    13. 		tr>
    14.  
    15. 		<tr> 
    16. 			<td>4td> 
    17. 			<td>5td> 
    18. 			<td rowspan="2">6td> 
    19. 		tr>
    20.  
    21. 		<tr> 
    22. 			
    23. 			<td colspan="2">8td> 
    24. 			 
    25. 		tr>
    26.  
    27. 	table>
    28.  
    29. 	body>
    30. html>

    （3）th标签

    th 标签也是单元格标签，比td多的是居中、加粗！

    1. html>
    2. <html>
    3. 	<head>
    4. 		<title> HTML表格 title>
    5. 	head>
    6. 	<body>
    7.  
    8. 	<center> <table "center" border="1px" width="60%" height="100px"> center>
    9. 		<tr> 
    10. 		
    11. 			<th>员工编号th>
    12. 			<th>员工薪资th>
    13. 			<th>部门名称th>
    14. 		tr>
    15.  
    16. 		<tr> 
    17. 			<td>1td> 
    18. 			<td>2td>
    19. 			<td>3td>
    20. 		tr>
    21.  
    22. 	table>
    23.  
    24. 	body>
    25. html>

    （4）thead、tbody、tfoot标签

    thead tbody tfoot 在table中不是必须的，只是这样做便于后期的JS代码的编写；本质就是把整个表分为：头、体、尾三部分！但是没有任何的效果

    1. html>
    2. <html>
    3. 	<head>
    4. 		<title>thead tbody tfoot title>
    5. 	head>
    6. 	<body>
    7. 		<table border="1px" width="50%">
    8. 			
    9. 			<thead>
    10. 				<tr>
    11. 					<th>员工编号th>
    12. 					<th>员工薪资th>
    13. 					<th>部门名称th>
    14. 				tr>
    15. 			thead>
    16.  
    17. 			
    18. 			<tbody>
    19. 				<tr>
    20. 					<td>1td>
    21. 					<td>2td>
    22. 					<td>3td>
    23. 				tr>
    24. 				<tr>
    25. 					<td>atd>
    26. 					<td>btd>
    27. 					<td rowspan="2">ftd>
    28. 				tr>
    29. 				<tr>
    30. 					<td colspan="2">dtd>
    31. 				tr>
    32. 			tbody>
    33.  
    34. 			
    35. 			<tfoot>
    36. 				<tr>
    37. 					<td>1td>
    38. 					<td>2td>
    39. 					<td>3td>
    40. 				tr>
    41. 			tfoot>
    42.  
    43. 		table>
    44. 	body>
    45. html>

    4. 图片和超链接

    （1）背景颜色和背景图片

    （1）bgcolor：设置背景颜色
    （2）backgroud：设置背景图片

    （3）这张图片我是在HBuilder建了一个img目录，把图片复制进去，然后使用的相对路径

    1. html>
    2. <html>
    3. 	<head>
    4. 		
    5. 		<meta charset="utf-8">
    6. 		<title> 背景颜色和背景图片 title>
    7. 	head>
    8. 	
    9. 	<body bgcolor="red" background="img/1649903301308.jpg">
    10. 		
    11. 	body>
    12. html>

    （2）HTML图片img标签

    （1）设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放。
    （2）img标签就是图片标签。
    （3）src属性是图片的路径。
    （4）width设置宽度，height设置高度。
    （5）title设置鼠标悬停时显示的信息。
    （6）alt设置图片加载失败时显示的提示信息。

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>图片imgtitle>
    6. 	head>
    7. 	<body>
    8. 		<img src="img/1.jpg" width="500px" title="我是小花" alt="图片找不到"/>
    9. 		<img src="img/2.jpg" width="500px"/>
    10. 		<img src="img/3.jpg" width="500px"/>
    11. 	body>
    12. html>

    （3）超链接

    （1）a标签就是超链接标签

    （2）href：hot references 热引用，href属性后面一定是一个资源的地址（url）。
    href后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径！

    （3）超链接可以是文字超连接，也可以是图片超连接

    （4）超链接有一个target属性；可取值：
                  _blank : 新窗口
                  _self ： 当前窗口（默认就是这种方式）
                  _top ： 顶级窗口
                  _parent ： 父窗口

    （5）超链接的作用：通过超链接可以从浏览器向服务器发送请求。
             浏览器向服务器发送数据（请求：request）
             服务器向浏览器发送数据（响应：response）      
             B/S结构的系统：每一个请求都会对应一个响应。
    （6）用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？
            本质上没有区别，都是向服务器发送请求。从操作上来讲，超链接使用更方便。

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>超链接title>
    6. 	head>
    7. 	<body>
    8. 	
    9. 		
    10. 		<a href="http://www.baidu.com">百度a>
    11. 		<a href="http://news.baidu.com">百度新闻a>
    12. 		<a href="http://www.sina.com.cn">新浪a>
    13. 		
    14. 		<a href="008图片img.html">008的超连接a>
    15. 		
    16. 		
    17. 		<a href="http://www.baidu.com">
    18. 			<img src="img/百度.png" width="120px">
    19. 		a>
    20. 		
    21. 		<a href="http://www.baidu.com" target="_blank">
    22. 			<img src="img/百度.png" width="120px">
    23. 		a>
    24. 	body>
    25. html>

    5. HTML列表（了解）

    （1）有序列表

    （1）

    ，表示有序列表；并且可以嵌套使用

    （2）前面的标记，默认是阿拉伯数字1,2,3......，也可以用type属性自己定义为：大小写英语字母A,a、大小写罗马数字I,i

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>有序列表title>
    6. 	head>
    7. 	<body>
    8. 		<ol>
    9. 			<li>中国
    10. 				<ol type="A">
    11. 					<li>安徽
    12. 						<ol type="I">
    13. 							<li>合肥li>
    14. 							<li>阜阳li>
    15. 							<li>太和li>
    16. 						ol>
    17. 					li>
    18. 					<li>北京li>
    19. 					<li>上海li>
    20. 				ol>
    21. 			li>
    22. 			<li>美国li>
    23. 			<li>日本li>
    24. 		ol>
    25. 	body>
    26. html>

    （2）无序列表

    （1）

    ，表示无序列表；并且也可以嵌套使用

    （2）前面的标记，默认是：实心圆、空心圆、黑方框，也可以使用type属性自己定义；

    square是黑方框、disc是实心圆、circle是空心圆

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>有序列表title>
    6. 	head>
    7. 	<body>
    8. 		<ul type="square">
    9. 			<li>中国
    10. 				<ul type="disc">
    11. 					<li>安徽
    12. 						<ul type="circle">
    13. 							<li>合肥li>
    14. 							<li>阜阳li>
    15. 							<li>太和li>
    16. 						ul>
    17. 					li>
    18. 					<li>北京li>
    19. 					<li>上海li>
    20. 				ul>
    21. 			li>
    22. 			<li>美国li>
    23. 			<li>日本li>
    24. 		ul>
    25. 	body>
    26. html>

  • 相关阅读:
    你觉得好的代码可能并不是最优的解决方案
    含文档+PPT+源码等]精品微信小程序计算机维修服务+后台管理系统|前后分离VUE[包运行成功]计算机毕业设计项目源码Java毕设项目
    通过开源如何赚钱生存发展
    [附源码]java毕业设计社区私家车位共享收费系统
    湖南湘潭家具3D轮廓扫描测量家居三维数字化外观逆向设计-CASAIM中科广电
    分布式事务解决方案
    [039]量化交易] DataFrame、Series数据结构访问
    进制转换0
    外贸网站的SEO优化该怎么做?
    java基于微信小程序的讲座预约系统的研究与实现
  • 原文地址：https://blog.csdn.net/m0_61933976/article/details/126577581