简单了解HTML_了解html吗-优快云博客

本文链接：https://blog.youkuaiyun.com/dingse/article/details/78519824

本文详细介绍了HTML的基本语法和常用标签，包括文本格式化、链接、图片插入等，并通过实例展示了表单和表格的创建方法。

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

html:hypertext markup language(超文本标签语言)

- HTML 指超文本标签语言。
- HTML 文件是包含一些标签的文本文件。
- 这些标签告诉 WEB 浏览器如何显示页面。
- HTML 文件必须使用 htm 或者 html 作为文件扩展名。
- HTML 文件可以通过简单的文本编辑器来创建。

html的语法是使用各个标签来定义格式:使用(开始)<..>内容</..>(结束)，当开始与结束标记中间没有内容的时候可以使用缩写<../>
标记（标签）的作用
- 告诉浏览器如何显示内容
常用的标签
1. 注释
2. <a></a> 定义锚：
  - 通过使用 href 属性，创建一个到另外一个文档的链接
  - 通过使用 name 或 id 属性，创建一个文档内部的书签（在访问连接时可是使用#name书签直接定位到该name属性指定的位置）
  - href=URL target="_blank"在新的空白窗口打开超链接
3. <B></B>定义粗体
4. <body>定义显示的主体
5. <br>插入一个回车（换行）
6. <font> 定义文本的字体，大小，颜色
7. <hr>定义水平线
8. <i>定义斜体
9. <img>定义插入图片
  1. src：所显示图像的 URL。（图片的路径名称：绝对路径，相对路径）
  2. alt：对图片的简短描述
  3. align:规定如何根据周围的文本来排列图像（top顶端，middle居中，left，right图片在文字左侧，bottom文字的中线在图片的底部）
  4. width:定义图片的宽度
  5. height：定义图片的高度
  6. border:定义图片的边框宽度
  7. ```
  <HTML>
   <HEAD>
    <TITLE> New Document </TITLE>
   </HEAD>
  
   <BODY>
    <b>hello world</B>
    <img src="../water.jpg" alt="这是一张图片" align="middle" width=300 height=400 border=5/>
   </BODY>
  </HTML>
```
10. <sub>将文本显示为下标
11. <sup>将文本显示为上标
12. <U>在文本上加上下划线
13. <table>定义表格
  1. bgcolor背景颜色
    1. RGB
    2. （x,x,x）百分比的颜色
    3. #xxxxxx十六进制的颜色
      1. colorname颜色名称
  2. border表格的边框宽度
  3. colspan=""合并列
  4. rowspan=""合并行
14. form表单（form 元素可为用户输入创建表单。表单可包含文本域，复选框，单选按钮等等。表单用于向指定的 URL 传递用户数据。）
  1. action：提交表单的地址（URL）
  2. method：表单提交的方法
  3. 表单组件
    1. <input>定义输入域，输入组件
      1. type：指定input元素的类型，默认为"text"
        button:普通按钮（需要js编程实现该按钮的功能）
        radio单选按钮，如果将多个单选按钮的name设置相同，则它们设置为同一组，checked属性表示被选中
        checkbox：复选按钮（多选）
        file文件
        hidden隐藏
        image图片按钮（相当于提交按钮）
        password密码文本(对输入的内容做隐藏处理）
        reset重置按钮（重置当前按钮所在的表单范围）
        submit提交按钮（将当前表单中的数据发送到action指定的地址）
        
        text文本框
        name定义input元素的唯一名称
        value定义按钮上的文本
        在输入中name重复的后台以数组的形式进行接收
    2. select下拉选项（multiple多选属性）
      1. 例子
        <select name="degree" multiple> <option value ="1">小学</option> <option value ="2">初中</option> <option value="3">高中</option> <option value="4">大学</option> <option value="5">硕士</option> <option value="6">博士</option> <option value="7">博士后</option> <option value="8">剩斗士</option> <option value="9">壮士</option> <option value="10">烈士</option> </select>
      2. selected被选中

测试用的代码

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>

 <BODY>
	<font color="red" size=25>
	H<sub>2</sub>O<br/>
	 <hr/>
	2<sup>10</sup>=1024
	 </font>
	 <hr/>
	<form action="">
		用户名：<input type="text" name="userName" value="请输入用户名"/><br/>
		密  码：<input type="password" name="passWord"><br/>
		性别：<input type="radio" value="男" name="sex" checked>男
		<input type="radio" value="女" name="sex">女<br/>
		爱好：<input type="checkbox" value="1" name="hobby">乒乓球
		<input type="checkbox" value="2" name="hobby">足球
		<input type="checkbox" value="3" name="hobby">游泳
		<input type="checkbox" value="4" name="hobby">赛车<br/>
		学历：<select name="degree">
			<option value ="1">小学</option>
			<option value ="2">初中</option>
			<option value="3">高中</option>
			<option value="4">大学</option>
			<option value="5">硕士</option>
			<option value="6">博士</option>
			<option value="7">博士后</option>
			<option value="8">剩斗士</option>
			<option value="9">壮士</option>
			<option value="10">烈士</option>
		</select><br/>
		上传照片：<input type="file" name="photo" value="选择图片"/><br/>
		自我介绍：<br/><textArea rows=8 cols=25>大家好</textArea><br/>
		<input type="button" value="普通按钮">
		<input type="reset" value="一键重置">
		<input type="submit" value="提交按钮"><br/>
	</form>
 </BODY>
</HTML>

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>

 <BODY>
  <b>hello world</B>
  <hr/>
  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>
  <hr/>
  <hr/>
  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>
  <hr/>
  <hr/>
  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>
  <hr/>
  <hr/>
  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>
  <hr/><hr/>
  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>
  <hr/><hr/>
  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>
  <hr/><hr/>
  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>
  <hr/><hr/>
  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>
  <hr/><hr/>
  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>
  <hr/><hr/>
  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>
  <hr/><hr/>
  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>
  <hr/><hr/>
  <a name="rrr">
  <img src="C:/Users/dingshuangen/Desktop/课表.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>
  <hr/><hr/>
  <img src="../water.jpg" alt="这是一张图片" align="middle" width="300" height="400" border="5"/>
  <hr/>
  <table border=2 width=“3000”>
	<tr><!--行-->
		<th>序号</th><!--th表格的标题-->
		<th>书名</th>
		<th>作者</th>
		<th>价格</th>
	</tr>
	<tr>
		<td>1</td><!--单元格-->
		<td>老人与海</td>
		<td>海明威</td>
		<td>55</td>
	</tr>
	<tr>
		<td>2</td>
		<td><a href="http://baike.sogou.com/v64392728.htm?fromTitle=%E9%92%A2%E9%93%81%E6%98%AF%E6%80%8E%E6%A0%B7%E7%82%BC%E6%88%90%E7%9A%84" target="_blank">钢铁是怎样炼成的</td>
		<td>尼古拉</td>
		<td>66</td>
	</tr>
	<tr>
		<td>3</td>
		<td><a href="http://v.sogou.com/series/mnqxe5dpn5xf6obrha4qtoxzykv5bvvv3q.html" target="_top">葫芦娃</td>
		<td>小虎</td>
		<td>25</td>
	</tr>
	<tr>
		<td>4</td>
		<td><a href="img.html#rrr">黑猫警长</td>
		<td>小胖墩</td>
		<td>67</td>
	</tr>
  </table>
 </BODY>
</HTML>