首页 > 其他分享 >html 第一天

html 第一天

时间:2024-07-31 15:52:56浏览次数:16  
标签:第一天 url 标签 跳转 html 参数 按钮

day1_html

1.html介绍

html写页面用的 页面中出现什么

超文本标记语言 除了文本 还有 连接 图片 声音 视频等内容 通过标签语法编写各种元素

2.html基本格式

<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8"/>
		<title>testpage</title>
	</head>
	<body>
		我做了一个毕业设计<input type="text" id="name" name="name" required minlength="4" maxlength="5" size="10" />
	</body>
</html>

html —head body

class和id在任何标签上都能加,用于标识和区分元素,他们是通配的。

3.浏览器分类

浏览器按内核分类

html css javascript解析器

浏览器
按内核区分
html css javascript

google内核  chrome edge
Chromium 
Chrome++ 
firefox 内核
苹果浏览器

浏览器兼容性问题 UI库中会处理

4.html语法

html使用标签显示数据
	标签语法结构
	双标签  有开始和结束  用来嵌套其他标签和内容  多于格式有关   <xxx></xxx>
	单标签  (自结束标签) 经常有特殊的独立功能                 <xxx/>
		
		标签属性  每个标签有自己的属性 通过属性 给标签做设置

5.html编写特点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--  
		  html不根据文本排版格式做排版  <br/>
		 1.编码时 注意格式与显示格式保持统一
		 2.空格 tab键 只识别为一个空格
		  
		 3.写代码时 不要与html标签格式产生冲突
		 4.html会尽力解析标签 如果解析不出 没有显示效果  
		   
		   转义符格式
		   &xxxxx;
		   &nbsp;  空格转义符 小空格
		   &ensp;   中空格
		   &emsp;   大空格
		   &lt;     小于
		   &gt;     大于
		   &quot;     引号
		   &copy;     公司符号
		   &amp;     &符号
		   
		   
		   注意转义字符的分号
		 -->
		春眠不觉晓<br/>
		处处蚊子咬<br/>
		蜀道难&nbsp;&nbsp;&nbsp;难于学java&nbsp;&nbsp;abilm&nbsp;&ensp;&emsp;<br/>
		a&lt;b c&gt;d &quot; &copy; &amp;
		
		
		
		
	</body>
</html>

6.排版标签

		 排版标签
		 html元素  占满一行 从上到下排列        块元素          block
		          从左到右排列               内联元素、行内    inline
		
		 p段落标签  带行间距
		 h1-h6 标题标签   占满一行 行间距 加粗 改字号 也带行间距
		 div   块标签     占满一行 不带行间距
		 
		 b      加粗   inline
		 strong 加粗   inline
		 
		 u     下划线  inline
		 em    斜体    inline
		 font color="red" 字体  颜色
		 
		 span  行内标签   定位文字时使用
		 
		 ol 有序列表
		 ul 无序列表
		 li 列表项
		 dl  自定义列表
		 dt  自定义标题
		 dd  自定义内容
		 
		 每个标签关注两个点
		  1.怎么写 单标签、双标签
		  2.怎么显示   块 、行内
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 排版标签
		 html元素  占满一行 从上到下排列        块元素          block
		          从左到右排列               内联元素、行内    inline
		
		 p段落标签  带行间距
		 h1-h6 标题标签   占满一行 行间距 加粗 改字号
		 div   块标签     占满一行
		 
		 b      加粗   inline
		 strong 加粗   inline
		 
		 u     下划线  inline
		 em    斜体    inline
		 font color="red" 字体  颜色
		 
		 span  行内标签   定位文字时使用
		 
		 ol 有序列表
		 ul 无序列表
		 li 列表项
		 dl  自定义列表
		 dt  自定义标题
		 dd  自定义内容
		 
		 每个标签关注两个点
		  1.怎么写 单标签、双标签
		  2.怎么显示   块 、行内
		 
		 
		 -->
		<h6>长生诀---看妞老头</h6> 
		<p>要想健康又长寿</p>
		<p>抽烟喝酒吃肥肉</p>
		<p>晚睡晚起不锻炼</p>
		<p>常与异性叫朋友</p>
		
		<div>常与异性叫朋友</div>
		<div>常与异性叫朋友</div>
		<div>常<span>与异性叫</span>朋友</div>
		<div>常
			<font color="red">
				与
				<b>异性</b>
				<strong>交</strong>
				<em>朋友</em>
			</font>
		</div>
		<!--   有序列表标签  -->
		<ol type="I">
			<li>英媒:越来越多美国人抛弃智能手机</li>
			<li>女子买家秀因显肚子被商家要求删除</li>
			<li>俄罗斯人挤爆三亚热</li>
			<li>成都九旬老人遭儿女遗弃?假的</li>
		</ol>
		<!--   无序列表标签  -->
		<ul type="square">
			<li>英媒:越来越多美国人抛弃智能手机</li>
			<li>女子买家秀因显肚子被商家要求删除</li>
			<li>俄罗斯人挤爆三亚热</li>
			<li>成都九旬老人遭儿女遗弃?假的</li>
		</ul>
		<!--   自定义列表标签  -->
		<dl>
			<dt>我要吃饭</dt>
			<dd>黄焖鸡</dd>
			<dd>黄焖鸭</dd>
			<dd>黄焖猪</dd>
		</dl>
	
	</body>
