网页知识学习总结

奏长歌，踏山河

已于 2023-01-28 10:05:21 修改

阅读量1.4k

点赞数

文章标签： html css javascript

于 2022-08-30 14:48:46 首次发布

本文链接：https://blog.csdn.net/m0_48701672/article/details/126596149

版权

html

1.html各个版本声明

html5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"      
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

以上是我对版本知识学习的归纳总结

2.web三要素

浏览器，服务器，http协议

3.hbuilderx 软件自带了一个内置服务器：端口号默认是 8848

4.web 学习内容：

html: 用于勾勒出网页的结构和内容

css: 用于网页美化

js:js 操作的目标是 html,css, 是以这两者为基础的

5.html网页后缀名分为html和htm两种

6.html编码格式

<meta charset="utf-8">

* gb2312 简单中文包括6763个汉字 GUO BIAO

* BIG5 繁体中文港澳台等用

* GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312

* UTF-8则基本包含全世界所有国家需要用到的字符

（与此同时要保证内部设置的编码格式与文件新建的编码格式一样）

7.html的访问方式

7.1.网络访问方式：127.0.0.1:8848/华清远见学习/Week6/date_8month17day/1.练习购物车.html127.0.0.1:8848/web01/day1/aa.html 127.0.0.1:8848/华清远见学习/Week6/date_8month17day/1.练习购物车.html

或者localhost:8848/华清远见学习/Week6/date_8month17day/1.练习购物车.html8848/web01/day1/aa.html

http: 网络协议

127.0.0.1:8848 : 访问的服务器的地址 ( 域名 ) -- ip:port

-- 127.0.0.1 , 是代表本机的 ip 地址（ 192.168.3.46 ）：通过 ipconfig 命令查询本机 ip.

-- localhost: 是代表本机的域名

-- port : 端口号（ 8848 , 通过端口号，找到电脑上在运行的某个软件。）

-- /web01/day1/aa.html : 运行的 8848 软件上对应的具体的资源。

localhost:8848/华清远见学习/Week6/date_8month17day/1.练习购物车.html

7.2.文件夹访问方式：file:///C:/Users/Administrator/Documents/HBuilderProjects/web01/day1/1.html

8.标签

双标签： h1,h2,h3,h4,h5,h6

单标签： hr(横线),br(换行)

行内元素： span

块级元素： div

列表元素:ul(无序列表),ol(有序列表)

img: 用于网页上显示图片

a: 用于网页上显示超链接

table 表格标签：用于实现一个表格

tr: 行标签， td: 单元格标签 ( 列 )

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标签</title>
	</head>
	<body>
		<h2>三行四列的表格</h2>
		<!-- table标签：用于实现表格 - caption 设置表格的名字 -tr (table row) : 行 -td : 列(单元格) table标签的属性： - border ,边框 - width ， 宽度（默认的宽度有表格中的内容的宽度决定） - cellspacing="0" , 设置单元格之间的宽度 - cellpadding="0" ， 设置文本内容和表格边框的宽度 - align : 表格显示位置 -->
		<table border="1" width="200px" cellpadding="5" cellspacing="0" align="center">
			<caption>测试表格</caption>
			<tr align="center">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
		</table>
		<table border="1" cellspacing="0" width="300px">
			<caption>购物车展示</caption> <!-- thead : 代表表头 -->
			<thead>
				<tr>
					<!-- th和td类型， th中的文字会加粗 -->
					<th>商品名字</th>
					<th>商品数量</th>
					<th>商品单价</th>
					<th>小计</th>
				</tr>
			</thead> <!-- tbody:表格中的数据 -->
			<tbody>
				<tr>
					<td>鼠标</td>
					<td>2</td>
					<td>20</td>
					<td>40</td>
				</tr>
				<tr>
					<td>键盘</td>
					<td>3</td>
					<td>40</td>
					<td>120</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<!-- table标签要求： 每行的列数相等， -->
					<td>总计：</td> <!-- colspan="3" : 把三列合并为1列， 让每行的列数相等。 -->
					<td colspan="3">160</td>
				</tr>
			</tfoot>
		</table>
		<table>
			<caption>分数统计</caption>
			<tr>
				<th>姓名</th>
				<th>科目</th>
				<th>分数</th>
			</tr>
			<tr>
				<!-- rowspan="2" ： 把两行的单元格合并为一个。让每行的列数相等 -->
				<td rowspan="2">小红</td>
				<td>语文</td>
				<td>80</td>
			</tr>
			<tr>
				<!-- 这行只写两个td， 是因为上一行已经合并了本行的td。本行实际还是能保证有 三列 -->
				<td>数学</td>
				<td>90</td>
			</tr>
		</table>
		<table border="1" cellspacing="0" width="400px">
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>家庭成员</th>
			</tr>
			<tr>
				<td>1001</td>
				<td>mmm</td>
				<td>
					<table border="1" cellspacing="0">
						<tr>
							<th>姓名</th>
							<th>关系</th>
							<th>联系方式</th>
						</tr>
						<tr>
							<td>AA</td>
							<td>父子</td>
							<td>1000000</td>
						</tr>
						<tr>
							<td>BB</td>
							<td>母子</td>
							<td>1000000</td>
						</tr>
						<tr>
							<td>CC</td>
							<td>兄弟</td>
							<td>1000000</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>1001</td>
				<td>mmm</td>
				<td>
					<table border="1" cellspacing="0">
						<tr>
							<th>姓名</th>
							<th>关系</th>
							<th>联系方式</th>
						</tr>
						<tr>
							<td>AA</td>
							<td>父子</td>
							<td>1000000</td>
						</tr>
						<tr>
							<td>BB</td>
							<td>母子</td>
							<td>1000000</td>
						</tr>
						<tr>
							<td>CC</td>
							<td>兄弟</td>
							<td>1000000</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>

