web day01(html,form,table)

最新推荐文章于 2024-04-25 20:22:26 发布
最新推荐文章于 2024-04-25 20:22:26 发布
阅读量151 收藏
点赞数 1
分类专栏： web 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yygyj/article/details/110881831
版权

课前讲解
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
HTML
1、HTML的概述
a.HTML不是一门编程语言是一门标签语言
b.HTML本质是一个文档
c.HTML是由标签组成的文档
d.HTML Hyper Text Markup Language(超文本语言)
2、HTML的基本结构

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>我的第一个页面</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		头部分：书写配置信息，书写在head中的内容会优先加载
		
	</HEAD>
	<BODY>
		体部分：<br/>书写页面 构成的标
		签
		<!--空格和回车在页面中显示的是一个空格-->
		<hr/>
		&lt;hr&gt;是一个画线标签<br/>
		<font color="red">我是一个font</font><br/>
		&apos;曹阳&apos;老师&quot;一米五&quot;
	</BODY>
</HTML>

3、HTML语法
a.标签可以书写成标签对的形式，由起始标签和结束标签组成<起始标签></结束标签>
b.标签可以书写成自闭标签的形式

<br/>------换行符
<hr/>------画一条线

c.html中的多个空格、制表符和回车都会合并成一个空格在页面中显示
d.标签属性由属性名和属性值组成
属性名=“属性值”
注意：单引号和双引号都可以使用，必须使用英文的符号
e.转义字符

<   &lt;
>   &gt;
"   &quot;
'   &apos;
空格  &nbsp;

f.HTML注释

<!--HTML注释-->

4、HTML标签
a.字体标签

<font>font标签</font>

属性：

color属性颜色名称red green
Hex#AAAAAA六位十六进制数值
rgbrgb(0,255,255)
size属性1~7 默认大小为3

b.标题

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>html标签</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	</HEAD>
	<BODY>
		<font color="red" size='7'>我是一个font</font><br/>
		<h1 align="left">我是一级标题</h1>
		<h2 align="center">我是二级标题</h2>
		<h3 align="right">我是三级标题</h3>
		<h4>我是四级标题</h4>
		<h5>我是五级标题</h5>
		<h6>我是六级标题</h6>
		<h7>我是七级标题</h7>

		<ol>
			<li>刘备</li>
			<li>关羽</li>
			<li>张飞</li>
		</ol>
        <ul type="disc">
	        <li>春</li>
	        <li>夏</li>
	        <li>秋</li>
	        <li>冬</li>
        </ul>
        <ul type="square">
	        <li>春</li>
	        <li>夏</li>
	        <li>秋</li>
	        <li>冬</li>
        </ul>
        <ul type="circle">
	        <li>春</li>
	        <li>夏</li>
	        <li>秋</li>
	        <li>冬</li>
        </ul>
        <img src="C:/Users/16902/Desktop/img/1.jpg" alt="此处是个女孩" width="500px" height="500px"/><br/>
        <img src="C:/Users/16902/Desktop/img/20.jpg" alt="此处是个头像" width="50%" height="50%"/>
	</BODY>
</HTML>

属性：

align对齐方式
left左对齐
center居中对齐
right右对齐
justify自适应

c.列表标签
有序列表

<ol>
<li></li>
<li></li>
<li></li>
</ol>

无序列表

<ul>
<li></li>
<li></li>
<li></li>
</ul>

属性：

type图标类型
disc实心圆
square实心方块
circle空心圆

d.img图片标签

<img src="" alt=""/>

属性：
src 图片路径
alt 代替图片出现的文字
e.a 锚标签
a标签可以作为一个超链接的标签使用
a标签的功能
1）在页面内部跳转—书签
a）埋下书签（创建一个包含id或者name属性的a标签）

<a name="tag"></a>

b）提供跳转标签（创建一个包含href属性的a标签，href属性值为#name）

<a href="#tag"></a>

属性：

name标签名称
href跳转的目标地址
target_self在当前窗口打开页面 _blank新打开窗口创建页面

2）在页面间跳转=