</html>

7a标签 超链接

两种作用
1 网页跳转
	href    跳转的地址  可以使用三种路径
	target  跳转方式  _self当前页面打开 _blank新页面打开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="/day1_html2/1html介绍.html">跳转到页面1</a> 这里是相对根路径
		<!-- %E8%94%A1%E5%BE%90%E5%9D%A4  url编码 -->
		<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=68018901_16_pg&wd=%E8%94%A1%E5%BE%90%E5%9D%A4&fenlei=256&oq=%25E4%25B8%25AD%25E5%259B%25BD%25E6%25B5%25B7%25E5%2585%25B3&rsv_pq=87bfc7350044ee2b&rsv_t=ba21EgqJqDfjv6pJjWmP%2FRCFndVXUBy%2B7Kphq%2F2XLq0uC6neCXq7d3qwLTtBcvv5LgxbHMc&rqlang=cn&rsv_dl=tb&rsv_enter=0&rsv_btype=t&rsv_sug3=49&rsv_sug1=21&rsv_sug7=101&rsv_sug2=0&inputT=10354&rsv_sug4=10354">看我的爱豆</a>

		这里是绝对路径
		好像用绝对路径不能访问本机的html文件
	</body>
</html>
2锚点 当前网页位置跳转
	href   
    #    跳转到顶部
	###  占位使用
	#id值 跳到指定元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<a href="/day1_html2/1html介绍.html" target="_blank">跳转到页面1</a>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<h1 id="aim1">今日推荐</h1>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<h1 id="aim2">更多新闻</h1>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<a href="#aim2">跳到顶部</a>
		
	</body>
</html>

用于定义超链接,从一个页面跳转到另一个页面

URL链接格式

http路径	
	使用hbuilder内嵌服务器运行页面
	可以通过http协议访问 
				
http://   127.0.0.1    :    8848           /day1_html2/xxx.html ?   key=value&key=value
协议       ip地址            端口号          资源地址 资源目录 资源文件       参数
										hbuilder内嵌服务器
保护本地文件  
只能访问到web服务器开放的目录
				

三种路径格式

1.相对路径    ../ 退出一级    ./当前目录   起点到终点经过的路径
2.相对根路径   从根开始 查找文件路径        指定终点文件的路径
				
在当前服务器中跳转
3.绝对路径    跳转到外部网站   要带上协议 才可以识别为绝对路径
				

域名地址关系

http与https区别

网站为了方便记忆 会使用域名  域名dns解析 与地址对应
				http           默认不带传输加密
				https          可以配置证书 传输数据时加密
				
				http://www.customs.gov.cn/     80
				https://www.baidu.com/         443
				
				网站会设置为默认端口号 方便用户访问

8图片标签

img标签 用来显示图片

