【Web】HTML入门小结
文章目录
复习一波 简单记录 - 慕课网 - 从网页搭建入门JavaWeb
HTML是什么
HTML语法学习
HTML表格标签学习
HTML表单标签学习
HTML?
大名:HyperText Markup language
寓意:超文本 标记 语言
超文本 标记 语言
出名:HTML4.01 & HTML5
主要形式:.htm,.html
标记、标签、元素、节点
HTML关于文档声明怎么理解
W3C 标准文档的提出者 发布者 维护者
浏览器厂商 实现者
兼容性
HTML5
文档结构组成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个页面</title>
</head>
<body>
</body>
</html>
<style> 样式 <script>交互脚本 <link>链接外部资源
闭合的标签
首行声明 一包两断
<!DOCTYPE html> <html> <head> <body>
<!doctype <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML 初识元素/标签
元素
1、元素/标签/节点
2、元素顺序
3、元素的属性
4、标题、段落、链接、图像、列表、块
5、块级元素与行内元素
6、格式化和注释
HTML 初识元素/标签
HTML 初识元素/标签
<开始标签 […属性]>标签内容<结束标签>
<标签名>标签内容</标签名>
例子:<p>Hello World 土不土 太熟练了</p>
例外:<input type="text" value="haha"/>
input输入框
</br>
换行
注意:属性只能在开始标签中定义
HTML结构元素的顺序
结构性元素 首行声明 一包两段
html文档结构
- 文档版本声明
- Html标签
- head
- meta
- title
- link
- style
- script
- body
- 可以包含style、script
- 其他语义化标签
- head
HTML属性
属:给予元素基本标识
性:样式 或 描述元素特征
通用属性/全局属性
- 能够在所有的标签中使用,id,class,style就这些吗?no but。。。其他的厂商支持性不好 比如conteneditable 鼠标点上去编辑元素
特有属性
- colspan,type,value。。。
HTML 标签、段落、链接、图像、列表、div
是不是有点土?
放到现在来讲 这叫做 语义化
“更古” 语义化标签 和 “现代”语义化标签
比较现代的 section、article、footer、header
HTML的语法 标签
HTML语义化标签
标题
HTML 标题 Heading Content
标签
标题内容
共有6级
作用 浏览器会自动给你附加标题样式(然而我们不想要…css改)
搜索引擎或者阅读器能够根据标题来识别 生成文档大纲
问:为什么只有6级呢?附加的样式?用的多吗?
HTML标题 Heading Content
标识 、标题标签
浏览器的附加样式加粗、字号变大 不想要的 手动干预
为什么只有六级呢
六级够用 、一级32px(像素) 长度单位
很多浏览器最小到12px的
按F12打开浏览器的控制台
选择元素 查看样式
em 一般em:px 1:16 h3 1.17 18.72差不多
user agent stylesheet 浏览器给的样式(不会想要浏览器的样式 我们会覆盖掉的)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习html标题</title>
</head>
<body>
<h1>一级标题 字体大小32px</h1>
<h2>二级标题 字体大小24px</h1>
<h3>三级标题 字体大小18px(18.72) 约等于</h1>
<h4>四级标题 字体大小16px</h1>
<h5>五级标题 字体大小14px(13.28) 约等于</h1>
<h6>六级标题 字体大小12px</h1>
<h6>六级标题</h6>
<h7>七级标题 不存在的</h7>
<h8>八级标题 不存在的</h8>
</body>
</html>
一到6级标题
段落
HTML 段落 paragraph
标签
段落内容
作用 划分段落
注意:默认浏览器样式 空标签也是“占地方”的,段落的出场率很高
paragraph
一段一段的
独自占一段的
<p></p>
外边距 空标签也占地方的
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTMl 段落标签</title>
<style>
p {
margin:0;
padding:0;
}
</style>
</head>
<body>
<p>段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1</p>
<p></p>
<p>段落内容2</p>
</body>
</html>
浏览器潜在风险 默认样式
出场率很高
font
HTML 字体 font
标签 <font>文字内容</font>
作用:格式化文本
注意:(1)只能控制字体集(Helvetica,Arial)、大小和颜色
(2)别用!别用!别用!
格式化
字体集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- size -->
<font>慕课html</font>
<!-- face -->
<font face="Helvetica">html 入门</font>
<!-- color -->
<font color="red">多姿多彩的html</font>
<font color="#d8d8d8">多姿多彩的html</font>
<font color="rgb(168,178,188)">多姿多彩的html</font>
</body>
</html>
font 在 HTML5 过时的、没有意义的标签 别用
没有了font标签那怎么定义文字内容样式呢?CSS使用font属性。
HTMl链接
链接
标签 <a></a>
作用 文档内部锚点、跳转到外部文档、下载资源
属性 href,target
怎么禁止跳转呢?<a href="javascript:;">随便你点 能跳走算我输……</a>
去掉下划线呢?text-decoration: none;
href 跳到哪里
target _blank新标签新窗口打开 _self当前文档窗口打开
锚点
id 标签通用属性 唯一标识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接</title>
<style>
.content {
height:800px;
}
a {
color:#333333;
text-decoration: none;
}
a:visited {
color:#333333;
}
</style>
</head>
<body>
<a href="http://www.imooc.com/" target="_blank">慕课网-新窗口</a>
</br>
<a href="http://www.imooc.com/" target="_self">慕课网-本窗口</a>
</br>
<a href="#titleThird">页面内锚点</a>
</br>
<a href="javascript:;">随便你点 能跳走算我输……</a>
</br>
<div class="content">一堆内容</div>
</br>
<h3 id="titleThird">咳咳 第三章</h3>
</body>
</html>
<a href="#titleThird">页面内锚点</a> </br>
我要跳转页面 titleThird区
<a href="javascript:;">随便你点 能跳走算我输……</a>
死链接
<a href="javascript:void(0);">随便你点 能跳走算我输……</a>
去掉下划线 链接丑爆了
a {
color:#333333;
text-decoration: none;
}
a:visited {
color:#333333;
}
cursor:none; 小手
伪类 visited
HTML图像
图像
标签 <img />
作用 插入图像
属性 src,alt
贴士(1)支持格式:PNG/JPEG/GIF/PDF
(2)非标签方式:background
富文本 超文本 图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像</title>
<style>
.imooc-logo {
background: url(../logo.png);
width: 200px;
height: 80px;
}
</style>
</head>
<body>
<p class="imooc-logo">
</p>
</body>
</html>
<img/>
单对的标签
src alt
<img src="" alt="" />
alt 图片无法正常显示 给提示
引入PDF必需是单页的
非标签方式:background
<p class="imooc-logo">
</p>
class:标识,用来指定标签的类名
.imooc-logo {
background: url(../logo.png);
width: 200px;
height: 80px;
}
路径-资源你在哪里?
- 绝对路径
- 相对路径
经常用相对路径的
注意:如果是Windows系统,绝对路径是从盘符开始的,如C盘html文件夹下的index.html文件,路径应显示为C:\html\logo.jpg
麻烦
还是相对路径好呀
下一级./img/logo.png
上一级 ../logn.png
向上来一层
HTML列表
列表
标签
<ul>
<li></li>
</ul>
<ol>
<li></li>
</ol>
<dl>
<dt></dt>
<dd></dd>
</dl>
作用 插入无序、有序、定义列表
提示(1)type属性项目符号样式(disc,circle,square)不建议使用!
(2)只用<ul></Ul
>就好了
order
ul无序
ol有序
disc circle square
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 无序列表 -->
<ul type="circle">
<li>苹果</li>
<li>鸭梨</li>
<li>水蜜桃</li>
</ul>
<!-- 有序列表 -->
<ol type="square">
<li>烤冷面</li>
<li>煎饼果子</li>
<li>麻辣烫</li>
</ol>
<!-- 定义列表 -->
<dl type="disc">
<dt>正数</dt>
<dd>大于0的自然数</dd>
<dt>负数</dt>
<dd>小于0的自然数</dd>
</dl>
</body>
</html>
HTML div
标签 <div></div>
作用 布局
提示:非常非常常用且重要 现代布局都靠它
万能标签 都靠它了
非常超级无敌非常好用的
无语义的标签
非常常用且重要 现代布局都靠它
开发一个网站 使用div 频繁
内容不知道什么 包裹 那就用div吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div大神</title>
</head>
<body>
<div>
哈哈哈
</div>
<div>
非常无敌好用的
</div>
<div>
div
</div>
</body>
</html>
HTML 块级元素与行内元素
HTML 块级元素与行内元素
1、如何理解块级和行内呢?看定义再看例子
2、哪些是呢?我可不想干记忆哦!
格式化上下文
https://www.w3.org/TR/CSS22/visuren.html#block-formatting
Block formatting contexts
垂直
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
Inline formatting contexts
An inline formatting context is established by a block container box that contains no block-level boxes. In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.
水平
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块级元素与行内元素</title>
<style>
.eg-to-block {
display: block;
}
.eg-to-inline {
display:inline;
}
</style>
</head>
<body>
<!-- 定义
https://www.w3.org/TR/CSS22/visuren.html#block-formatting
-->
<h2>1.块级元素</h2>
<h3>(1)块级元素转换为行内元素</h3>
<div class="eg-to-inline">
A 想不想并排在一起
</div>
<div class="eg-to-inline">
B 想啊 手牵手
</div>
<h3>(2)块级元素均设置了外边距 产生的叠加</h3>
<div style="margin-bottom:50px">
</div>
<ul style="margin-top:50px">
<li>不着边界</li>
</ul>
<h2>2.行内元素</h2>
<p>
<a href="#">点我跳走</a>
<span>亮相也蛮多的标签</span>
</p>
<h3>(1)行内元素无法设置宽高</h3>
<p>
<span style="height: 1000px">我为什么不能有1000的高度呜呜</span>
</p>
<h3>(2)行内元素无法设置垂直方向的外边距 内边距</h3>
<p>
<span style="margin-top: 1000px;padding-top:200px">我为什么不能垂直的外边距呜呜</span>
</p>
<h3>(3)行内元素可以设置水平方向的外边距 边框 内边距</h3>
<p>
<span style="margin-right: 10px;padding-right:20px">旁边的小子,我要离你远点</span>
<span>瞧不起谁呀</span>
</p>
<h3>(4)行内元素转换为块级元素</h3>
<p>
<a class="eg-to-block" href="#">我被换成块级了yeah!</a>
<span>哎呦大哥变身了</span>
</p>
</body>
</html>
块级元素 占满一行 上下挨着
行内元素 水平挨着 没意义 包起来
块级元素 布局
行内元素 包裹内部 取决于内容
表格是个块 里面单元格不是
HTML注释
1、行注释
2、段落注释
3、条件注释 兼容性检查必备
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注释</title>
</head>
<body>
<!--下面几行是看不到的-->
<!--<div>
TODO
这里要放一个导航123</div>
123456
12345-->
<br/>
<div>TODO TODO</div>
<br/>
<!-- 能看到吗-->
<!-- 列表begin -->
<div>
TODO 这里要放一个列表
</div>
<!-- 列表end -->
<!--[if IE 6]>
<div>您的浏览器过于陈旧 请更新版本到最新</div>
<![endif]-->
</body>
</html>
行注释
<!-- 能看到吗-->
段落注释
<!--下面几行是看不到的-->
<!--<div>
TODO
这里要放一个导航123</div>
123456
12345-->
条件注释标签只在IE10以下版本中的浏览器中生效的
HTML常用带格式作用的标签
HTML常用带格式作用的标签
1、文本格式化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<b>加粗字体</b>
<br />
<strong>另一种粗体</strong>
<br />
<big>大号字体</big>
<br />
<em>强调字体</em>
<br />
<i>斜体</i>
<br />
<small>小号字体</small>
<br />
This text contains
<sub>下标</sub>
<br />
This text contains
<sup>上标</sup>
</body>
</html>
一般不使用的
2、预格式文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>预格式标签</title>
</head>
<body>
<h1>下面为一段javascript代码</h1>
<pre>
var a = "";
a = "Hello World";
alert(a);
</pre>
</body>
</html>
代码 开发者不使用的
CSS
3、引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>格式化标签-引用</title>
</head>
<body>
<h1>引用演示</h1>
<blockquote>
引用自w3c官方HTML标准文档
</blockquote>
</body>
</html>
4、删除线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除线</title>
</head>
<body>
<h1>删除线</h1>
<p>其实我有一双美丽的<del>大腿</del> <ins>请填空</ins></p>
<p>看起来很美好 然而兼容性不好</p>
</body>
</html>
都是兼容性不好 一般使用CSS
HTML表格
标签
作用 布局,呈现需要表格布局的内容
贴士 表格标签是块级元素 表格样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>201720180701</td>
<td>懒懒懒</td>
<td>男</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完整结构表格</title>
</head>
<body>
<style>
</style>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>11111</td>
<td>兰兰懒</td>
<td>400</td>
</tr>
<tr>
<td>22222</td>
<td>憨逼</td>
<td>400</td>
</tr>
</tbody>
</table>
</body>
</html>
HTML表格
重要知识点
边框问题 border
单元格间距 cellspacing
单元格边距 cellpadding
单元格跨行 rowspan
单元格跨列 colspan
内容对齐 align
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格重要属性</title>
</head>
<body>
<table align="center" border=1 cellspacing="1">
<tbody align="center">
<tr >
<td>学号</td>
<td>姓名</td>
<td>性别</td>
</tr>
<tr >
<td>222</td>
<td>菜鸡文</td>
<td rowspan="2">男</td>
</tr>
<tr >
<td>333</td>
<td>柳铁柱</td>
<tr >
<td colspan="3">按钮</td>
</tr>
</tbody>
</table>
</body>
</html>
HTML表单
HTML表单
标签<form>...</form>
作用:收集用户输入的内容(文本、文件)
属性 action 提交到的服务端地址
method:指定提交时用哪种HTTP方式:POST/GET
name:标识
autocomplete:浏览器是否可以自动填充
enctype:指定表单内容编码
重要表单元素
input 文本、密码、单选、多选、按钮、数字、日期、颜色、范围、邮件、URL、文件
select
textarea
button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="">
姓名<input type="text" />
</br>
性别<input type="radio" />男<input type="radio" />女
</br>
喜欢玩的游戏:
</br>
<input type="checkbox" />农药
<input type="checkbox" />西游
</br>
学历:
<select>
<option value="0">函授</option>
<option value="1">学士</option>
<option value="2">硕士</option>
<option value="3">非人</option>
</select>
</br>
选择日期<input type="date" />
</br>
身高<input type="number" />
</br>
喜欢的颜色<input type="color" />
</br>
薪资<input type="range" min="1" max="5"/>
</br>
联系邮箱<input type="email" />
</br>
小秘密<input type="password" />
</br>
个性签名:
</br>
<textarea rows="5" cols="30" ></textarea>
</br>
<input type="button" value="清空" />
<input type="submit" />
</form>
</body>
</html>
HTML
.html/.htm
认识HTML结构
- 首行声明
!DOCTYPE html
- 一包两段 html
- head
- body
- 首行声明
认识标签
- <标签名 属性>标签内容</标签名>
段落
- <标签 属性/值>
- <标签名 属性>标签内容</标签名>
认识语法
- 标签顺序
- 标签闭合
- 标签属性
基础标签 标题、图片、链接、段落等
块级元素及行内元素
重点标签
- 表格
- 表单
绝对路径与相对路径
网页搭建入门之HTML与CSS之HTML入门
案例代码:HTML入门 https://github.com/liuawen/imooc_Java_Engineer/tree/master/4-HTML-and-CSS/1-HTML
【Web】HTML入门小结的更多相关文章
- JAVA WEB快速入门之从编写一个基于SpringMVC框架的网站了解Maven、SpringMVC、SpringJDBC
接上篇<JAVA WEB快速入门之通过一个简单的Spring项目了解Spring的核心(AOP.IOC)>,了解了Spring的核心(AOP.IOC)后,我们再来学习与实践Maven.Sp ...
- JAVA WEB快速入门之通过一个简单的Spring项目了解Spring的核心(AOP、IOC)
接上篇<JAVA WEB快速入门之从编写一个JSP WEB网站了解JSP WEB网站的基本结构.调试.部署>,通过一个简单的JSP WEB网站了解了JAVA WEB相关的知识,比如:Ser ...
- JAVA WEB快速入门之从编写一个JSP WEB网站了解JSP WEB网站的基本结构、调试、部署
接上篇<JAVA WEB快速入门之环境搭建>,在完成了环境搭建后(JDK.Tomcat.IDE),现在是万事具备,就差写代码了,今天就来从编写一个JSP WEB网站了解JSP WEB网站的 ...
- 【机器学习】Learning to Rank入门小结 + 漫谈
Learning to Rank入门小结 + 漫谈 Learning to Rank入门小结 Table of Contents 1 前言 2 LTR流程 3 训练数据的获取4 特征抽取 3.1 人工 ...
- Web API 入门指南 - 闲话安全
Web API入门指南有些朋友回复问了些安全方面的问题,安全方面可以写的东西实在太多了,这里尽量围绕着Web API的安全性来展开,介绍一些安全的基本概念,常见安全隐患.相关的防御技巧以及Web AP ...
- java WEB开发入门
WEB开发入门 1 进入web JAVASE:标准- standard JAVA桌面程序 GUI SOCKET JAVAEE:企业-浏览器控制 web 2 软件结构 C/S :client ...
- 转载-Web API 入门
An Introduction to ASP.NET Web API 目前感觉最好的Web API入门教程 HTTP状态码 Web API 强势入门指南 Install Mongodb Getting ...
- web前端入门:一小时学会写页面
一小时学会写页面 作为一个懒癌晚期患者,总是习惯找各种简单的解决问题的方法,也习惯性把问题简单化,所以今天想分享给大家简单的web前端入门方法.既然题目已经定了一个小时那么废话就不多说了,计时开始 1 ...
- 在MyEclipse下创建Java Web项目 入门(图文并茂)经典教程
http://jijiaa12345.iteye.com/blog/1739754 在MyEclipse下创建Java Web项目 入门(图文并茂)经典教程 本文是一篇在Myeclipse下构建Jav ...
- 【python】 web开发入门
进入Web开发 现在你完成了Python忍者训练,准备深入Ptyhon的Web开发,但现在的问题是有很多的框架,从中选择最好的框架非常困难,但从初学者的角度出发,Flask基本Web框架将非常适合We ...
随机推荐
- 一、本地项目部署到GitHub上
部署之前准备工作,本地安装Git和注册一个GitHub账号: 本地安装Git 因为官网下载速度较慢,从其他地方下载 https://npm.taobao.org/mirrors/git-for-win ...
- Jmeter之登录接口参数化实战
为了纪念我走过的坑(为什么有些简单的问题就是绊住我了,还是不够细啊) Jmeter之接口登录参数化实战 因为想要在登录时使用不同的数据进行测试,所以我选择了将数据进行参数化.因为涉及到新建一个接口的功 ...
- rabbitmq3.6.6安装,环境centos7
一,需求描述 在centos7上安装rabbitmq3.6.6 附上安装脚本 ,附上官网地址 http://www.rabbitmq.com/ ,从这上面可以下载rabbitmq-server-3.6 ...
- nginx负载均衡引出的登录session的配置问题
不使用session,换成cookie session是存放在服务器端的,cookie是存放在客户端的,我们可以把用户访问页面产生的session放到cookie为中转站.你访问web服务器A,产生了 ...
- Vue-router hash模式微信登录授权验证,#号处理
微信授权登录验证会把网址中的#号去掉,这样在跳转的时候Vue拿不到Code.所以做了以下处理 let href = window.location.href; if (href.includes(&q ...
- 官宣 | Apache Flink 1.12.0 正式发布,流批一体真正统一运行!
官宣 | Apache Flink 1.12.0 正式发布,流批一体真正统一运行! 原创 Apache 博客 [Flink 中文社区](javascript:void(0) 翻译 | 付典 Revie ...
- 多年总结IDEA 使用技巧 (建议收藏!)
很长一段时间没有更新了,前段时间转测试了,浪费了一些时间,终于可以写文章了,今天来写一下之前自己开发的一些习惯,因为自己本身自己是一个极简主义所以 开发喜欢这样:. 全屏显示 我们可以使用[Prese ...
- java基础:数组详解以及应用,评委打分案例实现,数组和随机数综合,附练习案列
1.数组 1.1 数组介绍 数组就是存储数据长度固定的容器,存储多个数据的数据类型要一致. 1.2 数组的定义格式 1.2.1 第一种格式 数据类型[] 数组名 示例: int[] arr; ...
- Python序列(十一)集合
集合试无序可变列表,使用一对大括号界定,元素不可重复,同一个集合中每一个元素的都是唯一的. 集合只能包含数字.字符串.元祖等不可变类型(或者说可哈希)的数据,而不能包含列表.字典.集合等可变类型额数据 ...
- ssms导入excel数据提示未安装插件的解决方法
今天用ssms导入excel的时候,提示 然后去找了一下解决方案,安装了相对应的插件.但是还是会提示这个问题. 又去找了一下原因,找到一个原因是sqlserver启动的时候是32位的,但是导入需要64 ...