HTML快速入门--第一节--五个基本标签

一、网络编程的三大基石

1.1 url 统一资源定位符：

网址:整个互联网中可以唯一且准确的确定一个资源的位置 (url项目外)

网址:https://www.baidu.com/

https://www.baidu.com/
协议://ip+端口/项目名/页面名
协议:交通法规获取资源 ip+端口（域名）

1.2 uri 统一资源标识符：

下方项目中的用到的。

2.1 http协议：

类似交通法规；会规定：长度，位置，名称....

2.2 http协议的特性：

1.单向性：只有用户先发送请求，服务器才可以给出响应
2.长链接：http1.1版本之后改成长链接，硬件决定软件发展，长链接占内存
短链接：暂不了解
3.无状态：网络通信，互联网不做数据记录，只做数据传递
技术点：服务端做记录，session
客户端做记录，cookie 本地

3 html 超文本标记语言/超文本标签语言

html就是在学各种各样的标签：学各种标签（除了文字文本，还有图片 <> (标签)）

二、介绍标签

1.图片标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我的页面</title><!--页面标题-->
		<link rel="stylesheet" href="css/10.9.css"/><!--引入css代码-->
        <style>   </style><!--css代码-->
	    <script>  </script><!--用来 写js代码-->
        <base/> <!--逻辑上更改资源位置-->
	</head>
	<body>
		<!--
			图片标签img
			src="url/uri"
			title="鼠标悬浮显示的文本内容"
			alt="图片加载不出来的时候，显示的文本内容"
			< />单标签
		    <></ >双标签
		-->
	<img src="https://n.sinaimg.cn/news/1_img/upload/8deb4961/13/w2048h1165/20241008/14c1-4f411519203eac6529da23cc4804fa5d.jpg" title="我是qq"/>
			<img src="https://n.sinaimg.cn/news/1_img/upload/8deb4961/13/w2048h1165/20241008/14c1-4f411519203eac6529da23cc4804fa5d.jpg"/>
				<img src="img/cake.jpg"
					 title="我是QQ"
					 alt="我是qq"/>
</body>
</html>

2.超链接标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我的页面</title><!--页面标题-->
	</head>

	<body>

		 <!--超链接标签 a 
			href="url/uri"
			wd表示赋值给搜索框
		-->
		<a href="https://www.baidu.com/s">点击跳转百度</a>
		<a href="https://www.baidu.com/s?wd=王健林">王健林</a>

        <!--点击图片跳转百度:用超链接标签 包含 图片标签-->

	    <a href="https://www.baidu.com/s">
	    <img src="img/1.png" title="鼠标悬浮属性"  />点击跳转百度
        </a>

    </body>
</html>

3.列表标签


        <!--列表标签：无序列表ul ;有序列表ol-->

        <ul>把大象装进冰箱的几个步骤：
		<li>打开冰箱</li>
		<li>把大象装进冰箱</li>
		<li>关上冰箱门</li>
		</ul>
		
		<ol>把大象埋起来的几个步骤：
		<li>打开冰箱</li>
		<li>把大象拿出来</li>
		<li>挖坑</li>
		<li>把大象放进坑里</li>
		<li>埋上土</li>
		</ol>

4.表格标签

   <!--表格标签组成结构：table标签
                        表格是由行组成的
                        行是由单元格组成的
    1.生成表格：table[border="lpx"]>tr*4>td*3  (四行三列) Tab键自动生成表格
    2.合并表格：colspan="2" 向右合并2个格  rowspan="2"向下合并2个格   
   -->
    <table border="lpx">
    <caption> xx单位印章使用审批单</caption><!--表格标题-->
		<tr>
			<td>时间</td>
			<td></td>
			<td>数量</td>
			<td></td>
			<td>经办人</td>
			<td></td>			
		</tr>
		<tr>
			<td>单位及事由</td>
			<td colspan="5"></td>

		</tr>
		<tr>
			<td>部门负责人意见</td>
			<td colspan="2"></td>
			
			<td>主管副职意见</td>
			<td colspan="2"></td>

		</tr>
		<tr>
			<td>主要领导意见</td>
			<td  colspan="5"></td>></td>
		</tr>
	</table>