<a href="http://www.baidu.com">百度一下</a>

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>html标签2</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	</HEAD>
	<BODY>
		<a href="http://www.baidu.com" target="_blank">百度一下</a>
		<a name="tag"></a>
		<h1 align="center">曹阳历险记</h1>
		<p>曹阳只身潜入荒岛，开始找
		找<br/>
		找<br/>
		找<br/>
		找<br/>
		找<br/>
		找<br/>
		找<br/>
		找<br/>
		找<br/>
		找<br/>
		找<br/>
		找<br/>
		找<br/>
		找<br/>
		找<br/>
		找<br/>
		找<br/>
		找<br/>
		饿死了<br>
		</p>
		<a href="#tag">点击返回上层</a>
	</BODY>
</HTML>

table的重要属性
border 边框宽度
cellspacing 单元格之间的空白距离
cellpadding 边框与单元格内容之间的空白距离
bgcorlor 背景颜色
bordercolor 边框颜色
width 宽度
align 对齐方式

tr的重要属性
align 对齐方式
bgcolor 背景颜色

th/td的重要属性 (th字体加粗且居中)
align 对齐方式
bgcolor 背景颜色
width 宽度
height 高度
colspan 可横跨列数
rowspan 可横跨的行数

caption 定义表格的标题

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>table表格</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	</HEAD>
	<BODY>
		<table border="2px" cellspacing="0" cellpadding="5px" bgcolor="#FF3456" bordercolor="yellow" width="500px">
			<caption align="bottom">web</caption>
			<tr align="right" bgcolor="#5566DD">
				<td>大数据</td>
				<td rowspan="2">Java</td>
			</tr>
			<tr>
				<td align="center" bgcolor="#3FFCCD" width="100px" height="100px">曹阳</td>
				<!--<td>李帅</td>-->
			</tr>
				<td colspan="2">曹阳2</td>
				<!--<td>李帅帅</td>-->
			</tr>
		</table>
	</BODY>
</HTML>

form表单标签
1、form表单标签
提交数据的方式
a、在地址栏中手动拼接参数。这种方式如果遇到较多的参数和较复杂的参数就会难以拼接，但是拼接很有可能出现错误所以不推荐直接在地址栏中书写参数
b、利用form表单提交数据，在form表单中书写的内容，提交时会自动拼接在浏览器的地址栏中
2、form使用
属性;
form 提交的地址
method 提交的方式
method：一共有7种，常用的由两种get 和post
get提交 ：
参数拼接在地址栏中
安全系数低，参数拼接的长度一般不超过1KB
post提交：
在底层以流的形式提交，安全系数较高，在理论上传递的参数长度不受限制
input输入框
type属性：
name 标签名称。并且在form表单中需要被提交的数据标签身上必须要包含一个name属性。否则不会被提交
value 当前标签具有的值

下拉框：
select option
文本域：textarea

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>form表单</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	</HEAD>
	<BODY>
		<form action="http://www.tmooc.cn" method="get">
			姓名：<input type="text" name="username" value="1123" readonly="readonly" disabled="disabled"/><br/>
			密码：<input type="password" name="password"/><br/>
			性别：<input type="radio" name="gender" value="male">男
			<input type="radio" name="gender" value="female" />女<br/>
			爱好：<input type="checkbox" name="like1" value="sing" />唱
			<input type="checkbox" name="like2" value="dance" />跳
			<input type="checkbox" name="like3" value="playball" />打篮球<br/>
			上传：<input type="file"/><br/>
			按钮：<input type="button" value="点击变帅" />
			提交：<input type="submit"/>
			重置：<input type="reset"/><br/>
			隐藏框：<input type="hidden"/ value="3">
			图片提交框：<input type="image" src="img\1.jpg"/><br/>
			城市信息：
			<select name="city" size="2" multiple="multiple">
				<option value="bj">北京</option>
				<option selected="selected" value="sh">上海</option><!--具有select属性不管其值是什么都会默认选择-->
				<option value="tj">天津</option>
			</select><br/>
			自我介绍：
			<textarea rows="10" cols="10">
				
			</textarea>
		</form>
	</BODY>
</HTML>

