前端（HTML5基础学习笔记）
2024-04-15 12:01:44
以下学习路线都是基于自己看的黑马程序员视频总结而来
学习路线：HTML5 -> CSS3 -> H5C3
一、HTML简介
1. 网页
2. 常用游览器
3. Web标准（重点）
二、HTML 标签（上）
2. HTML 基本结构标签
3. 网页开发工具
vscode
- !：直接可以出来页面的框架
- ctrl + ：可以改变字体大小
3.1
<!DOCTYPE html>
<html lang="zh-CN">
<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>我利用vscode创建第一个网页页面</title>
</head>
<body>写代码是一件非常快乐的事情
</body>
</html>
4. HTML常用标签
4.2 标题标签
-
4.3 段落和换行标签
4.4 文本格式化标签
4.5
和 标签
主要是用于网页布局的
4.6 图像标签和路径
4.8 图像标签和路径
4.7 超链接标签
target：为到开窗户的方式，默认值是_self当前窗口打开页面，_blank信窗口打开页面
<a href="http://www.baidu.com"><img src="img.jpg"/></a>
<a href="img.zip">下载文件</a>
<a href="#live">个人生活</a>
<h4 id="live">个人生活</h4>
5. HTML中的注释和特殊字符
案例1:
<!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>Document</title>
</head>
<body><h1> 圣诞树的由来</h1>1. <a href="#oldman">圣诞树是怎样由来的</a> <br>2. <a href="#tree">圣诞老人的由来</a> <br>3. 圣诞树的由来 <br><h2>圣诞树是怎样由来的</h2><p>圣诞一直是庆祝圣诞节不可少的装饰物，如果家中没有圣诞树，就大大减少了过节气氛。关于圣诞树的来源有多种不同的传说。其中一个是说：大约在十六世纪，圣诞树最先出现在德国，德国人把长青的松柏枝拿到屋中去摆设，将之成为圣诞树。后来，由德国人马丁路德把蜡烛放在树林中的中数值，然后点燃蜡烛，使它看起来像是引导人们到玻璃很去。</p><img src="data:images/t1.gif"><h2 id="tree"><a href="oldman.html">圣诞老人</a>的由来</h2><p>另一个传说记载。在很久之前曾由一位农民，在圣诞节那天遇到一个穷苦小孩，他热情地接待了这个儿童。儿童临走时折下一根松枝插在了地上。松枝立即变成了一棵树，上面挂满礼物，以答谢农民的好意。</p><h2 id="tree">圣诞树的由来</h2><p> 圣诞树真正出现在圣诞节时，首先见于德国，之后又传入欧洲和美国，并以其优美的姿态，成为圣诞节不可缺少的装饰。圣诞树的种类繁多，有天然松柏圣诞树、也有人造圣诞树及白色圣诞树。每棵圣诞树上都挂满琳琅满目的装饰品，但每棵树的顶端必定有个特大的星星，象征三博士跟随该星而找到耶稣，而且也只有该家庭的一家之主可以把这颗希望之星挂上。</p><p><a href="http://www.baidu.com" target="_blank">百度以下</a></p>
</body>
</html>
三、HTML标签（下）
1.表格标签
1.1 表格的主要作用
1.2 表格的基本语法
1.3 表头单元格标签
注：表头单元格中的文字会居中，且加粗
1.4 表格属性
注意：
- 这些属性要写到表格标签table里面去
- cellpadding 是指单元边与内容之间的空白之间的距离；而cellspacing是指单元格之间的空白
eg:
1.5 表格结构标签
eg:
<!-- 合并单元格 -->
<table width="500" height="249" border="1" cellspacing="0">
<tr><td></td><td colspan="2"></td></tr><tr><td rowspan="2"></td><td></td><td></td>
</tr><tr><td></td><td></td>
</tr></table>
1.7 表格总结
2. 列表标签
2.1 无序列表
eg:
<h4>你喜欢的食物？</h4><ul><li>榴莲</li><li>臭豆腐</li><li>鲱鱼罐头</li></ul>
2.2 有序列表
2.3 自定义列表
eg:
<dl><dt>关注我们</dt><dd>新浪微博</dd><dd>官方微信</dd><dd>联系我们</dd></dl>
2.4 列表总结
3. 表单标签
3.1 为什么需要表单
3.2 表单的组成
3.3 表单域
3.4 表单控件
3.4.1 Input
eg:
<form action="demo.php" method="POST" name="name1"><!-- text 文本框 用户可以里面输入任何文字 -->用户名：<input type="text"><br><!-- password是密码框 用户看不到 -->密码：<input type="password"></form>
eg:
<form action="demo.php" method="POST" name="name1"><!-- text 文本框 用户可以里面输入任何文字 -->用户名：<input type="text" name="username" value="请输入用户名"><br><!-- password是密码框 用户看不到 -->密码：<input type="password" name="pwd"><br><!-- radio 单选按钮 可以实现多选一 --><!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name才可以实现多选1 --><!-- 单选按钮和复选框可以设置checked 属性，当页面打开的时候就可以默认选中这个按钮 -->性别：男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女" checked="checked"><br><!-- checkbox 多选按钮 可以实现多选-->爱好：吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉<input type="checkbox" name="hobby" value="睡觉"> 打豆豆<input type="checkbox" name="hobby" value="打豆豆" checked="checked"><br><!-- 点击了提交按钮，可以把表单域form 里面的表单元素 里面的值 提交给后台服务器 --><input type="submit" value="免费注册"><br><!-- 重置按钮可以还原表单元素初始的默认状态 --><input type="reset" value="重新设置"><br>普通按钮 button 后期结合Js 搭配使用<input type="button" value="获取短信验证码"><br>文件域 使用场景 上传文件使用的上传头像：<input type="file"></form>
3.4.2 标签
eg:
<label for="text">用户名</label>：<input type="text" id="text"><input type="radio" id="nan" name="sex"> <label for="nan">男</label><input type="radio" id="nv" name="sex"> <label for="nv">女</label>
3.4.3 select 下拉表单元素
eg:
<form>籍贯：<select><option>山东</option><option>北京</option><option>天津</option><option selected="selected">火星</option></select></form>
3.4.4 文本域
eg:
<form>今日反馈：<textarea cols="50" rows="5">pink老师，我知道这个反馈留言是textarea来做的</textarea></form>
3.5 表单元素几个总结点
4. 综合案例
<!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>Document</title>
</head><body><h4>青春不常在，抓紧谈恋爱</h4><table width="600"><!-- 第一行 --><tr><td>性别：</td><td><input type="radio" name="sex" id="man"> <label for="man"><img src="data:images/man.jpg"> 男</label><input type="radio" name="sex" id="woman"> <label for="woman"><img src="data:images/woman.jpg"> 女</label></td></tr><!-- 第二行 --><tr><td>生日：</td><td><select><option>--请选择年份--</option><option>2001</option><option>2002</option><option>2003</option></select><select><option>--请选择月份--</option><option>1</option><option>2</option><option>3</option></select><select><option>--请选择日份--</option><option>1</option><option>2</option><option>3</option></select></td></tr><!-- 第三行 --><tr><td>所在地区</td><td><input type="text" value="北京思密达"></td></tr><!-- 第四行 --><tr><td>婚姻状况</td><td><input type="radio" name="marry" id="wei" checked="checked"> <label for="wei">未婚</label> <input type="radio" name="marry" id="li"> <label for="li">离婚</label> <input type="radio" name="marry" id="yi"><label for="yi">已婚</label></td></tr><!-- 第五行 --><tr><td>学历</td><td><input type="text" value="博士后"></td></tr><!-- 第六行 --><tr><td>喜欢类型</td><td><input type="checkbox" name="love"> 妩媚的<input type="checkbox" name="love"> 可爱的<input type="checkbox" name="love"> 小鲜肉<input type="checkbox" name="love"> 老腊肉<input type="checkbox" name="love" checked="checked"> 都喜欢</td></tr><!-- 第七行 --><tr><td>个人介绍</td><td><textarea>个人简介</textarea></td></tr><!-- 第八行 --><tr><td></td><td><input type="submit" value="免费注册"></td></tr><!-- 第九行 --><tr><td></td><td><input type="checkbox" checked=checked> 我同意注册条款和会员加入标准</td></tr><!-- 第十行 --><tr><td></td><td><a href="#">我是会员，立即登录</a></td></tr><!-- 第十一行 --><tr><td></td><td><h5>我承诺</h5><ul><li>年满18岁、单身</li><li>抱着严肃的态度</li><li>真诚寻找另一半</li></ul></td></tr></table>
</body></html>
</tr><!-- 第九行 --><tr><td></td><td><input type="checkbox" checked=checked> 我同意注册条款和会员加入标准</td></tr><!-- 第十行 --><tr><td></td><td><a href="#">我是会员，立即登录</a></td></tr><!-- 第十一行 --><tr><td></td><td><h5>我承诺</h5><ul><li>年满18岁、单身</li><li>抱着严肃的态度</li><li>真诚寻找另一半</li></ul></td></tr></table>
```
前端（HTML5基础学习笔记）相关推荐
- 前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介 二.css语法规范 三.css代码风格 四.css选择器的作用 五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
- web前端html5+css3学习笔记(1)
开启我的第一篇博客~~~ 记录学习html+css的笔记 目录 一.认识两位先驱 二.计算机的组成 1.硬件 2.软件 三.浏览器与内核 四.网页标准 五.HTML历史* 一.认识两位先驱 图灵:人工 ...
- web前端html5+css3学习笔记(3)——标签
目录 一.排版标签 1.标题标签 2.段落标签 二.语义标签 三.块级元素和行内元素 1.块级元素 2.行内元素 四.文本标签 1.常用文本标签 2.不常用文本标签 五.图片标签 六.相对路径与绝对路 ...
- web前端+HTML5+CSS3学习笔记
文章目录 HTML认知 网页的基本组成和本质 HTML初始概念 HTML标签学习 HTML基础 列表 表格 表单 语义化标签 字符实体 CSS基础 基础认知 选择器 文字字体 Emmet语法 CSS进 ...
- web前端html5+css3学习笔记(2)
文章目录 目录 一.标签 二.HTML基本结构 三.vscode 1.插件 2.注释 3.文档声明 四.字符编码 五.设置语言 六.页面图标 一.标签 标签(也叫元素),需要小写 <marque ...
- HTML5+CSS3学习笔记（第1章）HTML基础
HTML5+CSS3学习笔记(第1章)HTML基础 今天是居家隔离第一天,自学HTML5. 1.1HTML概述 什么是HTML HTML是一种标记语言.(Hyper Text Markup langu ...
- 2022年最新前端零基础学习路径
2022年最新前端零基础学习路径 近几年互联网行业可谓发展火热,也因此新生了很多职业,而这众多的新生职业中备受瞩目的当属web前端工程师.因此现在越来越多人选择学习web前端技术,想要通过这份技能赢得 ...
- 千峰HTML5+CSS3学习笔记
千峰HTML5+CSS3学习笔记 文章目录 千峰HTML5+CSS3学习笔记 写在前面 1. 前言 2. HTML 3. CSS 3.1 选择器 3.2 CSS属性 4. 盒子模型 4.1 溢出属性 ...
- HTML html5基础详细笔记 第一个模块
第01章-前端核心技术-HTML5基础 学习目标 了解什么是HTML 掌握HTML标签.元素的概念 重点 掌握HTML常用头部元素的使用 重点 掌握HTML标题.段落.文本.图片等排版 重点 难点 掌 ...
最新文章
- 军哥lnmp一键安装包nginx支持pathinfo配置
- 15个创意示例教您如何自定义 404 错误页面
- Java @Transient 注解使用
- HttpClient库设置超时
- 关于PHP上传文件时配置 php.ini 中的 upload_tmp_dir
- python二叉树最大深度的计算_Python学习笔记24（二叉树遍历、最大深度、最大宽度）...
- 概率论 —— 分析计算机系统和网络的可靠性和通用性
- Phoenix Tips (8) 多租户
- iphone中各种文件路径
- office visio 替代_5款替代微软Visio的开源免费软件（转）
- shell命令之 tr
- hawk物联网组态工具_有哪些开源html5的组态软件
- 安居客 Android 项目架构演进
- DEV GridView同时多列排序，附上排序列是实体解决右击没有排序箭头的问题
- ISO8601时间格式转换为Date
- jquery衬衣产品内容详情页
- 微信怎么加入黑名单？微信黑名单怎么恢复好友
- 堡垒机JumpServer(六)：内网管理云端服务器
- 【Vue】报错信息： [WDS] Errors while compiling. Reload prevented.
- 练习-任意输入n个从小到大的整数的数列，然后输入一个整数插入到数列中，使数列保持从小到大的顺序