src属性 引入图片的地址
src  图片引入的路径    三种路径
常见图片  jpg png gif 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--   常见图片  jpg png gif 
		       
		 src  图片引入的路径    三种路径
		 
		
		 
		 -->
		<a href="http://www.baidu.com">aaaaa</a>1111111
		<img width="100px" title="tupian" alt="这时图片" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
		
	</body>
</html>

a标签 套图片标签 可以让a标签更漂亮 固定组合

<a href="http://www.baidu.com">
    <img  src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
</a>

9表格标签

	表格标签 绘制二维表使用
	
	 table   表格      border="1" 表格粗细
	 caption 表名
	 tr      行
	 td      单元格     rowspan="2"  跨行   colspan="3"  跨列   align="center" 对齐方式
	 th      列头
	 
	 thead   表头部区域
	 tbody   表主体区域
	 tfoot   表底部区域
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	
		<table border="1">
			<caption>员工信息表</caption>
			<thead>
				<tr>
					<th>编号</th>
					<th>名称</th>
					<th>描述</th>
				</tr>
			</thead>
			
			<tbody>
				<tr>
					<td>1</td>
					<td>尼古拉斯·赵四</td>
					<td rowspan="2">大忽悠</td>
				</tr>
				<tr>
					<td>2</td>
					<td>弗朗斯希·刘能</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="3" align="center">联系电话:110</td>

				</tr>
			</tfoot>
			
			
			
		</table>
		
		
	</body>
</html>

10表单标签

收集用户数据 提交到服务器使用

	收集用户的信息 把传给服务端
	
	1.form标签 表单标签
	2.form设置参数    action 提交的地址
					 method="get" 
					 enctype="application/x-www-form-urlencoded"
	3.使用表单元素 收集用户信息  输入框 选择框 下拉列表。。。。
	  需要标记name属性 作为传递的key
	4.提交按钮	<input  type="submit"/> 触发提交	
action    设置提交的地址
method    设置提交方式 默认get
enctype   提交数据的格式
          enctype="application/x-www-form-urlencoded"   编码格式  url编码  使用字符传输
		  enctype="multipart/form-data"                 传字节数据  上传文件使用

get/post的区别

		method 发送方式
		get    参数会出现在url中
		       参数可以存为书签
			   参数会保留在历史记录中
			   只允许ascii字符  url编码自动转码
			   长度有限制  4k
			   get处理快
		
		post   参数不出现在url中  夹在请求报文中传递
		       参数不可以存为书签
			   参数会保留在历史记录中
			   可以发送多种格式  还可以发送字节
			   长度无限制
			   post处理稍慢
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- form标签 
		 method="get"     提交方式
		 enctype="application/x-www-form-urlencoded"   编码格式  url编码  使用字符传输
		 enctype="multipart/form-data"                 传字节数据  上传文件使用
		 
		
		收集用户的信息 把传给服务端
		
		1.form标签 表单标签
		2.form设置参数    action 提交的地址
						 method="get" 
						 enctype="application/x-www-form-urlencoded"
		3.使用表单元素 收集用户信息  输入框 选择框 下拉列表。。。。
		  需要标记name属性 作为传递的key
		4.提交按钮	<input  type="submit"/> 触发提交			 
		
		
		method 发送方式
		get    参数会出现在url中
		       参数可以存为书签
			   参数会保留在历史记录中
			   只允许ascii字符  url编码自动转码
			   长度有限制  4k
			   get处理快
		
		post   参数不出现在url中  夹在请求报文中传递
		       参数不可以存为书签
			   参数会保留在历史记录中
			   可以发送多种格式  还可以发送字节
			   长度无限制
			   post处理稍慢
			   
			   
		
		请求数据(请求报文)
		请求行
		请求头
		请求体
		
		get方式  参数会出现在url中  请求体没有数据
		post方式 参数不出现在url中  传输数据在请求体中
		
		
		-->
		<form action="/myserver" method="get">
			<input type="text" name="username"/><br />
			<input  type="submit"/>
			
		</form>
		
		
	</body>
</html>