练习：

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>注册表单练习</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	</HEAD>
	<BODY>
		<form action="http://www.tmooc.cn" method="post">
			<table border="2" bordercolor="#FF1493" bgcolor="#F5BEB3" cellspacing="0" cellpadding="5PX" align="center">
				<caption>
					<h1>
					<font color="#FF1493">注册表单</font>
					</h1>
				</caption>
				<tr>
					<td>用户名：</td>
					<td><input type="text" name="username"/></td>
			    </tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" name="password"/></td>
			    </tr>
				<tr>
					<td>确认密码：</td>
					<td><input type="password" name="password2"/></td>
			    </tr>
				<tr>
					<td>昵称：</td>
					<td><input type="text" name="nickname"/></td>
			    </tr>
				<tr>
					<td>邮箱：</td>
					<td><input type="text" name="email"/></td>
			    </tr>
				<tr>
					<td>头像：</td>
					<td><input type="file" name="head"/></td>
			    </tr>
				<tr>
					<td>性别：</td>
					<td><input type="radio" name="gender" value="male"/>男
					<input type="radio" name="gender" value="female"/>女
					</td>
			    </tr>
				<tr>
					<td>所在城市：</td>
					<td><select name="city">
						<option>北京</option>
						<option>上海</option>
						<option>天津</option>
						<option selected="selected">唐山</option>
						</select></td>
			    </tr>
				<tr>
					<td>自我介绍：</td>
					<td><textarea name="test" rows="3" cols="60">
						请输入个人介绍
					</textarea></td>
			    </tr>
				<tr>
					<td>验证码：</td>
					<td>
						<input type="text"/>
						<img src="jj.jpg"/>
						<input type="button" value="点我换一张" />
					</td>
			    </tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit"/>
						<input type="reset"/>
					</td>
			    </tr>
			</table>
		</form>
	</BODY>
</HTML>

css概述
1、页面构成与样式修改
a.页面构成初期，使用table组成页面，但是面对复杂的页面组成时，table难以完成对应的布局格式
b.后来产生新的页面组成方式，利用div+css两门技术实现页面的组成和样式的修改
2、div 盒子模式
div 块级模式
span 行内元素 多个元素同在一行
p 块级元素 每个元素自己独占一行

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>注册表单练习</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	</HEAD>
	<BODY>
		<div id="test" class="test">
			我是一个div
		</div>
		<div id="test" class="test">
			我是一个div
		</div>
		<div id="test" class="test">
			我是一个div
		</div>
		<div id="test" class="test">
			我是一个div
		</div>
		<span class="test">
			我是一个span
		</span>
		<span class="test">
			我是一个span
		</span>
		<span class="test">
			我是一个span
		</span>
		<span class="test">
			我是一个span
		</span>
		<p>
		我是p元素</p>
		<p>
		我是p元素</p>
		<p>
		我是p元素</p>
	</BODY>
</HTML>

3、css
css就是层叠样式表
a.页面中的多个元素都需要进行相同的样式修改，若一个一个修改则会造成代码的冗余和维护的不便利性
b.页面中的大量标签可以通过层叠样式表来进行批量的修改
c.css的语法
css的注释：/**/
4、CSS的四种引入方式
方式一：通过style属性指定元素的样式
方式二：童年过style标签定义样式，可以在head标签中定义style标签设定样式
方式三：引入外部样式文件，可以在html的head标签中定义link标签来修饰当前页面
方式四：可以通过@import url(xxx.css)在style标签的内部引入一个css文件

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>css演示</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<!--第二种引入css的方式-->
		<style style="text/css">
			/*第四种引入css的方式*/
			@import url(1.css);
			/*div{
				color: #aaabbd;
			    background-color: #DD12FF;
			}*/
		</style>
		<!--第三种引入css的方式-->
		<!--<link rel="stylesheet" href="1.css"/>-->
		
	</HEAD>
	<BODY>
		<!--第一种引入css的方式-->
		<div style="color: #ABC123;background: #11FFF2">
			我是一个div
		</div>
		<div>
			我是一个div
		</div>
		<div>
			我是一个div
		</div>
		<div>
			我是一个div
		</div>
		
	</BODY>
</HTML>

div{
				color: #aaabbd;
			    background-color: #DD12FF;
			}

如果多种方式为同一个元素设定了样式，则样式起作用的原则是：优先级由低到高（编辑样式的代码哪个离标签近，哪个有效）
5、css选择器
基本选择器
#id选择器
#div1{
}
类选择器
.class1{
}
元素名选择器
元素名{
}

