HTML-老杜-笔记
2024-04-28 08:14:19
HTML
文章目录
- 1、系统结构：
- 2、什么是HTML？怎么开发HTML？怎么运行HTML？
- 3、HTML是谁制定的？
- 4、HTML格式
- 5、HTML基本标签
- 6、实体符号
- 7、表格
- 7.1建表
- 7.2、表格合并
- 7.3、thead tbody tfoot
- 8、背景图片和颜色
- 9、图片
- 10、超链接 热链接
- 11、列表
- 12、表单行
- 12.1、创建表单及提交
- 12.2、用户注册页面
- 12.3、下拉列表支持多选
- 12.4、file控件，hidden控件
- 12.5 、readonly和disabled控件
- 12.6、input控件的maxlength属性
- 13、HTML中元素的id属性
- 14、HTML中的div和span
1、系统结构：
B/S架构：
Browser / Server （浏览器/服务器的交互形式。）
Browser支持哪些语言：HTML CSS JavaScript
S是服务器端Server，Server端的语言很多：C C++ Java python…
B/S架构的系统有什么优点和缺点？
优点：升级方便，只升级服务器端代码即可。维护成本低。
缺点：速度慢、体验不好、界面不炫酷
B/S架构的系统有哪些代表？
京东百度天猫
C/S架构
Client / Server （客户端/服务器端的交互形式。）
缺点：升级麻烦，维护成本较高。
优点：速度快，体验好，界面炫酷。（娱乐型的系统多数是C/S架构的。）
常见的C/S架构的系统：
QQ微信支付宝
2、什么是HTML？怎么开发HTML？怎么运行HTML？
* HTML: Hyper Text Markup Language （超文本标记语言）由大量的标签组成，每一个标签都有开始标签和结束标签。<标签><标签><标签 属性名="属性值" 属性名="属性值"></标签></标签></标签>超文本: 流媒体、图片、声音、视频....* HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm
HTML也有专业的开发工具，例如：DreamWeaver、HBuilder.....* 直接采用浏览器打开HTML文件就是运行。
3、HTML是谁制定的？
W3C：世界万维网联盟
W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
HTML规范目前最高的版本是：HTML5.0，简称H5.
W3C制定了很多规范：
HTML/XML/http协议/https协议…
为了方便中国web前端程序员的开发，提供大量的帮助文档。为开发提供方便。
w3school:先出现的，和W3C没有关系
w3cschool：后出现的，和W3C没有关系
4、HTML格式
<!--1、这是HTML的注释2、加上以下代码的第一行就表示HTML5语法。去掉就表示HTML4.03、HTML不区分大小写，语法松散不严格。
-->
<!doctype html><!--根-->
<html><!--头--><head><!--网页标题，显示在网页左上角--><title>网页的标题</title></head><!--体--><body>网页的主体内容，欢迎学习HTML！</body><!--
</HTML>
-->
<!--
</Html>
-->
5、HTML基本标签
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>HTML的基本标签</title></head><body><!--段落标签 --><p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p><p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p><!--标题字 --><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><!--换行,br是一个独目标记 -->hello <br>world！<!-- 横线--><hr><!-- 横线设置颜色宽度 --><!--color和width都是hr标签的属性--><hr color = "red" width = "50%"><!--语法太松散了。--><hr color='green' width=30%><!--预留格式--><pre>for(int i = 0; i < 10; i++){System.out.println("i = " + i);}</pre><del>删除字</del><ins>插入字</ins><b>粗体字</b><i>斜体字</i><!-- 右上角加字 10^2-->10<sup>2</sup><!-- 右下角加字 102-->10<sub>m</sub><!--字体标签--><font color="red" size="50">字体标签</font></body>
</html>效果：
6、实体符号
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>实体符号</title></head><body><!--10 < 2 100 > 10-->b < a > c<br> b<a>c<br> b<a>c<!-- 实体符号特点是：以&开始，以;结束。< 是小于号 > 是大于号 --><!-- 空格 --><br>啊 b<br> a b<!-- 一个 代表一个空格 --></body>
</html>效果
7、表格
7.1建表
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>表格</title></head><body><!-- tr是一行 td是一格 --><!-- 三行三列 --><!--border="1px" 设置表格的边框为1像素宽度。width 宽度height 高度
-->
<!--align对齐方式-->
<br><br><br><br><br><br><br><br> <!-- 换行 -->
<center><h1>员工信息列表</h1></center>
<hr><table align = "center" border="1px" width="30%" hight="150"><tr align = "center"><td>a</td><td>b</td><td>c</td></tr><tr><td>d</td><td>e</td><td>f</td></tr><tr><td>x</td><td>y</td><td align = "center">z</td></tr></table></body>
</html>效果：
7.2、表格合并
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>单元格合并,以及th标签</title></head><body><!--注意事项：1、row合并的时候，删除“下面的”单元格 行合并2、col合并的时候，对删除哪个没有要求 列合并
--><table align = "center" border="1px" width="50%" hight="150"><!--<td>员工编号</td><td>员工薪资</td><td>部门名称</td>--><!-- th 标签也是单元格标签，比td多的是居中、加粗。--><th>员工编号</th><th>员工薪资</th><th>部门名称</th><tr><td>a</td><td>b</td><td>c</td></tr><tr><td>d</td><td>e</td><td rowspan="2">fz</td></tr><tr><!--<td>x</td>--><td colspan = "2">xy</td><!--<td>z</td>--></tr></table></body>
</html>效果
7.3、thead tbody tfoot
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>thead tbody tfoot 在table中不是必须的，只是这样做便于后期的JS代码的编写。</title></head><body><table border="1px" width="50%" hight="150"><!--头--><thead><th>员工编号</th><th>员工薪资</th><th>部门名称</th></thead><!--体--><tbody><tr><td>a</td><td>b</td><td>c</td></tr><tr><td>d</td><td>e</td><td rowspan="2">fz</td></tr></tbody><!--脚--><tfoot><tr><td colspan = "2">xy</td></tr></tfoot></table></body>
</html>
效果：
8、背景图片和颜色
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>背景颜色和背景图片</title></head><!--bgcolor : 设置背景色background : 设置背景图片以上的设置都是对背景进行设置。--><body bgcolor="aliceblue" background="img/123.jpg"></body>
</html>效果：
9、图片
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图片</title></head><body><!--1、设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放。2、img标签就是图片标签3、src属性是图片的路径4、width设置宽度,height设置高度5、title设置鼠标悬停时显示的信息。6、alt设置图片加载失败时显示的提示信息。--><img src="img/1123.jpg" width="100" title="这是一个图片" alt="图片找不到"/><br> <br> <br> <img src="img/123.jpg" width="100" title="这是一个图片" alt="图片找不到"/></body>
</html>效果：
10、超链接 热链接
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>超链接 热链接</title></head><!--超链接的特点：有下划线鼠标停留在超链接上面显示小手形状。点击超链接之后还能跳转页面。--><body><!--加入超链接--><a href = "http://www.baidu.com">百度</a><a href = "http://www.jd.com">京东</a><br /><br /><br /><!--href：hot references 热引用href属性后面一定是一个资源的地址。href后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径。--><a href="007-背景颜色和图片.html">007</a> <!--图片超链接--><br /><br /><br /><a href="007-背景颜色和图片.html"><img src="img/123.jpg" width="100" /></a><!-- 属性 --><!--超链接有一个target属性：可取值：_blank : 新窗口_self ： 当前窗口（默认就是这种方式。）_top ： 顶级窗口_parent ： 父窗口--> <br /><br /><br /><a href="007-背景颜色和图片.html" target="_blank"><img src="img/123.jpg" width="100" /></a></body>
</html>
超链接的作用：
通过超链接可以从浏览器向服务器发送请求。
浏览器向服务器发送数据（请求：request）
服务器向浏览器发送数据（响应：response）
B/S结构的系统：每一个请求都会对应一个响应。
用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？
本质上没有区别，都是向服务器发送请求。
从操作上来讲，超链接使用更方便。
效果：
11、列表
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列表</title></head><body><!--无序列表 --><ol type="A"><li>水果<ol type="i"><li>苹果</li><li>香蕉</li><li>甜瓜</li></ol></li><li>蔬菜</li><li>炒菜</li></ol><!-- 有序列表--><ul type="circle"><li>小学<ul type="disc"><li>北京<ul type="square"<li>1</li><li>1</li><li>1</li></ul></li><li>上海</li></ul></li><li>初中</li><li>高中</li></ul></body>
</html>效果：
12、表单行
12.1、创建表单及提交
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单</title></head><!--1、表单有什么用？收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。2、怎么画一个表单？使用form标签画表单。3、一个网页当中可以有多个表单form。4、表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址：action属性用来指定数据提交给哪个服务器。action属性和超链接中的href属性一样。都可以向服务器发送请求（request）5、http://192.168.111.3:8080/oa/save 这是请求路径，表单提交数据最终提交给：192.168.111.3机器上的8080端口对应的软件。--> <body><form action="http://192.168.111.3:8080/oa/save"><!-- 画一个提交按钮，这个按钮可以提交表单--><!-- 画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力。--><!-- 对于按钮来说，按钮的value属性用来指定按钮上显示的文本信息。默认是“提交”--><input type="submit" value="注册"/><!--这是一个普通按钮，不具备提交表单的能力。--><input type="button" value="设置按钮上的显示"/></form><br /><br /><br /><!--这个按钮和普通的超链接没什么太大的区别。（超链接和表单都可以向服务器发送请求，只不过表单发送请求的同时可以携带数据。）--><a href="http://www.baidu.com">百度</a><form action="http://www.baidu.com"><input type="submit" value="百度"/></form><br /><br /><br /><form action="http://localhost:8080/login">登录<input type="text" /><br>密码<input type="password" /><br><input type="submit" value="登录" /></form><br /><br /><br /><!-- 放在表格中 --><!--表单是以什么格式提交数据给服务器的？http://localhost:8080/login?username=abc&userpwd=111格式：action?name=value&name=value&name=value&name=value&name=value...W3C的HTTP协议规定的，必须以这种格式提交给服务器。重点强调：表单项写了name属性的，一律会提交给服务器。不想提交这一项，就不要写name属性。文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。当name没有写的时候，该项不会提交给服务器。但是当value没有写的时候，value的默认值是空字符串""，会将空字符串提交给服务器。java代码得到的是：String username = "";--><form action="http://localhost:8080/login"><table border="1px"><tr><td>用户名</td><td><input type="text" name="username"/></td></tr><tr><td>密码</td><td><input type="password" name="userpwd"/></td></tr><tr align="center"><td colspan="2"><input type="submit" value="登录" /> <input type="reset" value="清空"></td><!-- <td></td> --></tr></table></form></body>
</html>效果：
http://localhost:8080/login?username=111&userpwd=123
12.2、用户注册页面
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>用户注册</title></head><!--用户注册：用户名姓名密码确认密码性别兴趣爱好学历简介form表单method属性：get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上。当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交。method属性不指定，或者指定get，这种情况下都是get。只有当method属性指定为post的时候才是post请求。剩下所有的请求都是get请求。post提交的时候提交的数据格式和get还是一样的，只不过不再地址栏上显示出来。POST提交的数据还是：name=value&name=value&name=value.....--><body><form action="http://localhost:8080/register" method="get">用户名<input type="text" name="username" /><br />密码<input type="password" name="userpwd" /><br />确认密码<input type="password" /><br /> 性别 <!-- 单选 --><input type="radio" name="gender" value="1"/>男<input type="radio" name="gender" value="2" checked />女 <!--单选按钮的value必须手动指定--><!-- checked默认选中 --><br /> 兴趣爱好 <!-- 多选 --><input type="checkbox" name="interest" value="study1" checked />学习<input type="checkbox" name="interest" value="study2"/>学习<input type="checkbox" name="interest" value="study3" />学习<br /> 学历 <!-- 选项 --><select name="grade"><option value="gz" selected >高中</option> <!-- selected默认选中 --><option value="cz">初中</option><option value="xx">小学</option></select><br />简介 <!-- 文本域,没有value属性 --><textarea rows="10" cols="50" name="introduce"></textarea><br /><input type="submit" value="登录" /> <input type="reset" value="清空"></form><!--超链接也可以提交数据给服务器，但是提交的数据都是固定不变的。--><!--超链接是get请求。不是post请求。--><a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a></body>
</html>
效果：
http://localhost:8080/register?username=111&userpwd=123&gender=2&interest=study1&grade=gz&introduce=%E5%93%88%E5%93%88%E5%93%88%E5%93%88%E5%93%88
12.3、下拉列表支持多选
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>下拉列表支持多选</title></head><body><form><select multiple="multiple" size="2"> <!-- size设置选择个数 --><option>1111</option><option>2222</option><option>3333</option><option>4444</option><option>5555</option></select></form></body>
</html>效果
（按着ctrl可以多选）
12.4、file控件，hidden控件
<<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>file控件</title></head><body><!--file控件：文件上传专用。--><input type="file" /><form action="http://localhost:8080/save"><!--隐藏域：网页上看不到，但是表单提交的时候数据会自动提交给服务器。--><input type="hidden" name="userid" value="111"/>用户代码<input type="text" name="usercode"/><input type="submit" value="提交"/></form></body></html>
效果
hidden：
http://localhost:8080/save?userid=111&usercode=111
12.5 、readonly和disabled控件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>readonly disabled</title></head><body><!--readonly和disabled相同点：都是只读不能修改。但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交。）--><form action="http://localhost:8080/save">用户代码<input type="text" name="usercode" value="1111" vareadonly="readonly"/><br>用户姓名<input type="text" name="username" value="2322" disabled="disabled"/><br><input type="submit" value="提交"></form></body>
</html>效果：
http://localhost:8080/save?usercode=1111
12.6、input控件的maxlength属性
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>input控件的maxlength属性</title></head><body><!--maxlength 设置文本框中可输入的字符数量。--><input type="text" maxlength="3"/></body>
</html>效果：
最多输入三个
13、HTML中元素的id属性
1、在HTML文档当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。
2、注意：表单提交数据的时候，只和name有关系，和id无关。
3、id有什么用？
javascript语言：可以对HTML文档当中的任意节点进行增删改操作。
javascript可以对HTML文档当中的任意节点进行增删改，那么增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象。
id的存在让我们获取元素（节点）更方便。
4、HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id。
javascript主要就是对这棵DOM树上的节点进行增删改的。
DOM(Document)树。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML中元素的id属性</title></head><body id = "mybody"><form id = "myform"><input type="text" id = "username" name="username"/><input type="password" id = "userpwd" name="userpwd"/><!--id就是节点的身份证号码，不能重复。--><!--<input type="text" id="username" />--></form></body>
</html>14、HTML中的div和span
1、div和span是什么？有什么用？
div和span都可以称为“图层”
图层的作用是为了保证页面可以灵活的布局。
图层就是一个一个的盒子，div嵌套div就是盒子套盒子。
div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
2、其实最早的网页是采用table进行布局的，但是table不灵活，太死板。
现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。
3、div和span的区别？
div独自占用一行（默认情况下）
span不会独自占用一行。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML中的div和span</title></head><body><div id="div1">我是一个DIV</div><div id="div2">我是一个DIV</div><span id="span1">我是一个SPAN</span><span id="span2">我是一个SPAN</span><!-- 嵌套 --><div id="div3"><div><div>test</div></div></div></body>
</html>效果：
HTML-老杜-笔记相关推荐
- （B站动力节点老杜MySQL教程）MySQL课堂笔记-day01.txt
文章目录 文件来源/资料下载: MySQL课堂笔记-day01.txt 1.sql.DB.DBMS分别是什么,他们之间的关系? 2.什么是表? 3.学习MySQL主要还是学习通用的SQL语句,那么SQ ...
- （B站动力节点老杜MySQL教程）MySQL课堂笔记-day03.txt
文章目录 文件来源/资料下载: MySQL课堂笔记-day03.txt 1.约束 1.1.唯一性约束(unique) 1.2.主键约束 1.3.外键约束 2.存储引擎?(整个内容属于了解内容) 2.1 ...
- （B站动力节点老杜MySQL教程）MySQL课堂笔记-day02.txt
文章目录 文件来源/资料下载: MySQL课堂笔记-day02.txt 1.关于查询结果集的去重? 2.连接查询 2.1.什么是连接查询? 2.2.连接查询的分类? 2.3.在表的连接查询方面有一种现 ...
- 老杜（杜昶旭）GRE填空笔记部分整理-by“ 1哥”+ TTC相关资料
转自人人网: http://blog.renren.com/share/224527161/3020187378 谢谢前辈分享. GRE 句子填空题解题技巧(6常规+7快速) 老杜的逻辑很强大! ...
- （超详细笔记整理）动力节点_老杜 | JavaSE零基础 ：P329（方法） - P479
JAVA基础学习 第二篇文章的连接: (超详细笔记整理)动力节点_老杜 | JavaSE进阶 [P486之后]. 文章目录 JAVA基础学习 方法 Java的主要内存空间 栈数据结构 **栈数据结构: ...
- MYSQL(老杜数据库笔记)
1.卸载MYSQL mysql-5.5.36-win32 (1).msi进去remove 找到C盘下的program files(x86)目录进去把MYSQL目录删除然后把隐藏目录programDat ...
- 动力节点老杜javaweb笔记丰富总结
文章目录 Servlet 关于系统架构 B/S结构的系统通信原理(没有涉及到Java小程序) 关于WEB服务器软件 实现一个最基本的web应用(这个web应用中没有java小程序) 对于一个动态的we ...
- jdbc(B站动力节点老杜)学习笔记复习使用
jdbc概述 什么是jdbc? java语言连接数据库的一套接口,jdbc是SUN公司定制的一套接口 为什么要SUN公司要制定一套接口? 每个数据库的底层实现原理不同,程序员要想使用java连接某一个 ...
- mysql基础入门 day2 动力节点[老杜]课堂笔记
day_2 本文原作者为动力节点教学总监杜老师老杜在其课老杜带你学_mysql 入门基础(mysql 基础视频+数据库实战)所写讲课笔记 该文档和其涉及资料见文档末链接 本人将其讲课笔记 txt 下载 ...
- java基础入门传智播客 源码_Java-_2020年版Java零基础视频教程（Java 0基础，Java初学入门）魔鬼讲师老杜出品...
不会闲聊!!!不会扯淡!!!小UP只会分享与Java相关的学习资源 还记得那年带你Java入门的一声"吼"吗? B站目前播放量已经快到450多万播放量的Java零基础教程的创作者& ...
最新文章
- NVIDIA FFmpeg 转码技术分析
- 简明python教程购买-简明Python教程:基本语法
- 成功解决TypeError: slice indices must be integers or None or have an __index__ method
- dhcp request汉字乱码分析
- poj--2019 Cornfields 2维RMQ
- error while loading shared libraries: libstdc++.so.6: cannot open shared object file
- 信息学奥赛一本通（1061：求整数的和与均值）
- sphinx 使用
- loadrunner11 下载安装说明
- 中国姓氏英文翻译大全
- PayPal 支付接口詳解
- 计算机word大作业,计算机操作基础--Word大作业要求.doc
- FFmpeg —— 为视频添加文字水印（完美解决中文乱码，无需编译）
- 关键词搜索查找工具-批量关键词查找搜索工具-根据关键词自动采集素材软件
- iOS小技能： 开发 uni 原生插件(支持iOS Extension)
- Android webview登录手机QQ
- MySQL 客户端安装
- 【STM32】DAC详解
- 小白都能懂的 玩转docker系列之网络连通
- python多线程应用