5.表单标签

<!--5.表单标签 form-->
<form action="https://www.baidu.com/s" method="get">
    <!-- 用户名输入框 -->
    用户名：<input name="wd" /><br />

    <!-- 密码输入框 -->
    密码：<input type="password" name="aaa" /><br />

    <!-- 性别选择 -->
    性别：<input type="radio" name="sex" value="1" checked="checked" />男
          <input type="radio" name="sex" value="0" />女<br />

    <!-- 最喜欢的水果选择 -->
    您最喜欢的水果：<input type="checkbox" name="ft" value="香蕉" />香蕉
                     <input type="checkbox" name="ft" value="苹果" />苹果
                     <input type="checkbox" name="ft" value="橘子" />橘子<br />

    <!-- 出生年份选择 -->
    出生年份：
    <select name="year">
        <option>请选择</option>
        <option>2000</option>
        <option>2001</option>
        <option>2002</option>
        <option>2003</option>
    </select><br />

    <!-- 文件上传 -->
    文件域：<input type="file" name="fname" /><br />

    <!-- 隐藏字段 -->
    隐藏域：<input type="hidden" name="hi" value="重要数据" /><br/>

    <!-- 普通按钮 -->
    普通按钮：<input type="button" value="普通按钮" onclick="JavaScript:alert('error')" /><br/>

    <!-- 时间选择 -->
    时间控件：<input type="date" name="dt" /><br />

    <!-- 提交按钮 -->
    <input type="submit" value="百度一下" />
</form>

1.action 属性指定了表单数据将被发送到的URL。

（action 属性是：HTML 表单 (<form>) 标签的一个重要属性，用于指定表单数据提交的目标 URL。当用户提交表单时，表单中的数据会被发送到 action 属性指定的 URL。action 属性详解：action 属性定义了表单数据提交的 URL。如果 action 属性为空或未设置，则表单数据会提交到当前页面的 URL）

2.method 属性设为 "get"，意味着表单数据将会附加在URL后面作为查询字符串发送。

3.name 属性定义了表单元素的名称，这是服务器端脚本用来识别表单数据的方式。

4.type 属性定义了输入字段的类型

（例如：文本框 (text)、密码框 (password)、单选按钮 (radio)、复选框 (checkbox)、下拉列表 (select)、文件上传 (file)、隐藏字段 (hidden)、日期选择 (date) 等。）

5.value 属性定义了输入字段的值，或者是在单选按钮和复选框被选中时将被发送给服务器的值。6.checked 属性用于指定某个单选按钮或复选框是否默认被选中。
7.onclick 属性定义了点击按钮时触发的JavaScript事件。

表单标签实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			td{
				width: 100px;
			}
		</style>
	</head>
	<body>
	<thead>用户注册</thead><br/>
	<table border="lpx">
		<tr>
			<td>用户名：</td>
			<td> <input name="wd" placeholder="6-18位数字" /></td>
		</tr>
		<tr>
			<td>密码：</td>
			<td><input type="password" name="aaa" placeholder="6-18位数字"/><br /></td>
		</tr>
		<tr>
			<td> 确认密码：</td>
			<td> <input type="password" name="aaa" placeholder="6-18位数字"/><br /></td>
		</tr>
		<tr>
			<td>   性别:</td>
			<td> <input type="radio" name="sex" value="1" checked="checked"/>男
				 <input type="radio" name="sex" value="0"/>女
			</td>
		</tr>
		<tr>
			<td> 爱好：</td>
			<td>
				<input type="checkbox" name="ft" value="跑步" />跑步
				<input type="checkbox" name="ft" value="唱歌"/>唱歌
				<input type="checkbox" name="ft" value="看书"/>看书
			</td>
		</tr>
		<tr>
			<td style="height: 100px;">个人描述：</td>
			<td	style="height: 100px;"></td>
		</tr>
		<tr align="center">
		<td colspan="2">
		<input type="button" value="注册" onclick="JavaScript:alert('注册成功')"/>
	    <input type="button" value="登录" onclick="JavaScript:alert('登录成功')"/>
			</td>
			
		</tr>
	</table>
	
	</body>
</html>