<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<title>css选择器</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			/*id选择器*/
			/*#div1{
				color: #DDD123;
				background-color: #FF123D;}*/
				/*类选择器*/
			/*.class1{
				color: #3FD123;
				background-color: #BC123D;
				}*/
			/*元素选择器*/
			/*div{
				color:#1223AA;
				background:#D33223;
			}*/
			/*后代选择器*/
			/*div span{
				color:#1223AA;
				background:#D33223;
			}*/
			/*子元素选择器*/
			/*div>span{
				color:#1223AA;
				background:#D33223;
			}*/
			/*相邻兄弟选择器*/
			/*div+span{
				color:#1223AA;
				background:#D33223;
			}*/
			/*属性选择器*/
			/*div[name]{
				color:#1223AA;
				background:#D33223;
			}*/
			a:LINK{
				color:#dda3AA;
				background:#D33223;
			}
			a:visited{
				color:#12dddA;
				background:#D33223;
			}
			a:active{
				color:#1223AA;
				background:#D33223;
			}
			a:hover{
				color:#df23AA;
				background:#D33223;
			}
			
		</style>
	</HEAD>
	<BODY>
		<div id="div1">
			我是一个div
		</div>
		<div class="class1">
			我是一个div
		</div>
		<div class="class1">
			我是一个div
		</div>
		<div class="class2">
			我是一个div
		</div>
		<div id="div1">
			我是一个div
		</div>
		<div>
			这是父类div
			<span> 
				这是子类span
			</span>
			<p>
				<span> 
					这是孙子span
				</span>
			</p>
		</div>
		<span>
			这是父类span
		</span>
		<div name="cy">
			这是曹阳
		</div>
		<div name="ls">
			这是lishuai
		</div>
		<a href="#">点击跳转</a>
	</BODY>
</HTML>

扩展选择器
a、后代选择器
div中所有的span元素选中
div span{}
b、子元素选择器
div>span{}
c、相邻兄弟选择器
div+span{}
属性选择器
选择包含name属性的div
div[name]{
}
选择包含name='ls’的div
div[name=‘ls’]{
}
多元素选择器（分组选择器）
#id,.class,span{}
伪元素选择器
:link 未点击的状态
:visited 被点击过的状态
:hover 鼠标移动到元素之上但是仍然是未点击的状态
:active 被鼠标点击着的状态
总结：选择器选择越具体的样式越优先生效，距离标签越近的css样式越优先生效