样式标签元素：b和strong(加粗),i和em(倾斜),del(删除线),u(下划线),sub(下标),sup(上标)

html 标签

作用：填写并提交表单信息与服务器进行动态交互

表单有两个基本部分：① 实现数据交互的可见的界面元素，比如文本框或按钮， ②提交后的表单

处理。

相关标签： ① form 标签：使用 “form” 元素创建表单， ②在 “form” 元素添加其他表单可以包含的

控件元素

10.form表单

from表单是成对出现的双标签

action

action规定了提交表单时发送表单数据的目的地,也即将数据发到哪里,例如action="请求地址".

method

method规定了发送方式,常用的为get和post,涉及到用户隐私时,为了安全起见通常都采用post方式.

name

name表单的名字,如果是在js中想要获取form的dom对象,直接使用name属性值即可,例如

<form action="请求地址" method="post" name="loginForm" onsubmit="return check()" enctype="multipart/form-data">
    <input type="text" name="user" id="user" />
    <input type="password" name="pwd" />
    <input type="file" />
    <input type="submit" value="提交" />
</form>

在使用js进行验证时可以直接使用myform.user.value来获取用户框的值,其结果与document.getElementById('user')一致

onsubmit

onsubmit事件属性,只在form表单中使用,在表单提交时触发,一般可以用它来进行前端验证.当"提交"按钮被点击时，执行check()函数，在check()函数中，我们对表单输入框进行了空验证，如果为空，提示输入并return false,这样表单就不会提交,同时，使用时要注意onsubmit不能掉了return，否则表单永远会提交。

enctype

enctype属性规定在发送到服务器之前对表单数据进行编码的模式,默认情况下是application/x-www-form-urlencoded,也就是我们不写enctype属性时,它的另外一个multipart/form-data值则是不编码,不对字符编码。在使用包含文件上传控件的表单时，必须使用该值,还有一个值是text/plain,它对空格进行处理，将空格转换为+号,但是不对特殊字符进行编码。

11.input元素的type属性值

button	定义一个点击按钮（一般用于js）
checkbox	定义复选框。
file	定义输入字段和"浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮
password	定义密码字段。该字段中的字符被掩码
reset	定义重置按钮。重置按钮会清除表单中的所有数据
submit	定义提交按钮。提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符

html5新加的type属性

type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为URL类型
type=“month”	限制用户输入必须为月类型
type="date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“number”	限制用户输入必须为数字类型
type=“tel”	手机号码
type="search”	搜索框

————————————————
版权声明：以上两个表格为CSDN博主「91周先生」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_48549175/article/details/109565913

12.下拉选择框和滚动列表

<select>:创建选项框

-name:选项框命名

-size:大于1，则为滚动列表

-multiple:设置多选

<option>:选项

-value:选项的值

-selected:预选中

13.多行文本输入框

主要属性

cols	指定文本区域的列数
rows	指定文本区域的行数
readonly	只读

13.表单元素的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单使用：登陆界面</title>
	</head>
	<body>
		<h1 align="center">登陆界面</h1>
		<!-- form标签： 表单相关的标签， 其内部嵌套用于用户输入数据的标签。
* action: 表单提交的请求地址(url)
* method: 请求的方式get / post
* enctype : 设置enctype的类型 ， 对请求参数的处理方式。
** 如果表单中涉及到文件上传 ，要求：method是post , enctype设置为
multipart/form-data
-->
		<form action="#" method="get" enctype="application/x-www-form-
urlencoded">
			<!-- for:label的for属性对应的数据值时input标签的id。
那么单击label标签的时候，input标签获取焦点(光标就在输入框内部, 用户就可以直接输
入数据。) -->
			<label for="inputname">用户名:</label>
			<!--
