网页前端培训笔记（HTML标签）
2024-06-03 12:28:52
学习网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili
HTML 教程 | 菜鸟教程 (runoob.com)
1、安装编译器
HBuilder X：https://download1.dcloud.net.cn/download/HBuilderX.3.3.10.20220124.zip
2、基础操作
注意选择普通项目，使用基本HTML项目模板较为方便
3、HTML基本框架
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body></body>
</html>
4、网页前端常用标签
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><h2>标题</h2><p>段落</p><br> 换行<!--水平线标签hr 单标签常用属性color 颜色size 粗细width 长度（百分比 或 px）--><hr><hr color="red" size="3" width="50%" align="left"><!-- 列表有序列表 ol无序列表 ul--><ul type="squre"><li>林俊杰</li><li>周杰伦</li></ul> <ol type="A"><li>林俊杰</li><li>周杰伦</li></ol> <!-- div标签块级元素默认占全部的宽度，有多少内容高度占多少可以设置div的宽（width）高（height）通过align设置内容对齐方式--><div style="width: 500px;height: 100px;" align="center">这是一个div</div><!-- span标签行内元素（不会自动换行）--><span>这是一个span</span><hr><!-- 格式化标签font标签color 字体颜色size 字体尺寸face 字体风格pre预格式化标签，保留空格和换行b 加粗i 倾斜u 下划线del 中划线sup 上标sub 下标--><font color="aqua" size="5" face="楷体">你好</font><br>hello word<pre>hellow word</pre><p><b>以后</b>的<strong>你</strong>会感谢<del>现在</del>努力的自己</p><!-- a标签超链接标签，用于链接到一个新的URL常用属性：href：需要跳转的地址（必须属性）target：窗口打开的方式_self：当前窗口（默认）_blank：在空白窗口作为锚点：a标签的name属性值<a name="top"></a>其他的id属性值<div id="top"></a>锚点的使用：<a href="#top"></a>--><a href="#" target="_self">在当前页面刷一下</a><hr><a href="#">回到顶部</a><h2 id="yyjl">演绎经历</h2><!-- --><a href="#yyjl">回到 演绎经历</a><br><a name="yyjl">演绎的经历</a><br><!-- --><a href="#yyjl">回到 演绎的经历</a><br><!-- img标签向网页中嵌入一张图标常用属性src：需要引入图片的地址（必须属性）alt：当图片破损或不存在时，显示文本的内容title：当鼠标悬停在图片上时显示的文本width：图片的宽height：高border：图片边框--><img src="img/bd.jpg" width="500" height="400" border="2" title="文字" alt="这是一张坏掉的图"/><hr><!-- 表格标签table 表格tr 行td 标准单元格th 表头（字体居中，加粗效果）table的属性width 表格的宽度border 边框align 对齐方式style="border-collapse: collapse;" 合并表格的边框tr的属性align 行的内容对齐方式--><table width="400px" align="center" border="1" style="border-collapse: collapse;"><tr><th>编号</th><th>姓名</th><th>年龄</th></tr><tr align="center" bgcolor="bisque"><td>1</td><td>张三</td><td>18</td></tr><tr><td>2</td><td>李四</td><td>19</td></tr><tr><td>3</td><td>王五</td><td>20</td></tr></table></body>
</html>
5、表单标签
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- form标签表单标签，块级元素，会自动换行将数据传输给服务器常用属性：action 表单提交的地址id 唯一标识name 名称target 表单提交打开方式（当前窗口）method 提交方式get请求参数会直接跟在url后面，用问号拼接安全性差，传递的数据量小，效率高（是post速度的2倍），有缓存post请求参数不跟在url后，会放在请求体中安全性高，传输数据量大，速度相对较慢，无缓存 --><form action="http://www.baidu.com" method="get" id="myform"><!-- 表单元素要设置name属性值，否则数据无法传递！！！input元素type 表单元素的类型text 文本框password 密码框radio 单选框（需要设置一组相同的name属性值）checkbox 复选框（需要设置一组相同的name属性值）button 普通按钮hidden 隐藏域（用来存放需要传递给服务器，但不需要显示的数据）file 文件域（上传文件）date 日期框submit 提交按钮reset 重置按钮image 图片按钮（提交按钮）value 表单元素的值checkd 是否选中（单选框/复选框）disabled 是否禁用maxlength 允许输入的最大字符textare文本域cols 和 rowslabel标签设置label标签的for属性值与表单元素的id属性值对应，当点击label标签时，会自动给表单元素聚焦button按钮typebutton普通按钮submit提交按钮（默认值）reset重置按钮select下拉选项<select name=""><option value="值">文本</option></select>常用属性：value 设置值selected 设置选中状态-->编号：<input type="hidden" name="userId" value="1" /> <br>姓名：<input type="text" value="zhangsan" name="userName" /> <br><label for="upow">密码</label>：<input type="password" id="upow" name="userPwd" maxlength="6" /> <br>性别：男 <input type="radio" name="userSex" value="man" checked="checked" /> 女 <input type="radio" name="userSex" value="woman" /> <br> 爱好：唱歌<input type="checkbox" name="userhobby" value="sing" /> 跳舞<input type="checkbox" name="userhobby" value="dance" checkd /> 说唱<input type="checkbox" name="userhobby" value="rap" disabled="disabled /"> <br>生日：<input type="date" name="userDate" /> <br>头像：<input type="file" name="userDate" /> <br>简介：<textarea name="remark" rows="5" cols="50">11111</textarea><br>城市：<select name="city" multiple="multiple" size="3"><option>请选择城市</option><option value="Beijing" selected="selected">北京</option><option value="Shanghai" >上海</option><option>深圳</option></select><br><input type="button" value="普通按钮" /> <input type="reset" value="重置按钮" /> <input type="submit" value="提交按钮" /> <!-- <input type="image" src="img/bd.jpg" /> --><button type="button">"普通按钮"</button><button type="submit">"提交按钮"</button><button type="reset">"重置按钮"</button></form></body>
</html>
6、常用字符
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 字符字体< <> >空格  版权符 ©--><> ©</body>
</html>
网页前端培训笔记（HTML标签）相关推荐
- 第二次网页前端培训笔记
1.学习网址 hbuilder第二次培训笔记 - 幕布 2.基础操作 3.html基本框架 <!DOCTYPE html> <html> <head> ...
- 梅科尔工作室-第一次网页前端培训笔记（HTML常用标签）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 1.安装编译器 vs hBuilder X等等(本人主 ...
- 第一次网页前端培训笔记（Html基础语法和常用标签）
一.什么是HTML HTML 是用来描述网页的一种语言.HTML 是一种在 Web 上使用的通用标记语言.HTML 允许你格式化文本,添加图片,创建链接.输入表单.框架和表格等等,并可将之存为文本文件 ...
- 第一次网页前端培训笔记
一.编辑软件 HbuilderX HBuilderX 自述文件 二.html的第一次学习 1.学习链接:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础 ...
- 第七次网页前端培训笔记
B站视频网址:(本次仅涉及P24-P26)[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 菜鸟教程网 ...
- 第五次网页前端培训笔记（js1）
1.js的基本使用 JavaScript(简称"JS") 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多 ...
- 第二次网页前端培训笔记（html表单）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 1. 表单标签和表单元素 (1)表单标签:form用于 ...
- 第八次网页前端培训笔记
B站视频网址:(本次仅涉及P40-P43和P60)[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 菜 ...
- 网页前端培训笔记第八课
视频: [优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili js表单 <!DOCTYPE html> & ...
最新文章
- python 百度词典_用 Python 3 写的命令行百度词典
- 深究AngularJS——ng-checked（回写：带真实案例代码）
- 使用MAT做jvm的GC Roots溯源
- 百天搞懂Java(一) - JDK环境配置
- 详解语义分割评价指标
- iOS如何实现语音播报及后台播放
- Linux Shell脚本去掉几类常见文件中的注释
- java多线程详细讲解_Java多线程例子讲解
- python类与对象做项目_python 类和对象
- calendar.getinstance()获取的是什么时间_时间管理技能培训.ppt
- 人月神话-外科手术队伍：团队建设
- 深度学习模型在训练集上很好而在测试集表现得不好而拟合次数并不多_机器学习中的过拟合，欠拟合和偏倚方差折衷...
- webgis之geowebcache跨域
- linux在VM下分辨率的问题
- 黑客X档案0911期PDF电子书
- 架构设计常见的几类问题
- vue使用lodop打印控件实现浏览器兼容打印
- 关于vmware无法访问互联网
- 2017吉比特校招一个编程笔试题
- 微信开发之——接口调用频率xianzh