11表单元素

	 ## input 表单输入元素
		type="text"   		文本框
		maxlength="6"            最大长度
		placeholder="username"   输入提示
		readonly                 只读
		disabled                 禁用
		
		type="password"    密码框
		maxlength="6"            最大长度
		placeholder="username"   输入提示
		readonly                 只读
		disabled                 禁用
			
		type="radio"       单选
		name="gender"      分组	
		value="1"          选项值
		
		type="checkbox"       多选
		name="gender"      分组
		value="1"          选项值
		
		type="file"       选文件 做文件上传


​ 下拉列表

​ 北京
​ 上海
​ 深圳

		</select>
	
	多行文本
		<textarea rows="10" cols="60"></textarea>


​ 按钮
​ 提交按钮
​ 重置按钮
​ 自定义按钮
:文本框按钮
密码按钮

		<button type="submit">btn提交</button>    提交按钮
		<button type="reset">btn重置</button>	  重置按钮
		<button type="button">btn自定义按钮</button> 自定义按钮
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	<table>
		<form action="/myserver">
			<tr>
				<td align="right"> //文档中的一部分向右对齐
					<label for="username">用户名:</label> 这里的label的意思是用户点击用户名,光标就会跳转到对应的输入框中,因为它和输入框id中的内容一样
				</td>
				<td><input id="username" type="text" name="username" name是为了与后端发送数据 value="1111" 设置默认值maxlength="6"设置最大输入的字数 placeholder="username"   /></td>
			</tr>
			<tr>
				<td align="right">手机号:</td>
				<td><input type="text" name="phone" maxlength="11" placeholder="phone"   /></td>
			</tr>
			<tr>
				<td align="right">密码:</td>
				<td><input type="password" name="password" maxlength="8" placeholder="password"   /></td>
			</tr>
			<tr>
				<td align="right">性别:</td>
				<td>
					<input id="gend1" type="radio" name="gender" value="1"  /><label for="gend1">男</label> 
					<input type="radio" name="gender" value="2" checked/>女 当两个设置问为name="gender" 后就不能同时选择,相当于将他们两个绑定在一起


添加checked后就说明刚开始女选项默认是被选中的
                    
                    对于 "button"、"reset" 和 "submit" - 它定义按钮上显示的的文本
对于 "text"、"password" 和 "hidden" - 它定义输入字段的初始(默认)值
对于 "checkbox"、"radio" 和 "image" - 它定义与输入相关联的值(这也是提交时发送的值)
				</td>
			</tr>
			<tr>
				<td align="right">兴趣:</td>
				<td>
					<input id="gend1" type="checkbox" name="hobby" value="1" checked /><label for="gend1">抽烟</label> 
					<input type="checkbox" name="hobby" value="2"/>喝酒
					<input type="checkbox" name="hobby" value="3" checked/>烫头
				</td>
			</tr>
			<tr>
				<td align="right">头像:</td>
				<td>
					<input type="file"/>
				</td>
			</tr>
			<tr>
				<td align="right">其他:</td>
				<td>
					<input type="color"/>
				</td>
			</tr>
			<tr>
				<td align="right">出生地址:</td>
				<td>
					<select name="area" >
						<option value="001">北京</option>
						<option value="002">上海</option>
						<option value="003" selected>深圳</option>
						
					</select>

				</td>
			</tr>
			
			<tr>
				<td align="right">备注:</td>
				<td>
					<textarea rows="10" cols="60"></textarea>
					
					
				</td>
			</tr>
			
			
			<tr>
				<td></td>
				<td><input type="submit"/>
				<input type="reset"/>
				<input type="button" value="我的按钮"/></td>
			</tr>
			<tr>
				<td></td>
				<td><button type="submit">btn提交</button>
				<button type="reset">btn重置</button>
				<button type="button">btn自定义按钮</button></td>
			</tr>
			
			
			
		</form>
		</table>
		
	</body>
</html>

学习前端的目的

web应用中的显示部分

后端提供的数据

传递图片的三种路径

输入框中 placeholder=“输入框占位符用于提示”
radio圆形选择框中 checked表示默认选中 两个radio属性中必须添加 name=" " 否则会两个都被选中
注册 submit当点击按钮后就会提交表单,页面不显示
重置 reset当当点击后页面会回复到初始的状态

