HTML入门

最新推荐文章于 2023-05-03 22:19:26 发布

ff张岩

最新推荐文章于 2023-05-03 22:19:26 发布

阅读量36

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_52750693/article/details/130198019

版权

HTML

引入
HTML概述
HTML基本语法
基本常用标签
- - 超链接<a></a>
  - 特殊符号转移
表格
表单

引入

前面我们学习了JavaSE和数据库
我么为什么不使用GUI窗口当作界面，而是使用网页作为界面
这里不得不提出两种程序架构B/S和C/S架构
B/S架构Browser Server通过浏览器打开网页，与服务器进行交互
C/S机构Client Server通过下载客户端与服务器进行交互
Java被定性为后端语言，只在服务器端提供支持，窗口界面不是Java的强项
总结：在以前网络不太发达的时候，网速十分缓慢，使用浏览器加载需要的数据非常缓慢，而现在网络十分发达，就算使用网页加载数据也轻易不会卡顿（校园网除外），所以现在B/S架构十分受欢迎，且不占用用户存储空间，只需一个地址栏便可以访问所有的网站，十分便捷

HTML概述

HTML指的是超文本标记语言（HyperText Markup Language）。
超文本：是指页面中可以包括图片，链接，声音，视频等内容
标记：（通过标记符号来告诉浏览器网页内容如何显示）
用HTML语言把我们需要显示的的内容显示在浏览器上，但HTML语言本身并不显示
web浏览器会根据不同的HTML标签，解析我们看到的网页

HTML基本语法

声明

html5的文档声明：<!DOCTYPE HTML>
如果不声明解析网页时会产生一些不可预期的行为，我们应当避免发生。
Head标签包含了所有头部标签
头部区域的标签为：<title><style><meta><link><script><base>
<title>标签可定义网页的标题
<meta>标签提供有关页面的元信息（meta-imformation），比如针对于搜索引擎和更新频度的描述和关键词。
标题处添加图标
<link real=“icon” href=“ico地址”>

HTML注解：

<!- -注释内容- ->注释后内容不会显示在网页上

标签属性

标签属性：标签可以拥有属性。属性进一步说明了该标签的显示或使用特性。

属性的格式：属性名=“属性值”
属性的位置：<标签名属性名=“属性值”>标签内容</标签名>
添加多个属性：<标签名属性名=“属性值” 属性名=“属性值”>标签内容</标签名>

基本常用标签

标题标签<h1></h1>…<h6></h6>
段落标签<p></p>
列表
无序列表<ul><li></li></ul>
有序列表<ol><li></li></lo>

超链接<a></a>

a标签：HTML 使用超级链接与网络上的另一个文档相连，通俗地说就是通过连接来访问其他网络资源

<a href="http://www.baidu.com" target="_blank">百度</a>
<!-- 
	href:(HyperText Reference超文本引用)规定链接指定的页面的URL(页面地址)
	target:默认值为_self
	如果target="_blank"，从新网页打开链接
-->

图像标签<img></img>

特殊符号转移

在HTML中预留了一些字符。这些预留字符是不能在网页中直接使用的。
比如：< 和 >，我们不能在页面中使用< 和 >，因为浏览器会将他们解析为HTML标签。为了使用这些预留字符，我们必须在HTML中使用字符转义。

* 小于号< &lt;
* 版权(C) &copy;
* 大于号> &gt;
* 商标(TM) &trade;
* 空格 &nbsp;
* 注册商标(R) &reg;

表格

表格的基本构成标签

table标签：表格标签
tr标签：表格中的行
th标签:表格的表头
td标签：表格单元格

表格的基本结构

<table>定义表格
	<tr>定义表行
		<th>定义表头</th>
	</tr>
	<tr>
		<td>定义单元格</td>
	</tr>
</table>

表格属性和表格合并

表格属性：