input标签： 用于用户输入数据
* type: 设置标签的类型,对用户输入的数据进行一些设置
* name: 用户输入的数据，传输到服务器端的时候 ， java程序根据name的值，获
取到输入框的数据。
* value: 对应的就是用户输入的数据值
-->
			<input id="inputname" type="text" name="username" value="tom" />
			<br>
			<label for="inputpwd">密码:</label>
			<input id="inputpwd" type="password" name="userpwd" /><br>
			<!-- type="submit":提交请求(请求的地址 + 请求的参数)的按钮 , 单击按钮触发
表“单提交事件”
“表单提交事件” ： 发送请求给服务器，并且把请求参数(用户输入的数据)也传输
到服务器端。


 
http://127.0.0.1:8848/web01/day2/xxx.html?
username=tom&userpwd=1234
url
?
参数 （&参数之间
的分隔符）
。-->
			<input type="submit" value="提交" />
			<!-- type="reset" , reset事件， 清空表单中的数据值 -->
			<input type="reset" value="重置" />
		</form>
		<h2>表单相关元素的介绍</h2>
		<form action="#" method="post" enctype="multipart/form-data">
			单行文本框： <input type="text" name="user" /><br>
			密码框：<input type="password" name="pwd" /><br>
			隐藏域：<input type="hidden" name="hide" /><br>
			文件上传：<input type="file" name="photyo" /><br>
			<!-- 单选按钮：①一般一组单选按钮，需要设置相同的name值，才能保证只有一个按钮被
选中。
用的。
② 标签后面的文本提示，是给用户看的， 标签的value值时给 程序使
(程序中用0表示男，1表示女)
③ checked="checked" ,表示设置为默认选中
-->
			单选按钮：<input type="radio" name="sex" value="0" /> 男
			<input type="radio" name="sex" value="1" checked="checked" /> 女
			<br>
			复选框：<input type="checkbox" name="hobbys" value="看书" checked="checked" /> 看书
			<input type="checkbox" name="hobbys" value="弹琴" /> 弹琴
			<input type="checkbox" name="hobbys" value="跑步" /> 跑步<br>
			下拉列表(单选)：<select name="city">
				<option>请选择</option>
				<option value="0">上海</option>
				<!-- selected="selected" : 设置默认选中项 -->
				<option value="1" selected="selected">北京</option>
				<option value="2">天津</option>
			</select><br>
			下拉列表(多选):
			<!-- multiple="multiple"：用于设置下拉列表，支持多选 -->
			<select name="language" multiple="multiple" size="6">
				<option value="java">java</option>
				<option value="c">c</option>
				<option value="c++">c++</option>
				<option value="python">python</option>
				<option value="html">html</option>
			</select><br>
			多行文本框：
			<!-- cols="5" :设置宽度 rows="10" :设置高度 -->
			<textarea name="info" cols="5" rows="10"></textarea><br>
			submit:<input type="submit" value="提交数据" /><br><br>
			reset:<input type="reset" value="清空数据" /><br>
			button:<input type="button" value="普通按钮" /><br>
			分组标签：
			<fieldset>
				<legend>地址</legend>
				邮箱： <input type="email" name="email" />
				年龄: <input type="number" name="phone" />



				date: <input type="date" name="date" />
				颜色：<input type="color" name="color" />
				submit:<input type="submit" value="提交数据" /><br><br>
			</fieldset>
		</form>
	</body>
</html>

14.iframe标签的使用

iframe标签： 在网页中，可以通过src的路径找到新的网页，嵌套在当前网页中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>iframe标签的使用</title>
	</head>
	<body>
		<!-- iframe标签： 在网页中，可以通过src的路径找到新的网页，嵌套在当前网页中。 -->
		<iframe src="1.表单相关标签.html" width="100" height="100"></iframe>
		<iframe src="../img/a.jpeg" width="100" height="100"></iframe>
		<ul>
			<!-- a标签的target ，指定为iframe标签的name值 ， 那么超链接的内容，则显示到
iframe标签中。 -->
			<li><a href="../day1/1.html文件的结构.html" target="content">1.文件结构
				</a></li>
			<li><a href="../day1/2.文本相关标签.html" target="content">2.文本相关
				</a></li>
			<li><a href="../day1/3.有特殊样式的文本标签.html" target="content">3.特殊
					样式的文本</a></li>
		</ul>
		<!-- 单击li中的超链接，把超链接的内容显示到iframe标签中。 -->
		<iframe src="../day1/1.html文件的结构.html" width="300px" height="300px" name="content"></iframe>
	</body>
</html>

奏长歌，踏山河

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
网页知识学习总结

1.html各个版本声明html5HTML 4.01XHTML 1.0以上是我对版本知识学习的归纳总结2.web三要素浏览器，服务器，http协议软件自带了一个内置服务器：端口号默认是88484.web学习内容：html:用于勾勒出网页的结构和内容css:用于网页美化js:js操作的目标是html,css,是以这两者为基础的5.html网页后缀名分为html和htm两种6.html编码格式* gb2312 简单中文包括6763个汉字 GUO BIAO。......
复制链接

扫一扫