• HTML简单语句

    目录

    HTML

    基本格式

    基本结构

    常用标签

    基本标签

    表单标签

    超链接标签:a

    布局标签

    标题标签

    段落标签

    列表

    表格

    容器标签

    fieldset

    框架标签

    HTML

    中文名:超文本标记语句

    全称:Hyper Text Markup Language

    超文本:以文本展示非文本的内容

    标记:有特殊含义的标签

    基本格式

    方式1:<标签名 属性区> 内容区

    方式2:<标签名 属性区/>

    方式1可以在其中嵌套标签,方式2不可以嵌套别的标签 多个属性直接使用空格隔开

    注释语法：

    基本结构

    1. <!DOCTYPE html>        作用:表示当前文档类型为html文件
    2.  
    3. <html>                html:网页根标签包含网页中的所有内容
    4.  
    5. 	<head>            
    6. 		<meta charset="UTF-8">
    7. 		<title>网页标题</title>
    8. 	</head>
    9. 	<body>
    10. 		   这块是给用户看的     
    11. 	</body>
    12. </html>

    常用标签

    基本标签

    文本展示标签:font

    图片展示标签:img

    音频:audio

    视频:video

    换行:br

    水平分割线:hr

    1. 		<!--
    2. 			img标签:支持gif图
    3. 			src:展示的图片地址
    4. 				可以是网址
    5. 				也可以是本地图片地址
    6. 			alt:当图片加载失败时显示的内容
    7. 			
    8. 		-->
    9. 		<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
    10. 		<br />
    11. 		<img src="img/QQ图片20220325160444.jpg" width="300px" height="200px"/>
    12. 		<br />
    13. 		<img src="img/QQ图片20220325160444.jpg" width="300px" height="200px" alt="影狐狸" />
    14. 		<!-- br:换行 -->
    15. 		<br />
    16. 		<hr />
    17. 			<!--
    18.         	src:资源地址
    19.         	controls:控制器
    20.         	loop:循环播放,有兼容问题
    21.         	autoplay:自动播放,有兼容问题
    22.         -->
    23. 		<audio src="media/horse.mp3" controls autoplay loop></audio>
    24. 		<video src="media/movie.ogv" controls autoplay loop></video>

    表单标签

    input：输入

            type:输入类型

                    text:文本输入,默认的类型

                    password:密码输入

                    radio:单选按钮,注意,name属性值相同则为一组,要求需要value值,

                    checkbox:多选按钮

                    button:按钮

                    submit:提交按钮

                    reset:重置按钮

                    file:文件上传 

                    placeholder:提示字,属性值自定义

                    name:标签名称,属性值自定义

                    value:值,在类型为按钮时,表示按钮上显示的内容

    例如：

    1. 		<font>简单注册</font>
    2. 	
    3. 		
    4. 		<br/>
    5. 		账号：<input type="text" placeholder="账号">
    6. 		<br/>
    7. 		密码：<input type="password" placeholder="密码">
    8. 		<br/>
    9. 		
    10. 		性别：	
    11. 		<input type="radio" value="男" name="sex" >
    12. 		<font>男</font>
    13. 		<input type="radio" value="女" name="sex" >
    14. 		<font>女</font>
    15. 		<br/>
    16. 		<br/>
    17. 		<font>爱好</font>
    18. 		<br/>
    19. 		<input type="checkbox" value="唱" name="like">
    20. 		<font>唱</font>
    21. 		<input type="checkbox" value="跳" name="like">
    22. 		<font>跳</font>
    23. 		<input type="checkbox" value="RAP" name="like">
    24. 		<font>RAP</font>
    25. 		<br/>
    26. 		
    27. 		<br/>
    28. 		<br/>
    29. 		<font>你的国籍:</font>
    30. 		<br/>
    31. 		<select>
    32. 			<option>选择你的国籍</option>
    33. 			<option selected="selected">中国</option>
    34. 			<!--
    35.             	
    36.             	描述：selected表示默认
    37.             -->
    38. 			
    39. 			<option>m78</option>
    40. 		</select>
    41. 		
    42. 		<br/>
    43. 		<br/>
    44. 		<font>如何评价</font>
    45. 		<textarea rows="10" cols="10"></textarea>
    46. 		
    47. 		<br/>
    48. 		<br/>
    49. 		<input type="button" value="注册" />
    50. 		<input type="submit" value="上传" />
    51. 		<input type="reset" />
    52. 		<br />
    53. 		<input type="file" />
    54. 		<br />
    55. 		<input type="range" />
    56. 		<br />
    57. 		<input type="date" />
    58. 		<br />
    59. 		<input type="hidden" value="啦啦"/>
    60. <!-- 这个hidd--> 是隐藏域，用户看不见的
    61. 		<br />

     select:选择器

                             multiple:设置可以多选（在win系统中需要按住ctrl）

                                     size:展示的子项数量

                            子项:option

                                    属性: selected:默认选中

    1. <font>你的国籍:</font>
    2. 		<br/>
    3. 		<select>
    4. 			<option>选择你的国籍</option>
    5. 			<option selected="selected">中国</option>
    6. 			<!--
    7.             	
    8.             	描述：selected表示默认
    9.             -->
    10. 			
    11. 			<option>m78</option>
    12. 		</select>

    textarea：文本域

                    rows:行

                     cols:列        设置一个文本域，可用行列控制大小

    1. 	<font>如何评价</font>
    2. 		<textarea rows="10" cols="10"></textarea>

    form：

                1. enctype：上传类型

                            application/x-www-form-urlencoded不上传文件就使用该类型,该类型为默认执行

                            multipart/form-data 上传文件使用该类型

                2. method:请求方式

                            get:显式请求

                                    如:http://127.0.0.1:8080/?username=1234&password=123456 注意:不能超过100个字符 经验:get用于下载

                             post:隐式请求

                                    注意:上传数据量无限制 经验:post用于上传或密码相关

                 3.action:接收请求的地址

    1. <body>
    2. 		<form action="http://127.0.0.1:8000" method="get"enctype="multipart/form-data">
    3. 			账号<input type="text" placeholder="输入账号" name="username" />
    4. 			<br/>
    5. 			密码<input type="password" placeholder="请输入账号" name="password"/>
    6. 			<br/>
    7. 			<input type="submit" value="登录"/>
    8. 			
    9. 			
    10. 		</form>	
    11. 		<br/>
    12. 		<form action="http://127.0.0.1:8000" method="post"enctype="application/x-www-form-urlencoded">
    13. 			账号<input type="text" placeholder="输入账号" name="username" />
    14. 			<br/>
    15. 			密码<input type="password" placeholder="请输入账号" name="password"/>
    16. 			<br/>
    17. 			<input type="submit" value="登录"/>
    18. 			
    19. 		</form>

    显式提交

      隐式提交

    超链接标签:a

    链接网页：语法

     显示的字

    1. <a href="https://www.baidu.com">百度一下</a>
    2. <a href="demo3.html">去demo3</a>
    3.

    点击即可跳转到该链接

    锚点：

    1. <font id="top">最顶</font>
    2. ......
    3. <a href="#top">语句</a>

    如图点击 语句 就会在同一个页面跳转到 最顶 的位置

    例2

    1. <a href="#top01">01</a>
    2. .....
    3. <font id="top01">第一个</font>

    点击01就会跳到第一个

    布局标签

    标题标签

    h1,h2,h3,h4,h5,h6

    1.         <h1 align="middle">A</h1>
    2. 		<h2>A</h1>
    3. 		<h3 align="right">A</h1>
    4. 		<h6 align="left">A</h1>

    效果

    段落标签

    1. <p>
    2. 			&nbsp;&nbsp;&nbsp;&nbsp;先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
    3. 		</p>
    4. 		<p>
    5. 			宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
    6. 		</p>

     

    一个   代表一个空格

    列表

    ul 无序列表

    ol有序列表

    1. 	<ul>
    2. 			<li>第一个选项</li>
    3. 			<li>第二个选项</li>
    4. 			<li>第三个选项</li>
    5. 			<li>第四个选项</li>
    6. 		</ul>
    7. 		
    8. 		<ol>
    9. 			<li>第一个选项</li>
    10. 			<li>第二个选项</li>
    11. 			<li>第三个选项</li>
    12. 			<li>第四个选项</li>
    13. 		</ol>

    效果：

    表格

                    align="center"居中

    table:表格 tr:行 td:单元格th:特殊单元格

    标签就是Table Heading，意思是表格标题。标签在使用时，跟标签没有什么区别，如果非要说有点区别的话，那就是一般只用在第一个下。在浏览器中显示时，标签被显示为加粗的字体，其它的跟普通的也没有区别。

    例：

    1. 	<table  border="1" cellspacing="0"  align="center">
    2. 			<tr>
    3. 				<td align="center" colspan="4">第一行</td>
    4. 			</tr>
    5. 			<tr>
    6. 				<td>第二行第一个</td>
    7. 				<td>第二行第二个</td>
    8. 				<td colspan="2">第二行第三个</td>
    9. 			</tr>
    10. 			<tr>
    11. 				<td>第三行第一个</td>
    12. 				<td>第三行第二个</td>
    13. 				<td>第三行第三个</td>
    14. 				<td>第三行第四个</td>
    15. 			</tr>
    16. 			<tr>
    17. 				<td>第四行第一个</td>
    18. 				<td>第四行第二个</td>
    19. 				<td>第四行第三个</td>
    20. 				<td>第四行第四个</td>
    21. 			</tr>
    22. 			<tr>
    23. 				<td>第五行第一个</td>
    24. 				<td>第五行第二个</td>
    25. 				<td colspan="2" rowspan="2">第五行第三个</td>
    26. 			</tr>
    27.                  <!--
    28.                  	作者：offline
    29.                  	时间：2022-11-07
    30.                  	描述：rowspan合并列
    31.                  -->
    32. 			<tr>
    33. 				<td>第六行第一个</td>
    34. 				<td>第六行第二个</td>
    35. 			</tr>
    36. 		</table>

     border="1" 黑框框大小

    cellspacing="0" 框框之间的距离

    容器标签

    将某个东西包裹起来

    例：

    1.             <div align="center">
    2. 					<img src="img/QQ图片20220325160444.jpg"width="30%" height="30%" />
    3. 			</div>

     将图片居中

    fieldset

    例：

    1. <fieldset style="width: 300px;">
    2. <legend>管理员登录</legend>
    3. <input type="text" placeholder="请输入账号" />
    4. <br />
    5. <input type="password" placeholder="请输入密码" />
    6. <br />
    7. <input type="button" value="登录" />
    8. </fieldset>

    表现出这种格式

    框架标签

    frameset

     frame

                    上面两个都过时了，。

    iframe

    1.  
    2. <a hraf="xxx"  target="a_frame">链接</a>
    3. <iframe name="a_frame" > </iframe>
    4.  
    5. 也可以
    6. <iframe src = "xxx" > </iframe>

    iframe标签可以实现html主页面嵌套html子页面，子页面可以是一个功能页面

    其他细节

    1.所有标签都有id,class属性，一个网页中id属性值不能重复 一个网页中class属性值允许重复

    2. 所有标签都有onclick(点击)事件，意味着所有标签都可以当做按钮

  • 相关阅读:
    RabbitMQ基于Nginx的集群搭建
    nginx四层tcp负载均衡及主备、四层udp负载均衡及主备、7层http负载均衡及主备配置（wndows系统主备、负载均衡）
    数组乱序，前端
    电脑win11怎么还原系统？分享5种电脑系统还原的方法
    力扣——程序员面试金典109题刷题笔记（一）
    nfs服务器之间实现目录共享
    vue-3
    干测试这些年，去过阿里也去过小公司，给年轻测试员们一个忠告....
    Spring Authorization Server 0.3.0 发布，官方文档正式上线
    MySQL 教程 2.4
  • 原文地址：https://blog.csdn.net/weixin_44207220/article/details/127737452