HTML重点基础

最新推荐文章于 2024-11-16 00:27:13 发布
最新推荐文章于 2024-11-16 00:27:13 发布
阅读量74 收藏
点赞数
文章标签： html java Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62110645/article/details/129730460
版权

表单综合练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单综合案例</title>
</head>
<body>
<!--一定一定要用form标签把input元素包起来-->
<!--提交给URL的是value属性的值，而不是客户所看到的值-->
<form>
    用户注册信息<br/>
    <!--一定一定要给input元素设置name属性，否则，数据提交不到URL（即服务器）-->
    用户名称：<input type="text"name="username"><br/>
    用户密码：<input type="password"name="username"><br/>
    确认密码：<input type="password"name="username"><br/>
    选择你喜欢的运动项目：
    <!--注意：checkbox是复选框，如果希望是同一组数据，name要一致-->
    <input type="checkbox"name="sport"value="lq">篮球<br/>
    <input type="checkbox"name="sport"value="zq"checked>足球<br/>
    <input type="checkbox"name="sport"value="sq">手球<br/>
    请选择性别：
    <!--单选type="radio"-->
    <!--这里name都要是gender同名，如果不一样就不是单选-->
    <input type="radio"name="gender"value="male">男<br/>
    <input type="radio"name="gender"value="female">女<br/>
    请选择城市：
    <select name="city">
        <option value="cd">成都</option>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
    </select><br/>
    自我介绍：
    <textarea rows="10"cols="20"></textarea>
    选择你的文件（头像）<input type="file"name="myfile"value="上传头像"><br/>
    <input type="submit"value="提交"/><input type="reset"value="重置"/>
</form>
</body>
</html>

表单格式化

ctrl+d：复制选中行数的所有代码

ctrl+x：删除代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单综合案例</title>
</head>
<body>
<!--一定一定要用form标签把input元素包起来-->
<!--提交给URL的是value属性的值，而不是客户所看到的值-->
<form>
    <h1>用户注册信息</h1>
    <table border="1"cellpadding="0">
        <tr>
            <td>用户名称：</td>
            <td><input type="text"name="username"><br/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password"name="username"><br/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password"name="username"><br/></td>
        </tr>
        <tr>
            <td>选择你喜欢的运动项目：</td>
            <td><input type="checkbox"name="sport"value="lq">篮球<input type="checkbox"name="sport"value="zq"checked>足球<input type="checkbox"name="sport"value="sq">手球<br/></td>
        </tr>
        <tr>
            <td>请选择性别：</td>
            <td><input type="radio"name="gender"value="male">男<input type="radio"name="gender"value="female">女<br/></td>
        </tr>
        <tr>
            <td>请选择城市：</td>
            <td>    <select name="city">
                <option value="cd">成都</option>
                <option value="bj">北京</option>
                <option value="sh">上海</option>
            </select><br/></td>
        </tr>
        <tr>
            <td>自我介绍：</td>
            <td><textarea rows="10"cols="20"></textarea></td>
        </tr>
        <tr>
            <td>选择你的文件（头像）</td>
            <td><input type="file"name="myfile"value="上传头像"><br/></td>
        </tr>
        <tr>
            <td><input type="submit"value="提交"/></td>
            <td><input type="reset"value="重置"/></td>
        </tr>
    </table>
</form>
</body>
</html>

其实就是用表格进行格式化

表单用来提交数据，表格用来显示数据

表单提交注意事项

1.action属性设置提交的服务器提交的服务器地址/资源（数据提交对象）

2.method属性设置提交的方式GET（默认值）或POST

3.表单提交的时候，数没有发送给服务器的三种情况

