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.图片标签

html 复制代码
<!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.超链接标签

html 复制代码
<!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.列表标签

html 复制代码
        <!--列表标签:无序列表ul ;有序列表ol-->

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

4.表格标签

html 复制代码
   <!--表格标签组成结构: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.表单标签

html 复制代码
<!--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事件。

表单标签实例:

html 复制代码
<!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>


备注:有错误请指正!!!!!

相关推荐
麻瓜也要学魔法1 分钟前
链路状态路由协议-OSPF
网络
Estar.Lee7 分钟前
查手机号归属地免费API接口教程
android·网络·后端·网络协议·tcp/ip·oneapi
y先森33 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy33 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891136 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
傻啦嘿哟1 小时前
代理IP在后端开发中的应用与后端工程师的角色
网络·网络协议·tcp/ip
sun0077001 小时前
ubuntu dpkg 删除安装包
运维·服务器·ubuntu
Red Red1 小时前
网安基础知识|IDS入侵检测系统|IPS入侵防御系统|堡垒机|VPN|EDR|CC防御|云安全-VDC/VPC|安全服务
网络·笔记·学习·安全·web安全
oi772 小时前
使用itextpdf进行pdf模版填充中文文本时部分字不显示问题
java·服务器