input[type=‘submit’]{background-color: red} 对于type是submit的键进行设置

是一个块,

是一个段落,p标签会在文字上下增加间距,

本身没有什么效果,只是用于包裹其它内容,划分不同区块

标签:第一天,url,标签,跳转,html,参数,按钮
From: https://blog.csdn.net/m0_56975565/article/details/140359970

相关文章

  • 界面控件DevExpress WinForms,支持HTML & CSS提升用户体验(一)
    DevExpressWinForms现在可以利用HTML/CSS强大的功能,帮助受DevExpress驱动的WinForms应用程序引入现代的UI元素和用户体验!P.S:DevExpressWinForms拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应......
  • 前端练习<Html&CSS>——照片墙(附完整代码及实现效果)
    这个小练习也来源于b站up小K师兄,大家可以通过下面的链接学习哦~up讲的非常详细。纯CSS写一个简单酷炫的照片墙效果~先看一下这个照片墙的效果:1.鼠标没有放到图片上时,照片同比例,每张照片都有倒影的效果。2.然后是鼠标放置图片上的效果,图片被放大,其他照片旋转缩放,这里需要注......
  • 05HTML+CSS
    今日学习了CSS样式中的其他东西。复合选择器定义:由两个或多个基础选择器,通过不同的方式组合而成。作用:更准确、更高效的选择目标元素(标签)。后代选择器后代选择器:选中某元素的后代元素。选择器写法:父选择器子选择器{CSS属性},父子选择器之间用空格隔开。<style>divsp......
  • 暑期学习C语言第一天完整版
    回顾今日成果:一、scanf语句的掌握我们可以看一看这道题,只是一个简单的整数输入、输出。在这之中,我们就可以利用scanf、printf语句,在使用scanf语句我们需要注意:scanf(“%d”,&a);printf("%d",a);其中关键点为,在使用scanf时,%d在双引号里面和&a中&是我们容易遗忘。二......
  • html+css 实现3D分层悬停按钮
    前言:哈喽,大家好,今天给大家分享html+css绚丽效果!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦......
  • Jmeter+Ant生成优化HTML的接口测试报告
    为什么要这么做?在实际测试场景遇到这样一种情况,开发重构了接口实现逻辑,该接口主要用于查询操作,接口的入参有上千种可能,查询出来的内容很多,需要与原来接口比对,检查是否一致那此时,单纯用jmeter跑一遍的话,很难直观的看到测试之后的结果,所以就需要这样一种报告来展示,供开发修改在这......
  • 在 html 上添加 json 数据(数据包含多种特殊字符),使用 JSON.stringify 读取 error
    letjsonObj=[{ "Name":"test" "Attach":"www!@#$%^&*(){}|:\"<>?,./;'[]\\"}]lethtml=jsonObj.map((i,v)=>{ letjsonStr=JSON.stringify(jsonObj) return`<trdata='${json......
  • 了解Web标准,HTML 语法规范,使用 HBuilder X 构建文档骨架,HBuilder X 生成骨架标签新增
    Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。遵循Web标准可以让不同的开发人员写出的页面更标准、更统一外,还有以下优点:1.让Web的发展前景更广阔。2.内容能被更广泛的设备访问。3.更容易被搜寻引擎搜索。......
  • CSS笔记总结(Xmind格式):第一天
    Xmind鸟瞰图:简单笔记总结:css知识总结:1.css使用方式:行内样式:直接在html标签中添加style属性内部样式表:在文件内部添加的样式外部样式:单独的css样式文件,通过link标签引入使用@import导入的外部样式:会在html加载完成之后才开始使用,且必须在style最上方使用2.字体样式:字......
  • html中javascript点击事件后显示或隐藏某些元素时需要点击两次才生效的原因分析和优化
    html中javascript点击事件后显示或隐藏某些元素时需要点击两次才生效的原因分析和优化。原来的代码如下:<divclass="cardcardcol-sm-6col-md-4col-xl-2col-lg-2justify-content-centerbg-secondary-subtle"id="tools-trigger"><ahref="javascript:vo......