web day01(html,form,table)

最新推荐文章于 2024-11-04 09:11:09 发布
最新推荐文章于 2024-11-04 09:11:09 发布
阅读量175 收藏
点赞数 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
关注
专栏目录
Python Web开发记录 Day1：HTML（标记语言，结构）
流苏的博客
02-21 1130
Python Web开发记录 Day1：HTML
JavaWeb——HTML基础标签table标签与form标签的学习与理解
qq_44025396的博客
05-05 1587
使用表格标签制作规整的表格 table标签是表格标签， border属性设置表格的边框厚度， width属性设置表格的宽度， align设置表格的对齐方式， cellspacing设置单元格的间距 tr是行标签， td是单元格标签， th是字体居中加粗的单元格标签, b是字体加粗标签 下面制作一个3*3的表格，放置在页面中心，边框厚度为2，宽度为500，单元格内没有间距，并每一行使用不同的效果 &...
【web前端基础day02】表格table+表单form
qq_61971608的博客
01-16 4287
HTML over
Web前端学习day01(HTML)
weixin_42135811的博客
10-22 1509
教学导航 了解什么是标记语言 了解HTML主要特性，主要变化以及发展趋势 了解HTML的结构标签 掌握HTML的主要标签（字体，图片，列表，链接，表单等标签） ### 1.网站信息页面 #### 1.1需求分析: 我们公司的需要一个对外宣传的网站介绍,介绍公司的主要业务,公司的发展历史,公司的口号等等信息 #### 1.2技术分析: ##### HTML概述: HTML: Hyper Tex...
Web前端（二）HTMLHTML&css（上）table+form 创建表单
PizAn的博客
11-10 1216
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 1333
Web前端-HTML HTML作用： 负责搭建页面结构和内容 （盖房子） 学习HTML主要学习的就是有哪些标签 文本相关标签 h1-h6 文本标题, 特点: 独占一行, 自带上下间距, 字体加粗 p 段落标签, 特点: 独占一行,自带上下间距 hr 水平分割线 br 换行 b 加粗 i 斜体 u 下划线 s 删除线 列表标签 无序列表: ul和li 组合 unordered list list item 列表项 有序列表: ol和li 组合 ordered list 列表嵌套: ...
Day_1 Web前端开发环境配置与HTML基础
化身孤岛的鲸o的博客
01-05 1307
项目1 Web前端开发环境配置 下载并安装常用的Web前端开发工具： （1）EditPlus软件 （2）HBuilder软件 （3）Subline Text软件 可以自行下载使用。 我这里使用的是HBuilder软件，界面如下： 项目2 新生简易主页设计 知识点： （1）html标记 <html> ... </html> HTML文档结构由头部head和主体body构成...
Day21 - Web前端概述
Laic Zhang的博客
05-04 2074
Day21 - Web前端概述 HTML简史 1991年10月：一个非正式CERN（欧洲核子研究中心）文件首次公开18个HTML标签，这个文件的作者是物理学家蒂姆·伯纳斯-李，因此他是万维网的发明者，也是万维网联盟的主席。 1995年11月：HTML 2.0标准发布（RFC 1866）。 1997年1月：HTML 3.2作为W3C推荐标准发布。 1997年12月：HTML 4.0作为W3C推荐标...
前端day01
qq_44949668的博客
05-05 1157
图片只设置宽度,高度会等比例缩放 50% 整个body的50%,放到body里面的话 body是距离窗口各边各个8像素,为了好看 3 回到顶部:页面的内部跳转 #回去找id,可以跳转到页面中某个位置 跨行和跨列,在先出现的位置写,然后把合并的单元格删掉 下拉框,单选框是表单中的控件 label标签,扩大选的范围 ...
Day51.HTML、标签、表单、CSS
a111042555的博客
04-26 1867
HTML
day01（HTML01-认知）.zip
12-01
此外，HTML还支持表格（`<table>`、`<tr>`、`<td>`等）、表单（`<form>`、`<input>`、`<button>`等）以及多媒体元素（`<audio>`和`<video>`）。通过组合这些元素，开发者可以构建出复杂的交互式网页。 HTML5是HTML...
day01-html基础.rar.rar.rar
10-16
HTML（HyperText Markup Language）是构建网页的基础语言，它...总的来说，“day01-html基础”这个学习资源可能包含HTML的这些基础知识，通过学习，你可以创建出基本的静态网页，并为进一步深入Web开发打下坚实的基础。
HTML 基础标签——元数据标签 ＜meta＞
Allen-
11-01 319
标签通常位于文档的部分。它用于定义文档的元数据，包括字符编码、文档描述、关键字、作者信息等。这些信息可以帮助浏览器正确解析和显示文档，同时还可以提供搜索引擎索引所需的信息。
CSS:基础选择器,文字控制属性(HTML)
最新发布
m0_75035023的博客
11-04 129
CSS:基础选择器,文字控制属性(HTML),javaweb
HTML 标签属性——id、class、style 等全局属性详解
Allen-
11-02 184
HTML全局属性是一组可以应用于几乎所有HTML元素的特殊属性。这些属性提供了额外的功能和信息，使得网页开发者能够更好地控制元素的行为、样式和可访问性。
Html编写发射粒子爱心
m0_58419490的博客
10-31 1233
【代码】Html编写发射粒子爱心。
HTML 基础标签——文本内容标签 ＜ul＞、＜ol＞、＜blockquote＞ 、＜code＞ 等标签的用法详解
Allen-
11-01 536
在 HTML 文档中，文本内容标签用于定义和格式化文本信息。这些标签不仅使文本内容易于阅读和理解，还可以通过不同的格式和结构增强网页的可读性。本文将详细介绍常用的文本内容标签，包括标题标签、段落标签、文本格式化标签、列表标签、引用标签，以及代码和预格式文本标签。
前端三件套(HTML + CSS + JS)
m0_72047169的博客
11-02 1189
内部样式是将CSS规则直接放在HTML文档的。
HTML 文档规范与解析模式：DOCTYPE、＜html＞ 标签以及结构化页面
Allen-
11-01 436
是 HTML5 文档的类型声明，位于文档的第一行。它的主要作用是告知浏览器按照标准模式渲染网页，确保网页在不同浏览器之间的一致性，避免因解析差异而导致的显示问题。将这一声明放在 HTML 文档的最上方，确保它是文档的第一行，这是开发中的一个重要细节。在标准模式下，浏览器遵循现代的 Web 标准，确保页面的布局和样式一致。而在怪异模式中，浏览器则可能模拟旧版浏览器的行为，这可能导致网页在不同环境中的呈现效果不一。是一个简单却关键的声明，它确保网页在现代浏览器中正确渲染，为开发者提供了一个更为一致的开发环境。
HTML&CSS入门：结构、表格与表单详解
"Day04 HTML&CSS课堂笔记主要围绕Web前端开发的基础知识展开，包括HTML和CSS语言的结构和元素。在这一天的学习中，学员们复习了HTML的常用标签，如`<ul>`和`<ol>`用于创建无序和有序列表，`<dl>`, `<dt>`, 和 `<dd>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值