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协议
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
localhost:8848/华清远见学习/Week6/date_8month17day/1.练习购物车.html
7.2.文件夹访问方式:file:///C:/Users/Administrator/Documents/HBuilderProjects/web01/day1/1.html
8.标签
<!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>
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.多行文本输入框
<textarea></textarea>
主要属性
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>