HTML语言笔记

爱吃大猫的小鱼

已于 2024-06-15 20:07:44 修改

阅读量324

点赞数 1

文章标签：笔记

于 2024-06-15 20:00:56 首次发布

本文链接：https://blog.csdn.net/Gou_Hao_Liang/article/details/139707429

版权

结构

C/S结构

Client+Sever 客户端+服务器端

需要在电脑上安装的重终端，或一个特定的客户端才能运行。

B/S结构

Browser+Server 浏览器+服务器

JAVA主要后端语言，用于开发服务器端程序。

网页开发

学习内容：

语言：

html

css

javaScript

两个框架：

VUE.js

ElementUI UI user interface 用户界面

HTML语言

1.概述：

HTML（）指超文本标记语言

文本：文字字符

超文本：页面内可以包含图片，链接的一系列网页内容。

标记：标签，标识

html中的标记指的就是标签。

2.骨架标签

<!--
	html注释
	<!DOCTYPE html>  声明html语言的版本信息，为html5版本，告诉浏览器以html5标准解释运行
-->
<!DOCTYPE html>
<!-- HTML骨架标签 -->
<!--
	html标签是网页中的根标签，所有内容都应该写在此标签中
-->
<html>
	<!-- 头标签 -->
	<head>
		<meta charset="utf-8" /><!-- 网页字符集 -->
		
		<meta name="keywords" content="手机，家电"/><!-- 设置网页关键字，让搜索引擎查找 -->
		<title>我的第一张网页</title><!--网页标题-->
		<link href="img/baidu.ico" rel="icon" />
	</head>
	<!-- 身体标签，用来写网页内容的 -->
	<body>
		<!--
			标签结构和写法
			<标签名>
			<开始标签>  </结束标签>  闭合标签（双标签）
			
			<标签名  属性=" " />完成一个特定的设置功能，没有标签体，  自闭和标签（单标签）
			<meta charset="utf-8" />
			
			<br/>  换行标签
			<b></b> 字体加粗
			
			标签中可以有属性，可以改变标签原有显示风格
				属性写在标签的开始标签中
				一个标签可以有多个属性
				属性名="值"
			例如：
			<body text="red" bgcolor="black">
			
		-->
		<b><font size="10">百度</b> <br/><b><font size="6">腾讯</b>
		 <br/>
		<font color="blue" size="4"> 
		<b>
			<a href="https://www.qq.com/">
				腾讯网
			</a>
		</b>
		</font>
	</body>
</html>

3.标签

<body>
		<!-- 题目标签
			一个标签独占一行
			align="left"控制内容在本行内的水平对齐方式
		 
		 -->
		 <b>题目标签</b>
				<h1 align="left">一级标签</h1>
				<h2 align="center">二级标签</h2>
				<h3 align="right">三级标签</h3>
				
		<!--
			p段落标签
			一个p标签，表示一个独立的段落
			段落与段落之间有间隔
		-->
		<b>p段落标签</b>
			<p>
				啥黄金三撒娇拿手机你手机阿大吉萨达合计
			</p>
			<p>
				换手机阿昆达就打算你等会
			</p>
		<!--
			换行标签
			<br/> 标签名
		-->
		<b>无序列表</b>
		<!--
			无序列表标签
			<ul>  
			<li>列表行1</li>
			<li>列表行2</li>
			 </ul>
		-->
			<ul>
				<li>列表行1</li>
				<li>列表行2</li>
				<li>列表行3</li>
				<li>列表行4</li>
			</ul>
		<!-- 有序列表 -->
			<b>有序列表</b>
			<ol>
				<li>列表行1</li>
				<li>列表行2</li>
				<li>列表行3</li>
				<li>列表行4</li>
			</ol>
			<!-- 
			type="*" 表示自动排序时第一位的是*，然后按照*依次排序
			 -->
			<ol type="A">
				<li>列表行1</li>
				<li>列表行2</li>
				<li>列表行3</li>
				<li>列表行4</li>
			</ol>
	</body>

4.超链接标签

           href (Hypertext Reference 超文本引用)规定链接指向UIL页面
           target 打开位置，
           "_self"默认打开位置，在当前窗口打开新的网页
           "_blank" 创建新窗口打开。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 table 表示一个表格
		 tr 表示一行
		 th  表示一个单元格，还是表头，内容会加粗，并且居中
		 td  表示一个普通单元格
		 表中数据只能写在单元格中。
		 cellpadding 内边距，内容到表格边界的距离
		 cellspacing  外边距，单元格到单元格之间的距离
		 -->
		<table border="1" width="400" cellpadding="10" cellspacing="0">
			<!-- 行 -->
			<tr >
				<th>姓名</th>
				<th wide="100">班级</th>
				<th>年龄</th>
				<th>性别</th>
				
				
			</tr>
			<tr height="40">
				<!-- 列 -->
				<td>王乐</td>
				<td>计算机2202</td>
				<td>18</td>
				<td>女</td>
				
			</tr>
			<tr>
			<td>朱磊</td>
			<td>计算机2201</td>
			<td>22</td>
			<td>男</td>
			</tr>
			
		</table>
	</body>
</html>

5.组件

就一个区域，拥有许多输入和选择的组件
			让用户可以输入选择信息，最终将数据提交到服务器端
			<form action="财务报表.html" method="get">
			action=“服务器地址” method="请求方式"
			input
			type="text" 单行输入文本框
			name="accound" 定义组件名 向后端提交用
			value=""组件的值
			readonly  设置组件只读，不能修改，提交表单时，可以被提交到服务器端
			placeholder="请输入用户名"输入框提示信息
			disabled 禁用组件，不会提交内容到服务器
			
			<input type="submit"/> 提交按钮
			
			type="password" 密码框
			type="radio" 单选框
				单选框通过name分组，name相同的为一组
				checked 属性可以为默认选中一项
			type="checkbox"多选框
			type="file" 文件选择框
			下拉选择组件
			checked 属性可以为默认选中一项
			<select>
			<option>请选择</option>
			<option>选择1</option>
			<option>选择2</option>
			</select>  最终提交选中的选择值
			<textarea></textarea>多行文本框
			<input type="reset"/> 重置按钮，将表单重置到默认值
			
			<input type="button" value="登录" onclick=""/>
			设置按钮，给出名字， onclick并触发事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<form action="财务报表.html" method="get">
			账号:<input type="text" name="accound" value="" placeholder="输入账户信息"/><br />
			密码:<input type="password" name="password"/><br />
			性别:<input type="radio" name="gender" value="男"/ checked> 男
				 <input type="radio" name="gender" value="女"/> 女
				 <br />
			课程:<input type="checkbox" name="course" value="java"/>java
				<input type="checkbox" name="course" value="python"/>python
				<input type="checkbox" name="course" value="c"/>c
				<input type="checkbox" name="course" value="c++"/>c++
				 <br />
			附件:<input type="file" name="file"/>
			<br />
			省份:<select>
				<option value="100">请选择</option>
				<option value="101">北京</option>
				<option value="102">上海</option>
				<option value="103" selected>陕西</option>
			</select>
			<br />
			地址:<textarea rows="5" cols="30"></textarea>
				 <br />
				 
			<input type="submit" value="保存"/><br />
			<input type="reset"/>
			<input type="button" value="登录" onclick=""/>
			
		</form>
		
	</body>
</html>