HTML教程【一文彻底搞懂HTML】
目录
- 1. html新建
- 1.1 html基本结构
- 1.2 html细节
- 2. 标签
- 2.1 font标签
- 2.2 字符实体
- 2.3 标题标签
- 2.4 超链接标签
- 2.5 列表标签
- 2.6 图片标签
- 2.7 表格标签
- 2.8 表单标签
- 2.8.1基本使用
- 2.8.2表单综合练习
- 2.8.3表单格式化
- 2.8.4表单使用细节
- 2.8.5get请求
- 2.8.6post请求
- 2.9 其它标签
- 2.9.1div标签
- 2.9.2段落标签
- 2.9.3span标签
- 3. 课后作业
- 3.1 作业1
- 3.2 作业2
1. html新建
1.1 html基本结构
1.2 html细节
2. 标签
2.1 font标签
2.2 字符实体
2.3 标题标签
2.4 超链接标签
2.5 列表标签
- 无序列表
- 有序列表
2.6 图片标签
2.7 表格标签
- 基本使用
- 用合并的方式打印一个菜谱
思路:
1.先把整个表格的完整的行和列,展示出来5*3
2.再使用合并的技术,进行合并
2.8 表单标签
2.8.1基本使用
2.8.2表单综合练习
2.8.3表单格式化
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格格式化title>
head>
<body>
<form action="ol_li.html" method="get"><table align="center" width="600px"><tr><th colspan="2"><h1>用户注册信息h1>th>tr><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="password">td>tr><tr><td>喜欢的运动项目td><td><input type="checkbox" name="sport" value="basketball" checked>篮球<input type="checkbox" name="sport" value="soccer">足球<input type="checkbox" name="sport" value="ping pang">乒乓球td>tr><tr><td>性别td><td><input type="radio" name="sex" value="male" checked>男<input type="radio" name="sex" value="female">女td>tr><tr><td>喜欢的城市td><td><select name="city"><option>--选择--option><option value="beijing">北京option><option value="shanghai">上海option>select>td>tr><tr><td>自我介绍td><td><textarea rows="6" cols="20">textarea>td>tr><tr><td>选择你的文件(头像)td><td><input type="file" name="myfile">td>tr><tr><td><input type="submit" value="提交啦"/>td><td><input type="reset" value="重置"/>td>tr>table>
form>
body>
html>
2.8.4表单使用细节
2.8.5get请求
- 浏览器地址栏中的地址是: action属性[+ ? + 请求参数]
请求参数的格式是: name=value&name=value&name=value
示例: http://localhost:63342/html/ol_li.html?username=978964140%40qq.com&password=123&password=123&sport=basketball&sport=soccer&sex=male&city=beijing&myfile=4.wav - 不安全;
- 它有数据长度的限制(不同的浏览器规定不一样, 一般2K)
2.8.6post请求
- 浏览器地址栏中的地址只有action属性值,提交的数据是携带在http请求中,但是不会展示在地址栏, 示例: http://localhost:63342/html/ol_li.html
- 它真正发送的内容在请求头,抓包之后如下所示:
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en;q=0.9,en-GB;q=0.8,en-US;q=0.7
Cache-Control: max-age=0
Connection: keep-alive
Content-Length: 129
Content-Type: application/x-www-form-urlencoded
Cookie: Idea-6ebd3569=faa9d4e5-0604-49e7-8d6f-e8cb42e3da0c
Host: localhost:63342
Origin: http://localhost:63342
Referer: http://localhost:63342/html/form_detail.html?_ijt=899jn6q3snt19psj52q3u2sr6a&_ij_reload=RELOAD_ON_SAVE
sec-ch-ua: “Chromium”;v=“110”, “Not A(Brand”;v=“24”, “Microsoft Edge”;v=“110”
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: “Windows”
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36 Edg/110.0.1587.57
x-forwarded-for: 4.2.2.2
username=978964140%40qq.com&password=123&password=123&sport=basketball&sport=soccer&sport=ping+pang&sex=male&city=beijing&myfile= - 相对get更安全, 如果要防抓包,还能用https协议;
- 理论上没有长度限制;
2.9 其它标签
2.9.1div标签
2.9.2段落标签
2.9.3span标签
3. 课后作业
3.1 作业1
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>作业1title>
head>
<body>
<h1 align="center">雇员薪资信息h1>
<table align="center" style="text-align: center" border="2" borderColor="#44309D" bgcolor="#CDCACE" cellspacing="0" width="600"><tr><th>编号th><th>名字th><th>性别th><th>薪水th><th>职位th><th>emailth>tr><tr><td>111td><td>宋江td><td>男td><td>1000.00td><td>总裁td><td>sj@163.comtd>tr><tr><td>111td><td>宋江td><td>男td><td>1000.00td><td>总裁td><td>sj@163.comtd>tr><tr><td>111td><td>宋江td><td>男td><td>1000.00td><td>总裁td><td>sj@163.comtd>tr>
table>
body>
html>
3.2 作业2
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>作业2title>
head>
<body>
<h1 align="center">课程表h1>
<table align="center" style="text-align: center" border="2" borderColor="#6498EE" width="600"><tr><th>项目th><th colspan="5">上课th><th colspan="2">休息th>tr><tr><th>星期th><th>星期一th><th>星期二th><th>星期三th><th>星期四th><th>星期五th><th>星期六th><th>星期日th>tr><tr><td rowspan="4">上午td><td>语文td><td>数学td><td>英语td><td>英语td><td>物理td><td>计算机td><td rowspan="4">休息td>tr><tr><td>数学td><td>数学td><td>地理td><td>历史td><td>化学td><td>计算机td>tr><tr><td>化学td><td>语文td><td>体育td><td>计算机td><td>英语td><td>计算机td>tr><tr><td>政治td><td>英语td><td>体育td><td>历史td><td>地理td><td>计算机td>tr><tr><td rowspan="2">下午td><td>语文td><td>数学td><td>英语td><td>英语td><td>物理td><td>计算机td><td rowspan="2">休息td>tr><tr><td>数学td><td>数学td><td>地理td><td>历史td><td>化学td><td>计算机td>tr>
table>
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！