Web前端学习笔记:day01(HTML)
2024-07-01 08:56:55
HTML
1.HTML概述
1.1 什么是HTML
HTML 是超文本标记语言，Hyper Text Markup Language
超文本：有流媒体、图片、声音的存在标记语言：所有标记语言都由标签组成，有开始标签也有结束标签 ，例如：<html></html> 、<body></body>
主要用来展示页面，修饰数据
1.2 HTML基本元素
HTML标签
标签属性
引号样式
HTML特点:语法松散不严格,还有就是不区分大小写
2.HTML基本标签
段落标签 ：<p></p>可以把 HTML 文档分割为若干段落
标题字 ：<h1></h1> 至<h6></h6>标题是通过 <h1> - <h6> 等标签进行定义的，<h1>定义最大标签，<h6> 定义最小标签
换行 ：<br><br>可插入一个简单的换行符,需要注意的是<br> 标签是空标签 ,它没有结束标签
注释 ：<!-- 这是 HTML 注释 -->
align 属性 ： 对齐方式属性align = "center" 居中对齐
水平线 ：<hr/>
3.HTML常用实体符号
空格  
小于号 <
大于号 >
乘号 ×
除号 ÷
3.HTML表格
HTML中的table标签实现表格
表格的作用：主要用作布局先把表格画出来，然后往表格中放入数据
现在网页采用 table的比较少，采用 div 较多
表格常用元素
table标签 ：<table></table>table标签的border属性 ：表格的边框属性table标签的align属性 ：规定表格相对于周围元素的对齐方式table标签的width属性 ：width=”100px” ：表示整个表格的宽度为 100 像素width=”50%” ：表示整个表格占整个浏览器 50% 的宽度table 标签的 height 属性height=”200px” ：表示整个表格的高度为 200 像素height=”50%” ：表示整个表格占浏览器 50% 的高度
tr,td标签：每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。tr标签 ： 定义 HTML 表格中的行td标签 ： 定义 HTML 表格中的标准单元格
HTML表格有两类单元格标准表头单元 th - 包含头部信息（由 th 元素创建）th标签 ： 表头单元 ，包含头部信息标准单元 td - 包含数据（由 td 元素创建）
thead 、tbody 、tfoot 标签thead标签：定义表格的表头，该标签用于组合 HTML 表格的表头内容tbody标签：表格主体tfood 标签：定义表格的页脚（脚注或表注）
单元格合并rowspan 行合并属性：规定单元格可横跨的行数colspan 列合并属性：规定单元格可横跨的列数
实例一:创建 table 表格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table</title>
</head>
<body><!--border="1px" 设置表格的边框为1像素宽度。width 宽度height 高度--><h1 align="center">Table</h1><hr color="red"/><table align="center" border="1px" width="500px" height="300px"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></table>
</body>
</html>
实例二：行合并属性 ，列合并性属性rowspan ，colspan
<!doctype html>
<html><head><title>表格单元格合并，以及th标签</title></head><body><!--注意事项：1、row合并的时候，删除“下面的”单元格2、col合并的时候，对删除哪个没有要求。--><table border="1px" width="50%"><tr><!--<td>员工编号</td><td>员工薪资</td><td>部门名称</td>--><!-- th 标签也是单元格标签，比td多的是居中、加粗。--><th>员工编号</th><th>员工薪资</th><th>部门名称</th></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>a</td><td>b</td><td rowspan="2">f</td></tr><tr><td colspan="2">d</td><!--<td>f</td>--></tr></table></body>
</html>
实例三：thead tbody tfoot标签
加上去对表格其实没有影响，只是为了让我们更好地维护表格
4.HTML背景色背景图片
bgcolor，background属性
bgcolor : 设置背景色
background : 设置背景图片
实例一
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>背景颜色和背景图片</title></head><!--bgcolor : 设置背景色background : 设置背景图片以上的设置都是对背景进行设置。--><body bgcolor="red" background="img/bd_logo1.png"></body>
</html>5.HTML图片
图片相关基本元素
1、设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放。
2、img标签就是图片标签
3、src属性是图片的路径
4、width设置宽度,height设置高度
5、title设置鼠标悬停时显示的信息。
6、alt设置图片加载失败时显示的提示信息。
实例一
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图片img</title></head><body><!--1、设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放。2、img标签就是图片标签3、src属性是图片的路径4、width设置宽度,height设置高度5、title设置鼠标悬停时显示的信息。6、alt设置图片加载失败时显示的提示信息。--><img src="img/bd_logo1.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"/><img src="img/bd_logo1.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"></img><br><br><br><img src="img/bd_logo1.png" /></body>
</html>6.HTML超链接
超链接的特点
1、有下划线
2、鼠标停留在超链接上面显示小手形状。
3、点击超链接之后还能跳转页面。
超链接的作用
超链接的作用：通过超链接可以从浏览器向服务器发送请求。浏览器向服务器发送数据（请求：request）服务器向浏览器发送数据（响应：response）B/S结构的系统：每一个请求都会对应一个响应。用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？本质上没有区别，都是向服务器发送请求。从操作上来讲，超链接使用更方便。
超链接相关元素
1、a标签就是超链接标签
2、href：hot references 热引用href属性后面一定是一个资源的地址。href后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径。
3、超链接有一个target属性：可取值：_blank : 新窗口_self ： 当前窗口（默认就是这种方式。）_top ： 顶级窗口_parent ： 父窗口
实例一
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>超链接 热链接</title></head><body><!--超链接的特点：有下划线鼠标停留在超链接上面显示小手形状。点击超链接之后还能跳转页面。--><a href="http://www.baidu.com">百度</a><a href="http://news.baidu.com/">百度新闻</a><a href="http://www.jd.com/">京东商城</a><a href="http://www.tmall.com/">天猫</a><a href="http://www.126.com/">126邮箱</a><br><br><!--href：hot references 热引用href属性后面一定是一个资源的地址。href后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径。--><a href="007-背景颜色和背景图片.html">007</a><!--图片超链接--><a href="https://www.hao123.com/"><img src="img/hao123.png" width="120px"/></a><!--超链接有一个target属性：可取值：_blank : 新窗口_self ： 当前窗口（默认就是这种方式。）_top ： 顶级窗口_parent ： 父窗口--><a href="https://www.hao123.com/" target="_self"><img src="img/hao123.png" width="120px"/></a></body>
</html><!--超链接的作用：通过超链接可以从浏览器向服务器发送请求。浏览器向服务器发送数据（请求：request）服务器向浏览器发送数据（响应：response）B/S结构的系统：每一个请求都会对应一个响应。用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？本质上没有区别，都是向服务器发送请求。从操作上来讲，超链接使用更方便。
-->
7.列表
无序列表
1、<ul><li></li></ul>
2、type属性可选值:disc 默认值 ，实心圆circle 空心圆square 实心方块
有序列表
1、<ol><li></li></ol>
2、type属性可选值:大小写字母阿拉伯数字I、II、III、IV、V
实例一
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列表</title></head><body><!--有序列表--><ol type="I"><li>水果<ol type="a"><li>苹果</li><li>西瓜</li><li>桃子</li></ol></li><li>蔬菜<ol><li>西红柿</li></ol></li><li>甜点</li></ol><!--无序列表--><ul type="circle"><li>中国<ul type="square"><li>北京<ul type="disc"><li>东城区</li><li>西城区</li><li>海淀区</li><li>朝阳区</li></ul></li><li>天津</li><li>上海</li></ul></li><li>美国</li><li>日本</li></ul></body>
</html>
8.表单
表单基本信息
1、表单有什么用？收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。
2、怎么画一个表单？使用form标签画表单。
3、一个网页当中可以有多个表单form。
4、表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址：action属性用来指定数据提交给哪个服务器。action属性和超链接中的href属性一样。都可以向服务器发送请求（request）
5、method 属性：用来设置表单提交 数据 的方式：get 、postget 方式：为默认提交方式，提交的数据会显示在地址栏中post 方式：提交的数据不会在地址栏中显示，相对安全
6、http://192.168.111.3:8080/oa/save 这是请求路径，表单提交数据最终提交给：192.168.111.3机器上的8080端口对应的软件。
7、表单是以什么格式提交数据给服务器的？http://localhost:8080/jd/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 = "";
表单下常用标签信息
1、input 标签
1.1、input type 类型为 text: 文本输入域<input type=”text” name=”username” />
1.2、 input type 类型为 password: 密码输入框<input type=”password” name=”password” />
1.3、input type 类型为 radio: 单选按钮<input type=”radio” name=”sex” />
1.4、input type 类型为 checkbox ：多选按钮<input type=”checkbox” name=”interest” />
1.5、input type 类型为 submit ：表单提交按钮<input type=”submit” name=” 注册” />
1.6、input type 类型为 button: 普通按钮<input type=”button” name=” 提交注册” />
1.7、input type 类型为 reset: 表单重置按钮<input type=”reset” name=” 重置” />
1.8 input type 类型为 file ：文件上传组件<input type=”file” name=”filename” />
1.9 input type 类型为 hidden ：隐藏控件在浏览器上看不到，但提交表单的时候会提交给服务器<input type=”hidden” name=”usercode” />
1.10只读控件 readonly ：只能看不能改， 数据 也会提交给服务器<input type=”text” name=”username” value=”zhangsan” readonly />
1.11 无效控件 disabled ： 只能看不能改，数据不会提交给服务器<input type=”text” name=”user” value=”wangwu” disabled />
1.12、input 控件 size 属 性： 设置文本框的 可视 长度<input type=”text” name=”username” size=”10” />
1.13、 input 控件 maxlength 属性： 设置文本框中可编写的长度<input type=”text” name=”uname” maxlength=”100” />
2、下拉列表标签：<select><option></option></select><select name=”grade” ><option value=”gz”> 高中</option><option value=”dz”> 大专</option></select>
3、 文本域标签 <textarea></texarea><textarea name=”introduce” cols=”50” rows=”10”></textarea>
实例一
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单form</title></head><body><!--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端口对应的软件。--><form action="http://192.168.111.3:8080/oa/save"><!-- 画一个提交按钮，这个按钮可以提交表单--><!-- 画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力。--><!-- 对于按钮来说，按钮的value属性用来指定按钮上显示的文本信息。--><input type="submit" value="登录"/><!--这是一个普通按钮，不具备提交表单的能力。--><input type="button" value="设置按钮上显示的文本"/></form><a href="http://www.baidu.com">百度</a><!--这个按钮和普通的超链接没什么太大的区别。（超链接和表单都可以向服务器发送请求，只不过表单发送请求的同时可以携带数据。）--><form action="http://www.baidu.com"><input type="submit" value="百度" /></form><br><br><form action="http://localhost:8080/jd/login">用户名<input type="text" /><br>密码<input type="password" /><br><input type="submit" value="登录" /></form><!--表单是以什么格式提交数据给服务器的？http://localhost:8080/jd/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/jd/login"><table><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></tr></table></form><!--submit必须放到form标签内部--><input type="submit" value="登录" /><!--必须放到form标签内部--><input type="reset" value="清空" /><form></form></body>
</html>9.HTML标签的id属性
1、HTML标签：
在HTML页面中任何一个标签都可以看做一个节点整个HTML页面可以看作是节点的集合整个HTML页面也可以看作一棵树这棵树的根是<html></html>, 这个根节点里有两个子节点<head></head>和<body></body>任何一个节点都有id属性，id在同一个页面中不能重复，id是这个节点的身份证号，是这个节点的唯一标识
2、id属性的作用任何一个标签都有id属性在同一个页面中id属性的值 不能重复 ，是唯一标识通过节点的 id 获取该节点对象，然后对这个节点对象进行增删改的操作从而达到页面的动态效果
10.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不会独自占用一行。
Web前端学习笔记:day01(HTML)相关推荐
- web前端学习笔记（最新）
web前端学习笔记 大家好,我是链表哥,新的学期,新的学习,我会为您展示我的学习进程. 一:什么是WEB前端? 所谓的Web前端指的是用户所能接触到的,并服务于用户的前沿端口,经我们程序员编辑修饰后展 ...
- Web前端学习笔记（1）
文章目录 一.第一部分 1.1内容一 Web前端导入 二.第二部分 2.1内容一 HTML和CSS的定义 三.第三部分 3.1内容一 宇宙第一编译器Vs Code 3.2内容二 快捷键的使用 四.第四 ...
- Web前端学习笔记学习路线图
随着互联网的快速发展, web前端行业发展前景较好,虽然web前端薪资高入门门槛低, 但是俗话说的好:入门容易,精通难.web前端开发的知识点繁多,所以,要想真正全部掌握web前端工程师开发技能,并非 ...
- web前端学习笔记总页面
学习资料 自学视频 求知讲堂web前端html+css 参考文档 MDN 书单 你不知道JavaScript JavaScript设计模式和开发实践 css世界 css揭秘 什么是web前端开发 we ...
- 极客学院web前端学习笔记 （一）概况
终于到暑假啦!暑假开始重新(x)学习web前端,其实html和css早已有所接触,但是js接触较少,直接原因是下学期大概要给学弟学妹们解答一些前端基础相关的问题,所以希望在暑假好好整理归纳一下知识体系 ...
- web前端学习笔记（2）
文章目录 前言 二十一.嵌套列表 21.1 嵌套代码 21.2 小练习 二十二.表格标签 22.1表格相关标签 二十三.表格属性 23.1表格属性 二十四.表单input标签 24.1表单标签 24. ...
- web前端学习笔记（初识HTML）
目录 1.简介 2.Html的历史: 3.常用的工具 4.网页的基本信息: 5.网页的标签: 6.安装我们的idea 7.配置idea 8.特殊符号: 9.链接标签: 10.锚链接: 11.功能性链接 ...
- web前端学习笔记——JQuery
web前端开发基础 第五章--JQuery 传送门:第一章:HTML | 第二章:CSS | 第三章:html5和CSS3 | 第四章:Javascript(part 1) | 第四章--Javasc ...
- Web前端学习笔记15：Web前端开发：jQuery总结
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
最新文章
- Python3算法基础练习：编程100例（11 ~ 15）
- 一次堆外OOM问题的排查过程
- linux/window 下 solr5.1 tomcat7.x 环境搭建即简单功能测试
- 华农java实验7_国家实验教学示范中心
- boot lib分离 spring_SpringBoot打包分离依赖jar和资源文件
- 1024对话内核大神谢宝友
- python 获取浏览器句柄下的网页控件_python webdriver操作浏览器句柄
- python3+selenium入门12-警告框处理
- 注册测绘师 案例分析
- bp神经网络算法的优缺点,bp神经网络缺点及克服
- 教你win10忘记密码强制重置密码的方法
- Python解决数字棒球游戏
- 如何通过两步验证来保护您的Apple ID
- 卸载kerberos
- jforum无法发布帖子问题
- 485传感器接入串口交换机采集方案
- 大连理工计算机科学与技术,学院概况-大连理工大学计算机科学与技术学院
- 格林酒店2019年第三季度营收同比增长20.1%
- PS 高光/阴影 精准选区方法
- 如何从小红书社区里面下载高清图片和视频？