（1）表单某个元素项(比如text，password）没有name属性值

（2）单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器

（3）表单项不在提交的form标签中

快速复制多行代码：直接将代码缩至一行，再进行复制

4.GET 请求的特点是：

（1）浏览器地址栏中的地址是：action属性[+？+请求参数] 请求参数的格式是：name=value&name=value

（2）不安全

（3）它有数据长度的限制（不同的浏览器规定不一样，一般2k）

5.POST 请求的特点是：

（1）浏览器地址栏中只有action属性值，提交的数据是携带在http请求中，不会展示在地址栏

（2）相对于GET请求要安全

（3）理论上没有数据长度的限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交数据的注意事项和细节</title>
</head>
<body>
<!--表单必须掌握
1.action表示将form表单的数据提交给哪个url，即服务器的哪个资源（servlet）
2.method表示提交的方式：GET或者POST，默认为POST
3..如果form表单的元素没有name属性，那么无法提交数据
4.对于select checkbox radio标签，提交的数据是value指定的值
5.对于checkbox复选框，可以提交多个值，但是name是统一的，都是sport sport=xx & sport=yy
6.提交的数据，一定要放在form标签内，否则无法提交

GET和POST的区别简述
1.GET请求数据是显示在浏览器地址栏
http://localhost:63342/GradeMIS/LearnHTML/%E8%A1%A8%E5%8D%95%E7%BB%BC%E5%90%88%E6%A1%88%E5%88%97%E6%A0%BC%E5%BC%8F%E5%8C%96.html?username=jack&username=123&username=666&sport=zq&city=cd&myfile=
2.GET请求不安全的，而且数据有长度限制，建议有重要信息，不要用GET
3.POST请求数据是和http传输的，在http体中，相对安全
4.POST传输的数据长度理论上没有限制，但是在实际的应用中，也不能太大，即合理即可
-->
<form action="ok.html">
    <h1>用户注册信息</h1>
    <table border="1"cellpadding="0">
        <tr>
            <td>用户名称：</td>
            <td><input type="text"name="username"><br/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password"name="username"><br/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password"name="username"><br/></td>
        </tr>
        <tr>
            <td>选择你喜欢的运动项目：</td>
            <td><input type="checkbox"name="sport"value="lq">篮球<input type="checkbox"name="sport"value="zq"checked>足球<input type="checkbox"name="sport"value="sq">手球<br/></td>
        </tr>
        <tr>
            <td>请选择性别：</td>
            <td><input type="radio"name="gender"value="male">男<input type="radio"name="gender"value="female">女<br/></td>
        </tr>
        <tr>
            <td>请选择城市：</td>
            <td>    <select name="city">
                <option value="cd">成都</option>
                <option value="bj">北京</option>
                <option value="sh">上海</option>
            </select><br/></td>
        </tr>
        <tr>
            <td>自我介绍：</td>
            <td><textarea rows="10"cols="20"></textarea></td>
        </tr>
        <tr>
            <td>选择你的文件（头像）</td>
            <td><input type="file"name="myfile"value="上传头像"><br/></td>
        </tr>
        <tr>
            <td><input type="submit"value="提交"/></td>
            <td><input type="reset"value="重置"/></td>
        </tr>
    </table>
</form>
</body>
</html>

div标签

1.<div>标签可以把文档分割为独立的、不同的部分

2.<div>是一块级元素，它的内容自动开始一个新行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div标签</title>
</head>
<body>
<!--
1.<div>标签可以把文档分割为独立的、不同的部分
2.<div>是一块级元素，它的内容自动开始一个新行，不需要写<br/>
style:样式=》CSS 详细介绍，先简单使用
-->
hello，world
<div>
    <h3 style="color:blue">this is a h3</h3>
    <a href="http://www.baidu.com">goto百度</a>
</div>
</body>
</html>

p标签

1.<p>标签定义段落

2.p元素会自动在其前后创建一些空白

3.应用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p标签（段落标签）</title>
</head>
<body>
<!--
1.<p>标签定义段落
2.p元素会自动在其前后创建一些空白
-->
hello，world
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</body>
</html>

span标签

1.span标签是内联元素（内嵌元素，行业元素），不像块级元素（如：div标签、p标签等）有换行的效果

2.如果不对span应用样式，span标签没有任何的显示效果

3.语法：<span>内容</span>

4.往往是为了单独的取控制某个关键的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
</head>
<body>
您的购物车有<span style="color:red;font-size:40px">10</span>个商品
</body>
</html>

html小测试

https://www.w3school.com.cn/html/html_quiz.asp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工表格</title>
</head>
<body>
<h1 align="center">雇员薪资信息</h1>
<table border="1"width="800" bordercolor="#4A44D4"bgcolor="#CACCCD"align="center">
    <tr><b>
        <th>编号</th>
        <th>名字</th>
        <th>性别</th>
        <th>薪水</th>
        <th>职位</th>
        <th>email</th>
    </b></tr>
    <tr>
        <td>111</td>
        <td>宋江</td>
        <td>男</td>
        <td>1000.00</td>
        <td>总裁</td>
        <td>sj@163.com</td>
    </tr>
    <tr>
        <td>111</td>
        <td>宋江</td>
        <td>男</td>
        <td>1000.00</td>
        <td>总裁</td>
        <td>sj@163.com</td>
    </tr>
    <tr>
        <td>111</td>
        <td>宋江</td>
        <td>男</td>
        <td>1000.00</td>
        <td>总裁</td>
        <td>sj@163.com</td>
    </tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工表格</title>
</head>
<body>
<h1 align="center">雇员薪资信息</h1>
<table border="1"width="800" align="center"bordercolor="#4A44D4" cellspacing="0"bgcolor="#CACCCD">
    <tr><b>
        <th>编　号</th>
        <th>名　字</th>
        <th>性　别</th>
        <th>薪　水</th>
        <th>职　位</th>
        <th>email</th>
    </b></tr>
    <tr>
        <td>111</td>
        <td>宋江</td>
        <td>男</td>
        <td>1000.00</td>
        <td>总裁</td>
        <td>sj@163.com</td>
    </tr>
    <tr>
        <td>111</td>
        <td>宋江</td>
        <td>男</td>
        <td>1000.00</td>
        <td>总裁</td>
        <td>sj@163.com</td>
    </tr>
    <tr>
        <td>111</td>
        <td>宋江</td>
        <td>男</td>
        <td>1000.00</td>
        <td>总裁</td>
        <td>sj@163.com</td>
    </tr>
</table>
</body>
</html>

省略了cellspacing="0"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成绩表</title>
</head>
<body>
<h6 align="center">成绩表</h6>
<table border="1"align="center"bordercolor="#276ADC">
    <tr>
        <th><b>项目</b></th>
        <th colspan="5"><b>上课</b></th>
        <th colspan="2"><b>休息</b></th>
    </tr>
    <tr>
        <td><b>星期</b></td>
        <td><b>星期一</b></td>
        <td><b>星期二</b></td>
        <td><b>星期三</b></td>
        <td><b>星期四</b></td>
        <td><b>星期五</b></td>
        <td><b>星期六</b></td>
        <td><b>星期日</b></td>
    </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>

北辰星Charih
关注
专栏目录
初级软件工程师c1认证，web基础重点
09-28
涵盖前端表单基础知识和应用（例题即案例，比如如何将内容提交到指定位置，这些简单但实用的知识）SEO引擎优化，移动端定义全屏，target我觉得最重要的还是对内容的思考（二次学习），思维方式；我们再次学习学到了...
HTML入门-页面结构&基础标签
01-08
(面试题)三、三个版本和一个标准（面试题）四、html5的扩展五、html创建文件（重点）六、html格式（重点）七、html基本结构（重点）八、注释九、基础标签（重点）十、文本标签十一、布局标签十二、特殊符号 ...
HTML基础、重点和难点
林剑河的博客
05-15 1323
html基础和难点
HTML的基础语法
qq_45726327的博客
05-03 5408
HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。HTML使用标记(markup)来描述网页的结构和内容。你可以理解成是人类的基本框架.
全网最全HTML基础
a1085653724的博客
04-20 5215
1.HTML结构 认识 HTML 标签 ，HTML 代码是由 "标签" 构成的。 形如: <body>hello</body> (1).标签名(body)放到<>中. (2).大部分标签成对出现,<body>为开始标签,</body>为结束标签. (3).少数标签只有开始标签, 称为 "单标签". (4).开始标签和结束标签之间, 写的是标签的内容.(hello everyone) (5).开始标签中可能会带有 "属性". id
HTML基础教学
Skywalker10的专栏
05-25 8739
课题:HTML基础课时:8课时一、  教学目标1.  了解WEB静态网页结构。2.  掌握HTML网页布局。3.  掌握HTML中最常用的标签。4.  掌握CSS在标签中的用法。5.  掌握网络教程的学习及使用方法。6.  了解HTML语义化。二、    教学重点1.  掌握HTML网页布局。2.  掌握HTML中最常用的标签。3.  掌握CSS在标签中的用法三、    教学难点1. 如何运用HT...
HTML基础知识点大全
m0_69674158的博客
05-04 6991
一、什么是HTML HyperText Markup Language，即超文本标记语言 二、第一个HTML <！doctpye html> <html> <head></head> <body></body> <html> 三、常用的标签🀄️🀄️🀄️ 1⃣️p 标签 ，段落标签，占整行 2⃣️img 图片标签： ①src 图片路径：绝对路径http://xxx.xx/xx/x.jpg 相对路径..
HTML5基础
m0_60237095的博客
03-14 2258
1.HTML HTML是超文本标记语言 单标签，双标签 UTF-8字符集 标签 1.标题h标签 2.段落p标签 3.水平线标签hr 4.换行标签br 5. div和span标签(重点) div标签 用来布局的，但是现在一行只能放一个div span标签 用来布局的，一行上可以放好多个span 6.空格符号 **&nbsp;** 总结 .
HTML基础入门（详细）
weixin_51143430的博客
08-28 3872
HTMLHTML结构2.HTML常见标签2.1注释标签2.2换行符2.3加粗标签2.4文字格式化2.4.1加粗2.4.2倾斜 2.4.3下划线 HTML结构 2.HTML常见标签 2.1注释标签 <!--注释> ctrl快捷键可快速进行注释或取消注释 2.2换行符 2.3加粗标签 2.4文字格式化 2.4.1加粗 2.4.2倾斜 2.4.3下划线 ......
HTML超详细基础知识总结
全粘小谭的博客
09-25 4232
第一次写博客，这次打算把暑期复习的一些前端知识点（干货满满哦）发出来，主要是一些基础的东西，有时候在做一些小项目时，会发现网页写的很难受，主要原因就是基础不牢靠，所以复习的时候还是花了很多心思的，当基础学扎实了，无论多漂亮的网页都能自己写出来了，这种感觉还是挺爽的🤣
前端——HTML基础
qq_44331253的博客
03-04 6459
目录html基本标签列表标签无序列表有序列表超链接标签a标签假链接表格标签基本表格单元格合并注意事项表单标签【重点】基本介绍form的常见子标签input：输入类型select :选择菜单textarea:文本域通用属性设置默认值其它属性媒体标签 html 基本标签 标题标签 <hn></hn> n取值1~6 段落标签 段落之间自动进行换行 <p></p> 粗体标签 <b></b> 斜体标签 <i></i&
HTML初识——网页设计html基础
qq_45864756的博客
08-29 5576
html初识
HTML视频教程 网页制作基础合集+PPT文件及源码
12-26
本套视频内容全面，重点突出，同是了讲解内容与实例演示相辅相成，相信不管你是网站开发的初学者，还是具有一定基础的高手，都能从中有所收获。HTML是任何一 个学习网站开发的人都必须学的基础教程，内容虽然不多，...
【软件设计师-从小白到大牛】上午题基础篇_第六章软件工程基础（重点中的重点） (1)(1).html
10-15
【软件设计师-从小白到大牛】上午题基础篇_第六章软件工程基础（重点中的重点） (1)(1).html
【学习】【HTML】localStorage、sessionStorage、cookie
m0_61097007的博客
11-13 846
是 Web 存储的一种形式，它允许在浏览器中存储键值对。是网站通过 Web 浏览器留在访问者电脑上的一小段信息。）API 的一部分，用于在客户端浏览器中存储数据。
11.15 HTML
最新发布
m0_73618358的博客
11-16 406
Web标准也称为网页标准，由一系列标准组成，大部分由W3C （World Wide Web Consortium，万维网联盟）负责制定。：负责网页的结构（页面元素和内容）。：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）：负责网页的行为（交互效果）HTML标签都是预定义好的。例如：使用<a> 展示超链接，使用<img> 展示图片，<video>展示视频。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
HTML面试题
weixin_62668406的博客
11-14 883
src用于指定要加载的资源路径，常出现于标签由name（指定元数据的名称）和content（提供与name对应的数据）定义，用于描述网页。href用于指定的目标地址和在文档头部使用引入外部样式表时，用href制定样式表的地址。defer适用于需要在HTML完全解析后才运行的JS，尤其是依赖于DOM的JS，适用于包含多个JS的页面。5.
HTML之表单学习记录
qq_74474809的博客
11-14 331
表单
HTML基础与Web发展历史
本文将深入探讨HTML基础，重点关注HTML文档结构、语法以及常用标签。HTML，全称为HyperText Markup Language，是用于创建网页内容的标准标记语言。它允许我们将文本、图像、链接等元素组织成结构化的文档，并通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北辰星Charih

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值