1.Border(边框) 属性：border="Xpx"
2.background(背景图像)属性：background="图片位置"
3.bgColor(背景颜色)bgColor="颜色"
4.width,height属性
5.cellpadding(填充)
6.cellspacing(间距)
7.align：表格的位置由<table>元素的属性决定，可选值有left,center,right
8.valign：表格中的文字的位置是由<td>的align和valign决定的，valign可选值包括top,middle,bottom

表格合并：

colspan属性(跨列合并单元格):colspan="number"
rowspan属性(跨行合并单元格):rowspan="number"

表单

form标签：表单
网页表单中有许多可以输入或选择的组件，用户可以在表单中填写数据，最终提交表单，把客户端的数据提交至服务器
一张表单：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!-- 
			<form>表示一个表单，一个表单中可以有多个组件
			action=“后端程序的地址	javaEE”
			method="get/post"	请求方式
			<input>输入标签
				type="text"单行文本输入框
					name="名称",向后端提交的键
					value=""，可以不写，向后端提交时，会提交最后的值
					readonly="readonly"只读，可以提交数据
					disabled="disabled"禁用，不可以提交数据
					readonly和disabled好像效果一致，但是请看提交后的地址栏
					例如：https://www.baidu.com/?username=readonly,
					readonly仍然回想后端提交数据，而disabled相当于直接禁用了键导致无法提交
					placeholder = "请输入用户名"，默认提示信息
				type="radio"	单选框
				type="checkbox"	多选框
		 -->
		 <!--
		     选择性的组件要给默认的value，因为无法输入
		 	单选按钮后的字没有任何跟这个标签没有任何直接关系，那如何知道最后向
		 	后端提交的是哪个呢，通过value值来分别
		 	checked="checked"默认选中
		  -->
		<form action="https://www.baidu.com" method="get">
			用户名<input type="text" name="username" value="readonly" readonly="readonly"/>
			密码<input type="text" name="password" value="disabled" disabled="disabled"/>
			<br>
			<!-- 单选框，必须将一组单选框name键的属性设为同样的，否则可以多选-->
			性别<input type="radio" name="gender" value="男" checked="checked"/>男
				<input type="radio" name="gender" value="女"/>女<br>
				<!-- 
					多选框 name也必须值一致，此时不是为了互斥，而是为了编组，试想一下
					万一下面还有其他多选框种类
				-->
			爱好<input type="checkbox" name="hobby" value="睡觉1" />睡觉1
				<input type="checkbox" name="hobby" value="睡觉2" />睡觉2
				<input type="checkbox" name="hobby" value="睡觉3" />睡觉3
				<input type="checkbox" name="hobby" value="睡觉4" />睡觉4<br>
			上传头像<input type="file" name="file" /><br>
			<!-- 
				下拉列表框在select标签内部为那么属性赋值，如果部位option赋值，会用标签中的
				值作为value提交
				option中的value的值是真正送入后端的数据，在数据库一般会使用编号关联
				但在网页上以显示更具影响力的值
			 -->
			省份<select name="province">
				<option value="110">北京</option>
				<option value="111">上海</option>
				<option value="112">广州</option>
				<option value="113">深圳</option>
			</select><br>
			<!-- 文本域标签-->
			地址<textarea rows="" cols="" name="address"></textarea>
			<!-- 提交按钮，可以触发表单的提交动作，可以通过value修改按钮上的字符-->
			<input type="submit" value="提交	"/>
			<!-- 重置按钮 -->
			<input type="reset" />
			<!-- 普通按钮，用来触发事件 -->
			<input type="button" value="按钮" />
		</form>
	</body>
</html>

ff张岩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门

HTML指的是超文本标记语言（HyperText Markup Language）。超文本：是指页面中可以包括图片，链接，声音，视频等内容标记：（通过标记符号来告诉浏览器网页内容如何显示）用HTML语言把我们需要显示的的内容显示在浏览器上，但HTML语言本身并不显示web浏览器会根据不同的HTML标签，解析我们看到的网页。
复制链接

扫一扫