快乐咸鱼Y
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html入门到放弃笔记
05-15
1、在 htdoc 中，创建一个网页 01-first.html 文件 创建一个 记事本，将 .txt 重命名为 .html 2、搭建HTML网页结构 1、添加 文档类型声明 2、添加 html 根标记 2、<html> 标记 包含两对子元素 1、<...
JavaWeb——HTML基础标签table标签与form标签的学习与理解
qq_44025396的博客
05-05 1390
使用表格标签制作规整的表格 table标签是表格标签， border属性设置表格的边框厚度， width属性设置表格的宽度， align设置表格的对齐方式， cellspacing设置单元格的间距 tr是行标签， td是单元格标签， th是字体居中加粗的单元格标签, b是字体加粗标签 下面制作一个3*3的表格，放置在页面中心，边框厚度为2，宽度为500，单元格内没有间距，并每一行使用不同的效果 &...
【web前端基础day02】表格table+表单form
qq_61971608的博客
01-16 3591
HTML over
Web前端学习day01(HTML)
weixin_42135811的博客
10-22 1456
教学导航 了解什么是标记语言 了解HTML主要特性，主要变化以及发展趋势 了解HTML的结构标签 掌握HTML的主要标签（字体，图片，列表，链接，表单等标签） ### 1.网站信息页面 #### 1.1需求分析: 我们公司的需要一个对外宣传的网站介绍,介绍公司的主要业务,公司的发展历史,公司的口号等等信息 #### 1.2技术分析: ##### HTML概述: HTML: Hyper Tex...
Web前端（二）HTMLHTML&css（上）table+form 创建表单
PizAn的博客
11-10 1168
html 网站注册页面_表单标签属性 效果图： 源代码： 注意点： 每个标签后面都要加name=&amp;amp;amp;quot; &amp;amp;amp;quot; 或者value=&amp;amp;amp;quot;&amp;amp;amp;quot;,方便后台获取数据； placeholder、checked、selected 都是可以预先帮用户选取信息的属性，具体看源代码； &amp;amp;amp;amp;lt;!DOCTYPE
web前端day01
ClearDream__的博客
04-27 1238
Web前端-HTML HTML作用： 负责搭建页面结构和内容 （盖房子） 学习HTML主要学习的就是有哪些标签 文本相关标签 h1-h6 文本标题, 特点: 独占一行, 自带上下间距, 字体加粗 p 段落标签, 特点: 独占一行,自带上下间距 hr 水平分割线 br 换行 b 加粗 i 斜体 u 下划线 s 删除线 列表标签 无序列表: ul和li 组合 unordered list list item 列表项 有序列表: ol和li 组合 ordered list 列表嵌套: ...
python入门到高级全栈工程师培训 第3期 附课件代码
06-07
01 Form组件之生成HTML标签 02 Form组件之详解字段 03 Form组件之常用标签示例 04 Form组件之动态绑定数据 第60章 Django序列化共6课 第61章 01 上节内容回顾 02 上传文件 03 制作上传按钮 04 Form组件上传文件 ...
enterprise_rails.pdf
08-14
Refactor from Day One 93 8. Composite Keys and Domain Key/Normal Form ............................. 95 Why Composite Natural Keys Matter 97 Spotting Composite Keys 99 Atop the Shoulders of… 101 ...
Database Processing Fundamentals, Design, and Implementation (12th Edition).rar
05-21
Searching for Patterns in Trading by Day of Week Querying Two or More Tables with SQL Querying Multiple Tables with Subqueries Querying Multiple Tables with Joins Comparing Subqueries and Joins ...
MAC Security Bible
12-21
form on a web page. And let’s not forget network security. Macs use the same public Internet as other computers and are just as prone to attacks from people sniffing network traffic, creating ...
Web前端开发之HTML_3
zx1026409886的博客
04-23 884
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
HTML
最新发布
2401_83693610的博客
04-25 627
分为前端（html、css、js）和后端（php、mysql、Java），前端是看到的内容，由前端人员开发。但网页的固定结构叫做整体、头部、标题、主体... 2.网页中的结构是通过特定的HTML标签进行描述。浏览器：是网页显示、运行的平台，是前端开发必备利器。常见的浏览器包括：IE、火狐浏览器（Firefox）、谷歌（chrome）、Safari浏览器、Opera（欧朋）。三、1.html的概念：专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。
HTML中的页面可见性
小卡酷谋的博客
04-22 369
所以，所谓页面可见性，就是获取当前页面的可见状态。因为对于用户来讲可以打开好多标签页面来回切换，然而始终只有一个页面处于显示状态。所以我们可以通过页面可见性（Page Visibility）API 来判断当前页面是显示状态还是隐藏状态。页面事件来判断当前页面可见性的状态，并针对性的执行某些任务。长期以来一直缺少一个判断用户是否正在浏览某个指定标签页的方法。里页面可见性接口就提供给了程序员一个方法，让他们使用。用户是否去看别的网站了？更多有关页面可见性的内容可以参阅。"页面切换了~目前不可见"
HTML使用jQuery实现两个点击按钮，分别控制改文本字体颜色和字体大小
m0_65992344的博客
04-22 328
jQuery 是一个广泛使用的 JavaScript 库，旨在简化对 HTML 文档的操作、事件处理、动画效果和 AJAX 等操作。
用html写一个有趣的动态背景
liulang68的博客
04-20 467
【代码】用html写一个有趣的动态背景。
markdown语法转换成html渲染到页面
weixin_39755186的博客
04-22 377
入门语法 https://ejs.bootcss.com/#install。
描述一下PHP与HTML和CSS的关系
Layla_c的博客
04-22 763
HTML提供了网页的基本结构和内容，CSS为网页添加了美观的样式和布局，而PHP则使得网页具有了交互性和动态性。虽然CSS本身与PHP没有直接的交互，但PHP可以生成包含CSS样式的HTML代码，或者通过动态修改CSS类名或样式属性来实现动态的样式变化。这样，开发者可以根据用户的操作或数据的变化，动态地改变网页的样式和布局，提供更加丰富的用户体验。例如，在构建单页面应用（SPA）时，PHP可以负责后端逻辑的处理和数据的提供，而前端则使用HTML、CSS和JavaScript构建出动态的用户界面。
html--玫瑰
stqer的博客
04-19 558
【代码】html--玫瑰。
html--旋转眩晕特效
stqer的博客
04-22 582
【代码】html--旋转眩晕特效。
Error reading file D:/javaEE-web-pro/day01moudle/pom.xml maevn
05-20
这错误提示是说在读取 `D:/javaEE-web-pro/day01moudle/pom.xml` 文件时出现了问题，可能是该文件不存在或者无法被访问。 首先，你需要确认文件路径的正确性。检查该文件是否位于指定路径下，并且确保路径中不包含...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值