1.HTML基础知识学习
2024-06-16 17:56:39
HTML基础知识学习
HTML的注释
<!--1、这是HTML的注释2、HTML不区分大小写，语法松散不严格
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页的标题</title>
</head><body>网页的主体内容，欢迎学习HTML！
</body></html>
HTML的基本标签
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML的基本标签</title>
</head><body><!--段落标记--><p>段落标记</p><p>段落标记</p><p>段落标记</p><p>段落标记</p><!--标题字：是HTML预留的格式，和word中的标题字相同--><h1>标题字</h1><h2>标题字</h2><h3>标题字</h3><h4>标题字</h4><h5>标题字</h5><h6>标题字</h6><!--换行标记，br标签是一个独目标记-->helloworld!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><!-- <sup> 标签定义上标文本 -->10<sup>2</sup><!-- <sub> 标签定义下标文本 -->10<sub>m</sub><!--字体标签 color设置颜色 size设置大小--><font color="red" size="50">字体标签</font></body></html>
实体符号
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实体符号</title>
</head><body>b<a>c<!-- 实体符号特点是：以&开始，以;结束< 是小于号 > 是大于号 -->b<a>c<!-- abc和def之间加多少空格也没用 -->abc def<br><!-- 必须使用实体符号 -->a bc</body></html>
表格
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格</title>
</head><body><br><br><br><br><br><br><br><br><center><h1>员工信息列表</h1></center><hr><!--border="1px" 设置表格的边框为1像素宽度可以像素也可以百分比width 宽度height 高度--><!--<table border="1px" width="300px">--><table align="center" border="1px" width="60%" height="150px"><!--align对齐方式--><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>
表格单元格合并，以及th标签
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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>
HTML的表格-thead tbody tfoot
<!DOCTYPE html>
<html lang="en"><head><!--这行代码的作用是告诉浏览器采用哪一种字符集打开当前页面注意：并不是设置当前页面的字符编码方式--><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>thead tbody tfoot 在table中不是必须的，只是这样做便于后期的JS代码的编写</title>
</head><body><table border="1px" width="50%"><!--头--><thead><tr><th>员工编号</th><th>员工薪资</th><th>部门名称</th></tr></thead><!--体--><tbody><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></tr></tbody><!--脚--><tfoot><tr><td>1</td><td>2</td><td>3</td></tr></tfoot></table>
</body></html>
背景颜色和背景图片
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景颜色和背景图片</title>
</head><!--bgcolor : 设置背景色background : 设置背景图片以上的设置都是对背景进行设置
-->
<body bgcolor="red" background="img/dlam.jpg">
</body></html>
图片img
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片img</title>
</head><body><!--1、设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放2、img标签就是图片标签3、src属性是图片的路径4、width设置宽度,height设置高度5、title设置鼠标悬停时显示的信息6、alt设置图片加载失败时显示的提示信息--><img src="img/哆啦梦.jpeg" width="100px" title="我是百度图片哦" alt="图片找不到哦!" /><img src="img/哆啦A梦.jpeg" width="100px" title="我是百度图片哦" alt="图片找不到哦!"></img><br><br><br><img src="img/哆啦A梦.jpeg" /></body></html>
超链接 热链接
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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/哆啦A梦.jpeg" width="120px" /></a><!--超链接有一个target属性：可取值：_blank : 新窗口_self ： 当前窗口（默认就是这种方式）_top ： 顶级窗口_parent ： 父窗口--><a href="https://www.hao123.com/" target="_self"><img src="img/哆啦A梦.jpeg" width="120px" /></a></body></html><!--
超链接的作用：通过超链接可以从浏览器向服务器发送请求浏览器向服务器发送数据（请求：request）服务器向浏览器发送数据（响应：response）B/S结构的系统：每一个请求都会对应一个响应B --请求--》SS --响应--》B用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？本质上没有区别，都是向服务器发送请求从操作上来讲，超链接使用更方便
-->
列表
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表</title>
</head><body><!--有序列表--><ol type="I"><li>水果<ol type="a"><li>苹果</li><li>西瓜</li><li>桃子</li></ol></li><li>蔬菜<ol><li>西红柿</li><li>青椒</li><li>青菜</li></ol></li><li>甜点</li><ol><li>蛋糕</li><li>果冻</li><li>雪糕</li></ol></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>
表单form
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单form</title>
</head><body><!--1、表单有什么用？收集用户信息表单展现之后，用户填写表单，点击提交按钮提交数据给服务器2、怎么画一个表单？使用form标签画表单3、一个网页当中可以有多个表单form4、表单最终是需要提交数据给服务器的，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>
用户注册的表单
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户注册的表单</title>
</head><body><!--用户注册：用户名姓名密码确认密码性别兴趣爱好学历简介form表单method属性：get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交method属性不指定，或者指定get，这种情况下都是get只有当method属性指定为post的时候才是post请求剩下所有的请求都是get请求post提交的时候提交的数据格式和get还是一样的，只不过不再地址栏上显示出来POST提交的数据还是：name=value&name=value&name=value.....--><form action="http://localhost:8080/jd/register" method="post">用户名<input type="text" name="username" /><br>密码<input type="password" name="userpwd" /><br>确认密码<input type="password" /><br>性别<!--单选按钮的value必须手动指定--><!-- checked 默认选中 --><input type="radio" name="gender" value="1" />男<input type="radio" name="gender" value="0" checked />女<br>兴趣爱好<input type="checkbox" name="interest" value="smoke" />抽烟<input type="checkbox" name="interest" value="drink" checked />喝酒<input type="checkbox" name="interest" value="fireHair" checked />烫头<br>学历<select name="grade"><option value="gz">高中</option><option value="dz">大专</option><!--selected 默认选中--><option value="bk" selected>本科</option> <option value="ss">硕士</option></select><br>简介 <!--文本域，文本域没有value属性，用户填写的内容就是value--><textarea rows="10" cols="60" 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/jd/register?username=jack&userpwd=111&gender=1&interest=smoke&interest=drink&grade=ss&introduce=jackgoodman
-->
下拉列表支持多选
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>下拉列表支持多选</title>
</head><body><!-- multiple="multiple" 支持多选的 size设置显示条目数量--><select multiple="multiple" size="2"><option>河北省</option><option>河南省</option><option>山东省</option><option>山西省</option></select>
</body></html>
file控件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>file控件</title>
</head><body><!--file控件：文件上传专用--><input type="file" /><form action="http://localhost:8080/oa/save"><!--隐藏域：网页上看不到，但是表单提交的时候数据会自动提交给服务器--><input type="hidden" name="userid" value="111" />用户代码<input type="text" name="usercode" /><input type="submit" value="提交" /></form></body></html>
readonly disabled
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>readonly disabled</title>
</head><body><!--readonly和disabled相同点：都是只读不能修改但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交）--><form action="http://localhost:8080/taobao/save">用户代码<input type="text" name="usercode" value="110" readonly /><br>用户姓名<input type="text" name="username" value="zhangsan" disabled /><br><input type="submit" value="提交数据" /></form>
</body></html>
maxlength
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>maxlength</title>
</head><body><!--maxlength 设置文本框中可输入的字符数量--><input type="text" maxlength="3" />
</body></html>
HTML中元素的id属性
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML中元素的id属性</title>
</head><body id="mybody"><!--1、在HTML文档当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识所以在同一个HTML文档当中id值不能重复2、注意：表单提交数据的时候，只和name有关系，和id无关3、id有什么用？javascript语言：可以对HTML文档当中的任意节点进行增删改操作javascript可以对HTML文档当中的任意节点进行增删改，那么增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象id的存在让我们获取元素（节点）更方便4、HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的idjavascript主要就是对这棵DOM树上的节点进行增删改的DOM(Document)树--><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>
HTML中的div和span
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML中的div和span</title>
</head><body><!--1、div和span是什么？有什么用？* div和span都可以称为“图层”* 图层的作用是为了保证页面可以灵活的布局* 图层就是一个一个的盒子，div嵌套div就是盒子套盒子* div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可2、其实最早的网页是采用table进行布局的，但是table不灵活，太死板现代的网页开发中div布局使用最多，几乎很少使用table进行布局了3、div和span的区别？div独自占用一行（默认情况下）span不会独自占用一行--><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>
1.HTML基础知识学习相关推荐
- 计算机二级二叉树基础知识,2017年计算机二级公共基础知识学习教程：树与二叉树...
(六)树与二叉树 1．树的基本概念 树是一种简单的非线性结构.在树结构中,数据元素之间有着明显的层次结构.在树的图形表示中,用直线连接两端的结点,上端点为前件,下端点为后件. 在树结构中,每一个结点只 ...
- Python 基础知识学习笔记——NumPy
Python基础知识学习笔记--NumPy 与 matlab 优秀的矩阵运算类似,python 提供了 numpy 库,这对熟悉 matlab 的用户来说非常友好.向量.矩阵和多维数组是数值计算中必不 ...
- Python 基础知识学习笔记——OpenCV（1）
Python 基础知识学习笔记--OpenCV(1) OpenCV是一个开源的跨平台计算机视觉和机器学习软件库,它轻量而且高效,被广泛的使用. 整理一下OpenCV学习笔记,以防忘记. 文章目录 Py ...
- Python基础知识学习笔记——Matplotlib绘图
Python基础知识学习笔记--Matplotlib绘图 整理python笔记,以防忘记 文章目录 Python基础知识学习笔记--Matplotlib绘图 一.绘图和可视化 1.导入模块 2.一个简 ...
- python基础知识学习笔记（2）
python基础知识学习笔记(2) 整理一下python基础知识,以防忘记 文章目录 python基础知识学习笔记(2) python简洁的一行代码 python简洁的一行代码 1.交换两个变量 # ...
- python基础知识学习笔记（1）
python 基础知识学习笔记(1) 总结一下Python基础知识,以防忘记. 文章目录 python 基础知识学习笔记(1) 一.起步 1.python安装与编译环境 二.变量和简单数据类型 三.列 ...
- qt checkbox 选中事件_Qt基础知识学习
Qt基础知识学习 Qt C++ SQLite ★★★★★ Qt · 简介 Qt是由Qt Company开发的面向对象的跨平台C++图形用户界面应用程序开发框架. 前期 · 准备 01 辨析Qt(开 ...
- oracle数据库基础知识总结,oracle数据库基础知识学习笔记
oracle数据库基础知识学习笔记 一.oracle数据库类型: Char: 字符型(最大长度2000,定长.不足时以空格补充) Varchar2:字符型 最大长度 4000,变长,实际长度由存储的 ...
- Linux操作系统基础知识学习
Q1.什么是GNU?Linux与GNU有什么关系? A: 1)GNU是GNU is Not Unix的递归缩写,是自由软件基金会(Free Software Foundation,FSF)的一个项目, ...
- 1. C++基础知识学习及其深入理解(面向对象部分还没学) -- 课程1完成
C++基础知识学习到深入理解及其部分算法学习 一.基础知识 现在把 北京大学 程序实际与算法一 视频刷了一遍,记录自己不懂的知识,所以知识点记录很零碎.这里使用的运行环境为Code::blocks ...
最新文章
- Python Open Source Project List
- (译) 函数式 JS #2: 函数!
- 【Java】练习题：蒙眼过马路
- [css] CSS的伪类和伪对象有什么不同？
- 前端学习（1609）：路由进阶和高阶
- 使用mysql++写入BLOB数据
- c# oldb连接_（转）C#连接OleDBConnection数据库的操作
- Git 将本地的一个分支上的代码合并到本地的另一个分支
- 对比鸿蒙，Google 的 Fuchsia 当前进度如何？
- 字典（JSON）与模型的转换
- cdr添加节点快捷键_常用CDR快捷键
- ffmpeg 将视频转换为图片
- 泰信科技携手浙大建高校IT运维平台
- Ubuntu系统修复GUID格式GPT硬盘的引导
- High Scalability创始人Todd Hoff：Facebook网络性能的秘密武器
- python手机app签到_Python实现App自动签到领取积分功能
- arcgis html图像标记,图片标记
- windows下Graphviz安装及入门教程（附下载链接）
- 20W了，从一颗种子开始 | 送书
- 【科研杂记_3】测高卫星