JavaWeb笔记——HTML语言基本规则

最新推荐文章于 2022-11-05 12:39:07 发布

站稳扶好

最新推荐文章于 2022-11-05 12:39:07 发布

阅读量134

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/xcz8023/article/details/114039781

版权

JavaWeb 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文详细介绍了HTML的基本结构，包括头部、主体元素，以及字体、格式化、图片、列表、超链接、表格和块级标签的使用方法。此外，还涵盖了表单标签，如input、textarea和select，帮助读者快速掌握网页开发的基础要素。

摘要由CSDN通过智能技术生成

文章目录

HTML语言基本规则

HTML语言基本规则

一、HTML语言的结构

HTML的代码由头和体组成

<html>
	<head>
		<title>标题</title>	
	</head>
	<body>
		<font color="red">HTML入门案例</font>
	</body>
</html>

// 标签相当于Java的大括号
// 标签里面存放的是网页的说明性内容，如标题

// 标签中是内容主题，如网页上要输出的内容

HTML文件的扩展名为“html”或“htm”
HTML文件由浏览器直接解析，自上而下的执行
HTML标签通常以开始标签和结束标签组成，如：标题

签叫做空标签。仅由一个标签组成，如，

自关闭
HEML标签不区分大小写，但是为了方便阅读，建议同意使用小写
HEML标签是有属性的，格式为：属性名=“属性值”，属性值用引号引起
HEML文件建议使用包裹嵌套，不建议使用交叉嵌套

二、基础标签

1. 字体标签

<!--
    <font></font>标签，字体标签（建议使用样式）

属性：

	color：调整字体的颜色

	face：调整字体，字体要为库中已有的字体，如楷体

	size：调整字体的大小（1-7），1最小，7最大

如： 
-->
<font color="aquamarine" face="楷体" size="5" >越来越好</font>

2. 格式化标签

	<!-- 格式化标签 
			<h1>标题</h1>
		h1最大，h6最小
	
		HTML并不会识别源码中的换行和空格符号（空格在大于一个时也只会识别一个），需要手动加入
		&nbsp  空格符号  
		<br/>  换行
		
		<p>段落 </p> 划分段落，段前段后留出空行
			align:段落内容的对其方式 默认居左（建议使用样式）
                left 居左
                right 居右
                center 居中
				-->

3. 图片标签

<!-- 图片标签
   <img src="图片路径"/>
       设置图片的高度和宽度时，要注意单位，默认单位是px
       如："width=400"表示的是"width=400px"
       还可以设置图片所占父标签的百分比
       即："wifth=50%"表示的是图的宽度占父标签的50%
   
   图片路径
   	内网路径：
   		相对路径：
   			如：<img src="../img/屏幕截图%202021-02-24%20094605.png"  width="100%" />
   			../表示上一目录
   			./表示当前目录
   		绝对路径：文件在硬盘上的具体位置
   			如：C:\Users\xcz\Desktop
   	互联网路径：
   		前面必须加上 http://
   		如：http://www.baidu.com/xxx.png
-->

4. 列表标签

<!-- 
	列表标签
		无序列表：<ul> </ul>  用于定义一个无序列表
		有序列表：<ol> </ol>  用于定义一个有序列表
		列表条目：<li> </li>  用来定义列表中的条目，有序无序都可以用
	 -->

5. 超链接标签

<!-- 
	超链接标签
		<a> 内容体 </a> 
		超链接正常工作：
			必有属性： href:要跳转到的地方   内容体也不能少
		注意：
			1.a标签内容体，不仅仅可以是文字，也可以是其他内容，如图片
			2.a标签的href属性，不仅仅可以链接到html上，也可以链接到其他文件上，如图片
-->

6. 表格标签

<!-- 
	表格标签 
		<table> </table>  定义一个表格	属性：border 表格边框粗细 	width 表格宽度
		<tr> </tr>  定义表格的行
		<td> </td>  定义表中每一行中的单元格	
			属性：colspan 可以理解为单元格所占的列数（默认为1）
				 rowspan 可以理解为单元格所占的行数（默认为1）
				 这两个属性常用于单元格合并，合并时注意删除合并前的单元格
		<th> </th>  定义表中每一行中的表头单元格（和<td></td>的区别就是单元格中的内容会加粗居中）
		
		-->

7. 块标签

<!-- 
	块标签
		<div> 内容体</div>  块级的块标签，默认占满一行，适用于大量数据展示
		<span> 内容体 </span> 行级的块标签，不会自动换行，适用于展示少量数据
		
	 -->

三、表单标签

<!-- 
	表单标签 
		<form> </form> 定义一个表单，之后和表单相关的操作要在此标签内
		属性：
			action:将数据提交到何处，默认是本页
			method：以何种方式提交数据，默认是get
			get：把数据拼接到地址栏，敏感信息不安全，数据容量有限
			post：没有把数据拼接到数据栏，请求体，相对安全，理论上数据容量无限

		表单标签：<input />  表单输入标签之一，用户可以在该标签上，通过填写和选择，完成数据的输入
			type：设置该标签的种类
				text：文本框，默认
				password：密码，内容非明文
				radio： 单选框，在同一组内有单选效果
				checkbox：复选框，在同一组内有复选效果
				submit：提交按钮，用于控制表单提交数据
				reset：重置按钮，用于将表单恢复到默认状态
				file：附件框，用于文件上传
				button：普通按钮，需要和JS事件一起用
				hidden：隐藏域，一般用作提交服务器数据，但无需用户看到的数据
			name：单选框、多选框的分组		/	设置该标签的对应的参数名
						某个表单输入需要通过参数列表时，必须设置name属性
			value：设置该标签对应的参数值	/	作为按钮的名字
					value属性的设置策略：
						1. 文本框 密码框这样的表单输入，可以不强制指定value，因为用户可以自由输							入。注：可以用做记住密码等功能的实现
						2.单选框、复选框这样的表单输入项，必须指定value，因为用户无法自由输入，只能							选择，如果不知道value，那么提交上去的就只有on
			checked：设置单选框、复选框的默认选中状态
			disabled:设置该标签不可用，用户无法更改参数值，也不能提交参数值
			readonly:设置该标签为只读，用户无法手动更改参数值，但是参数值可以正常提交
	-->
<!-- 
	表单标签——textarea
		<textarea> </textarea>文本域标签 
			表单输入项标签之一，用户可以在该标签上，进行数据的输入
				name：设置该标签对应的参数名
		文本域标签和文本框标签的区别：
			1.文本框标签不能换行，文本域可以
			2.文本框的参数值是value属性，文本域是标签的内容体
	 -->

<!-- 
	表单标签——select
	<select> </select> 定义一个选择框
		name：设置该标签对应的参数名
		multiple：设置该标签全部显示，并且可以进行多次提交。默认为单选
	<option> </option> 为一个选择框添加一个选项
		value：设置需要提交的参数
		selected：设置默认的选中状态
		注意：option的内容体一般是用来展示
				参数值应该是option的value属性值
	-->