前端html

最新推荐文章于 2025-06-03 10:42:30 发布

暴走的小帅

最新推荐文章于 2025-06-03 10:42:30 发布

阅读量373

点赞数

CC 4.0 BY-SA版权

文章标签：前端 html 服务器

本文链接：https://blog.csdn.net/weixin_71243923/article/details/126748635

本文详细介绍了HTML的基本概念，包括超文本、标记语言、语法结构，以及常用的HTML标签如标题、段落、链接、图片、表单等。还涉及到了表格的创建和表单组件的使用，提供了丰富的示例来帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html 概述: 超文本标记语言 (HyperText Markup Language)。

(1)超文本:页面内包含图片、链接、声音,视频等内容

(2)标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)

html语法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">   设置浏览器解析网页时使用的字符集,还有meta title link style 
                                                                                  script等
		<title></title>
	</head>
	<body>
	</body>
</html>

以上这是工具生成的一个标准的html模板

(1)

(2)<!DOCTYPE html> 这是html5版本,这是html文件中的一个声明,告诉浏览器使用的html语言版本,这样浏览器在解析时就知道使用的是哪个版本的标准进行解析

(3) <html> </html> 所有标记类语言都有一个基本语法,就是必须有一个根标签,所有的语句都必须在根标签内
(4)<head> </head> 网页头部,里面可以设置网页的元信息

(5) <body> </body> 身体,网页内容都写在body中

(6)网页基本语法: 网页是由标签构成的
<开始标签> 标签体 </结束标签> 称为闭合标签即双标签
           <标签名 /> : 称为自闭和标签

           标签中可以拥有属性,通过属性来修饰标签的特性
           属性必须写在开始标签中
           一个标签中可以拥有多个属性
           格式: 属性名="属性值"; -->

常用标签:

(1) h1.....h6 标题标签 align可以设置文本内容在在标签行内的水平对齐方式
       <h1 align="right">一级标题</h1>
       <h2 align="center">二级标题</h2>
       <h3 align="left">三级标题</h3> 默认是在最左侧

(2) p 段落标签,表示一个段落,段落与段落之间有间隔
       <p align="right"> 为为赴河南卫符号位复活甲而我却哦if进入得</p>
       <p>为为赴河南卫符号位复活甲而我却哦if进入得为为赴河南卫符号位复活甲而
       我却哦if进入得为为赴河南卫符号位复活甲而我却哦if进入得</p>

(3)

(4) 1. 
       <ui>
           <li>你好</li>
           <li>nihao</li>
       </ui>
2. 
       <oi>
           <li type="A">nihao</li>
       </oi>

(5)
<a href="http://www.baidu.com" target="_blank">baidu</a>

(6)
<img src="img/1e59f198a393d7a345407bd5f767e01b.jpeg" />

(7)加粗标签 <b>百度</b>

(8)
<hr color="aqua" width="200" size="20" />

(9) 
       <b> 
       
       百  度
       ©版权 ® 商标

表格:

(1)标签 table 表格标签表示一个表格区域
       tr 表格行
           th 单元格表头加粗居中
           td 普通单元格

(2)语法结构:

<table>定义表格

<tr>定义表行

</tr>

<tr>

<td>定义单元格</td>

</tr>

</table>

(3)表格属性:

1. <table border="1"> 显示表格边框

2. cellpadding="1" 内容与边线的距离

3. cellspacing="0" 线之间的距离

4. <table width="200" height="20" bgcolor="aqua"> 调整表格的长高背景

5. <tr height="20"> 调整一行的高
<th width="200" >姓名</th> 调整一个单元格的高,表头默认水平垂直居中(注意:调整一个单元格后,这个单元格整列都会发生变化)

6. <td align="center" valign="top">张三</td> align="center" 调整水平位置 valign="top"调整垂直位置

7.<td colspan="4"></td> 
<td rowspan="3"></td>

8.创建表格快捷方式: table>tr*5>td*5

表单:

表单: 用于从前端网页向后端服务器发送数据的组件,表单中有许多可输入和选择型的组件
表单标签: 表示多个组件在同一个表单中就是一个整体

 <form action="" method="get">
						   	<input type="text" name="userName"  value=""  placeholder="请输入用户名"/><br />
							<input type="password"  name="password" /><br />
							<input type="radio" name="gender" value="男" checked="checked"/>男
							<input type="radio" name="gender" value="女"/>女<br />
							<input type="checkbox" name="course" value="java" />java
							<input type="checkbox" name="course" value="c" />c
							<input type="checkbox" name="course" value="html" />html
							<input type="checkbox" name="course" value="vc" />vc<br />
							<select name="province">
								<option value="102">北京</option>
								<option value="103"  selected="selected">上海</option>
							</select>
							<input type="file" /><br />
							<textarea name="mark"  cols="5"  rows="5"></textarea>
							<input type="submit" value="保存" />
							<input type="reset" value="重置" />
							<input type="button"  value="普通按钮"/>
						   </form>

(1)action="后端服务器地址" method="提交方式"

(2) <input type="text" /> 单行文本输入框

(3) name="username" 名字 value="值"

(4) readonly="readonly" 可读,不允许填写内容,但是可以提交

(5) disabled="disabled" 禁用组件,不能提交内容

(6) placeholder="请输入用户名" 提示内容,不是实际输入的内容

(7) type="radio" 单选框必须通过name来进分组,name相同为一组,就会发生互斥,选择性组件必须给与默认值
checked="checked" ,默认选中

(8) type="checkbox" 复选框

(9) <select name="province"> 名字下拉框
                          <option value="102">北京</option> value:提交的内容
                          <option value="103">上海</option>
                       </select>
                       selected="selected" 默认值

(10) <input type="file" /> 文件选择

(11)<textarea name="mark" cols="5" rows="5"></textarea> 多行文本框

(12)<input type="reset" value="重置" /> 重置按钮

(13) <input type="submit" value="保存" /> 提交按钮

(14) <input type="button" value="普通按钮"/>