前端学习：学习笔记（HTML部分）
前端学习：学习笔记（HTML部分）
HTML简介
1.HTML是什么?
超文本标记语言
超文本:文字/图片/音频/视频....
标记/标签
2.HTML的用途?
是用来编写静态网页的.
搭建整个网页的.
3.区分正斜杠和反斜杠?
/ 正斜杠
\ 反斜杠
4.开始标签和结束标签
<html>
<body>
<div>
</div>
<div>
</div>
</BODY>
</html>
5.书写规范:
==>标签之间嵌套要清晰
==>标签之间的层次关系一定要写好
==>HTML的标签尽量使用小写<不区分大小写的>
==>命名的时候尽量使用英语
==>代码一定写好注释
第一个HTML
<head>
<!-- 设置整个网页的编码格式 -->
<meta charset="UTF-8">
<!-- 设置网页标题-->
<title>百度一下,你就知道</title>
</head> <body text="#00FF00" bgcolor="silver" background=""> <h1>HTLLO WORLD --HTML</h1>
<br>
打开运行界面: windows+R </body>
排版标签
<body>
<!--
换行
在HTML代码中,无论有多少个空格,浏览器解析后都认为只有一个空格
==>空格 -->
我是第1行</br>
我是第2行<br>
我是第3行<br>
我是第4行<br>
我是第5行<br>
我是第6行<br> <p>
欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
</p> <hr width="50%" size="7" color="red" align="left"> <p>
心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！
心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！
心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！心脏是最强壮的肌肉！！！！
</p> </body>
文字标签
<body>
<font color="red" size="7" face="微软雅黑">我是文字1号</font>
<font color="blue">我是文字2号</font> <h1>我是h1标签</h1><br>
<h2>我是h2标签</h2><br>
<h3>我是h3标签</h3><br>
<h4>我是h4标签</h4><br>
<h5>我是h5标签</h5><br>
<h6>我是h6标签</h6><br> <b><font size="7" color="aquamarine">我是一个很强壮的字</font></b>
<strong><font size="7" color="aquamarine">我是一个很强壮的字</font></strong> </body>
无序标签
<body>
<h1>最火音乐榜</h1>
<ul type="disc">
<li>说好不哭</li>
<li>枫</li>
<li>东风破</li>
<li>千里之外</li>
</ul> <h1>最火音乐榜</h1>
<ul type="circle">
<li>说好不哭</li>
<li>枫</li>
<li>东风破</li>
<li>千里之外</li>
</ul> <h1>最火音乐榜</h1>
<ul type="square">
<li>说好不哭</li>
<li>枫</li>
<li>东风破</li>
<li>千里之外</li>
</ul> </body>
有序标签
<body>
<h1>中国票房排行榜</h1>
<ol type="1" start="5">
<li>战狼</li>
<li>哪吒</li>
<li>流浪地球</li>
<li>诛仙</li>
</ol>
</body>
图形标签
<body>
<!--
绝对路径: 安徽省合肥市高新区xxxxxxx
相对路径: 对面的班级 -->
<img src="img/tp.jpg" width="300px" height="300px" border="10px" align="middle" alt="加载文件丢失" title="微软"/>
我是一张微软的图标,我很流弊的！！！！！！！！！ </body>
链接标签
<body>
<a href="http://www.baidu.com">百度一下</a><br>
<a href="http://www.nba.com">NBA一下</a><br>
<a href="http://www.qq.com">腾讯一下</a><br>
<a href="http://www.taobao.com">淘宝一下</a><br><br><br><br> <a href="Demo01文字标签.html" target="_blank">Demo01</a> </body>
表格标签
<body>
<!-- 新建一个3行5列的表格
消除单元格和单元格之间的间距
cellpadding="0px"
cellspacing="0px"
-->
<table bgcolor="aquamarine" width="500px" height="300px" border="2px" cellpadding="0px" cellspacing="0px">
<caption>表格标题1</caption>
<tr>
<th>序号</th>
<th>序号</th>
<th>序号</th>
<th>序号</th>
<th>序号</th>
</tr> <tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr> <tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
</tr> </table>
<br>
<br>
<br>
<br>
<br> <table bgcolor="aquamarine" width="500px" height="300px" border="2px" cellpadding="0px" cellspacing="0px">
<caption>表格标题1</caption>
<tr>
<th>序号</th>
<th>序号</th>
<th>序号</th>
<th>序号</th>
<th>序号</th>
</tr> <tr>
<td>2-1</td>
<td>2-2</td>
<td colspan="3">2-3</td>
</tr> <tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
</tr> </table>
<br>
<br>
<br>
<br>
<br> <table bgcolor="aquamarine" width="500px" height="300px" border="2px" cellpadding="0px" cellspacing="0px">
<caption>表格标题3</caption>
<tr>
<th>序号</th>
<th>序号</th>
<th>序号</th>
<th>序号</th>
<th>序号</th>
</tr> <tr>
<td>2-1</td>
<td rowspan="2">2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr> <tr>
<td>3-1</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
</tr> </table>
块级 行级标签
<body>
<!--
块级标签: div p table
不允许其他元素并排
设置样式是管用的,设置的高度和宽度也是有效的
行级标签: span
允许其他元素并排
设置样式是管用的,但是设置的高度和宽度是无效的
--> <div style="height: 300px;width: 300px;background-color: yellow;"> 我是DIV1号 </div> <div style="height: 300px;width: 300px;background-color: red;"> 我是DIV2号 </div> <table>
<tr>
<td>1-1</td>
<td>1-1</td>
<td>1-1</td>
</tr>
</table>
我是一个路过的字 <!--
<span style="height: 300px;width: 300px;background-color: blue;"> 我是SPAN1号 </span> <span style="height: 300px;width: 300px;background-color: red;"> 我是SPAN2号 </span>
--> </body>
表格布局
<body>
<table width="100%" height="1000px">
<tr width="100%" height="20%" bgcolor="red">
<td width="100%" colspan="3"></td>
</tr> <tr width="100%" height="80%" bgcolor="blueviolet">
<td bgcolor="yellowgreen"></td>
<td bgcolor="darkgreen"></td>
<td bgcolor="yellowgreen"></td>
</tr>
</table>
</body>
表单
<body>
<div style="height: 400px;width: 50%;background-color: azure;margin: auto;border: 5px solid red;">
<form name="user" action="#" method="get">
<label>姓名:</label>
<input type="text" value="请输入您的姓名" name="username"/><br>
<label>年龄:</label>
<input type="text" value="请输入您的年龄" name="userage"/><br>
<label>性别:</label>
男<input type="radio" name="usersex"/>女<input type="radio" name="usersex" checked="checked"/>
<br>
<label>爱好:</label>
敲代码<input type="checkbox" />
打篮球<input type="checkbox" />
跑步<input type="checkbox" />
睡觉<input type="checkbox" /><br>
<input type="image" src="img/tp01.jpg" /><br><br>
请上传您的照片：<input type="file" />
<input type="hidden" value="1"/><br><br>
学历:
<select>
<option>研究生</option>
<option>大学本科</option>
<option>大学专科</option>
<option>中专</option>
<option>其他</option>
</select>
<br><br>
户籍:
<select>
<option>安徽省</option>
<option>浙江省</option>
<option>江苏省</option>
<option>广东省</option>
<option>广西省</option>
</select>
<select>
<option>合肥市</option>
<option>安庆市</option>
<option>黄山市</option>
<option>阜阳市</option>
<option>淮南市</option>
</select>
<br><br>
<input type="button" value="按钮" />
<input type="submit" />
<input type="reset" /><br>
</form>
</div>
练习：课程表的网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<!-- 5行6列的表格 -->
<table height="1000px" width="60%" align="center" border="2px" cellspacing="5px">
<tr height="350px">
<td colspan="6">
<img src="img/tp.jpg" width="100%" height="350px"/>
</td>
</tr> <tr height="50px" align="center">
<td width="17%" bgcolor="#D8F368">首页</td>
<td bgcolor="#D8F368">学校简介</td>
<td bgcolor="#D8F368">学生风采</td>
<td bgcolor="#D8F368">师资力量</td>
<td bgcolor="#D8F368">服务中心</td>
<td bgcolor="#D8F368">联系方式</td>
</tr> <tr height="400px">
<td colspan="2">
<table width="60%" style="font-size: 25px;">
<tr><td bgcolor="#D8F368">学校课程表</td></tr>
<tr><td bgcolor="#D8F368">教师日程表</td></tr>
<tr><td bgcolor="#D8F368">活动安排</td></tr>
</table>
</td> <!--课程表-->
<td colspan="4" >
<table bgcolor=" #FFFFFF" height="70%" width="80%" border="1px" cellspacing="5px">
<caption><h1>课程表</h1></caption>
<tr border="2px" >
<td width="17%" bgcolor="#FFFFCC"> </td>
<td bgcolor="#FFFFCC">星期一</td>
<td bgcolor="#FFFFCC">星期二</td>
<td bgcolor="#FFFFCC">星期三</td>
<td bgcolor="#FFFFCC">星期四</td>
<td bgcolor="#FFFFCC">星期五</td>
</tr> <tr>
<td bgcolor="#FFFFCC">第一节</td>
<td >语文</td>
<td >语文</td>
<td >数学</td>
<td >英语</td>
<td>数学</td>
</tr> <tr>
<td bgcolor="#FFFFCC">第二节</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>语文</td>
<td>语文</td>
</tr> <tr>
<td bgcolor="#FFFFCC">第三节</td>
<td>体育</td>
<td>生物</td>
<td>地理</td>
<td>音乐</td>
<td>美术</td>
</tr> <tr>
<td bgcolor="#FFFFCC">第四节</td>
<td>美术</td>
<td>历史</td>
<td>体育</td>
<td>生物</td>
<td>物理</td>
</tr> <tr align="center" >
<td colspan="6" bgcolor="#FFFFCC">
午间休息
</td>
</tr> <tr>
<td bgcolor="#FFFFCC">第五节</td>
<td>地理</td>
<td>英语</td>
<td>语文</td>
<td>数学</td>
<td>历史</td>
</tr> <tr>
<td bgcolor="#FFFFCC">第六节</td>
<td>语文</td>
<td>化学</td>
<td>物理</td>
<td>语文</td>
<td>英语</td>
</tr> <tr>
<td bgcolor="#FFFFCC">第七节</td>
<td>自习</td>
<td>音乐</td>
<td>自习</td>
<td>英语</td>
<td>化学</td>
</tr>
</table> </td>
</tr> <tr height="50px" align="center" >
<td colspan="6" bgcolor="#D8F368" >
版权所有：实验小学
</td>
</tr> </table> </body>
</html>
内联框架标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head> <frameset cols="20%,*">
<frame src="scanner.html" name="left"/>
<frame src="show.html" name="right"/>
</frameset> </html>
内联框架练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head> <frameset rows="20%,50%,*">
<frame src="Demo01文字标签.html"/>
<frame src="Demo02无序列表.html"/>
<frame src="Demo03有序列表.html"/>
</frameset> </html>
scanner
<body>
<h1><a href="http://www.baidu.com" target="right">跳转至百度</a></h1>
<h1><a href="http://www.taobao.com" target="right">跳转至淘宝</a></h1>
<h1><a href="http://www.qq.com" target="right">跳转至腾讯</a></h1>
</body>
show
<body bgcolor="aquamarine">
</body>
其他的标签
<head>
<meta charset="UTF-8">
<title></title>
<!--导入外部的css样式表-->
<link />
</head> <!--多用于插入JS代码-->
<script type="text/javascript"> </script> <body> <h1>请输出一个 大于符号 > </h1>
<h1>请输出一个 小于符号 < </h1> </body>
前端学习：学习笔记（HTML部分）的更多相关文章
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- spring mvc 及NUI前端框架学习笔记
spring mvc 及NUI前端框架学习笔记 页面传值 一.同一页面 直接通过$J.getbyName("id").setValue(id); Set值即可 二.跳转页面(bus ...
- 前端学习:学习笔记(JS部分）
前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解) JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介 新建步骤 <body ...
- WCF入门教程（四）通过Host代码方式来承载服务 一个WCF使用TCP协议进行通协的例子 jquery ajax调用WCF，采用System.ServiceModel.WebHttpBinding System.ServiceModel.WSHttpBinding协议 学习WCF笔记之二 无废话WCF入门教程一[什么是WCF]
WCF入门教程(四)通过Host代码方式来承载服务 Posted on 2014-05-15 13:03 停留的风 阅读(7681) 评论(0) 编辑 收藏 WCF入门教程(四)通过Host代码方式来 ...
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
- 前端MVC学习总结——AngularJS验证、过滤器
前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...
- WEB前端开发学习：源码canvas 雪
WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> ...
- web前端开发学习：jQuery的原型中的init
web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...
- DSP28377S - ADC学习编程笔记
DSP28377S - ADC学习编程笔记 彭会锋 2016-08-04 20:19:52 1 ADC类型导致的配置区别 F28377S的ADC类型是Type 4类型,我的理解是不同类型的ADC采 ...
- Web前端的学习介绍(截止今天还有Bootstrap没有学，要腾点时间解决掉)
Web前端的学习分为以下几个阶段,具体的学习路线图如图所示. 第一阶段——HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静 ...
随机推荐
- 【设计模式】Builder
前言 Builder设计模式,允许一步一步构建一个复杂的对象.将构建步骤抽象出来,让每个具体的Builder去实现构建步骤的内容.这样子就可以用同样的构建步骤,构建出不一样的对象.在Director类 ...
- 修改源代码时不需要重启tomcat服务器
我们在写JSP + Servlet 的时修改了Java代码就要重新启动服务器.十分麻烦. 为了解决这个问题我们可以将服务器改成debug 模式.就是按调试状态这样修改Java代码就不用再重新启动服务器 ...
- 替换 Docker 或 Laradock 中 Debian 系统镜像源解决软件安装问题
Docker Debian 镜像源替换 因多数默认的 Docker 镜像为国外的,而采用的镜像源也是国外的,故访问很慢,所以我们需要替换为国内的(比如阿里云或163等). 163 - Debian A ...
- Xml格式数据转map工具类
前言[ 最近在写一个业务,由于调UPS物流的接口返回的是一个xml格式的数据结果,我现在要拿到xml中某个节点的值,而这个xml数据是多节点多层级的,并且这某个节点的值有可能只有一条值,有可能有多条, ...
- 10、shell编程+流程控制+分支嵌套
SHELL 编程 shell 是一个命令解释器,侦听用户指令.启动这些指令.将结果返回给用户(交互式的shell) shell 也是一种简单的程序设计语言.利用它可以编写一些系统脚本. ...
- pytest_前置后置
今天总结下pytest,pytest简直就是python自动化中的高富帅,各种操作,哈哈 这次总结主要涉及到了以下几点: 1.unittest中的setUp.tearDown.setUpClass.t ...
- React 借助pubsub-js进行兄弟组件的传递值
1===> raect中两个 兄弟组件 互相通信使用的技术 使用 消息订阅(subscribe)和发布(publish)机制 s儿 伯 s rai b pʌ b lɪ ʃ 有一个库可以处理 Pu ...
- 1.python进行if条件相等时候的条件
在我们进行 if == 判断的时候!其中判断的条件: 1:其值是不是一样 3:其类型是否是一样 ###二者少了任何一个都不可以 >>> pwd = 23>>> cc ...
- MySQL数据库练习
1.数据准备 以下为db文件,通过Navicat Premium导入数据库 /* 数据导入: Navicat Premium Data Transfer Source Server : localho ...
- NOIP 2004 合唱队形
洛谷 P1091 合唱队形 https://www.luogu.org/problemnew/show/P1091 JDOJ 1271: [NOIP2004]合唱队形 T3 https://neooj ...