什么是html
HTML
Hyper Text Markup Language(超文本标记语言)
HTML发展史
HTML5的优势
-
世界知名浏览器厂商对HTML5的支持
微软
Google
苹果
Opera
Mozilla
-
市场需求
-
跨平台
W3C标准
-
W3C
World Wide Web Consortium(万维网联盟)
成立于1994年,Web技术领域最权威和具影响力的国际中立性技术标准机构
-
W3C标准化包括
结构化标准语言(HTML XML)
表现标准语言(css)
行为标准语言(DOM ECMAScript)
常见IDE
-
记事本
-
Dreamweaver
-
IDEA
-
WebStorm
-
....
HTML的基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html>
< body>、</body> 等成对的标签,分别叫开放标签和闭合标签单独呈现的标签(空元素),如<hr/> ;意为用/来关闭空元素
网页的基本信息
<!--DOCTYPE:告诉浏览器我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meat描述网页信息-->
<meta charset="UTF-8">
<meta name="keywords" content="smallwang ,学习java"><!--搜索该网页的关键词-->
<meta name="description" content="2020年7月14号开始学习html"><!--描述网页内容信息-->
<!--title网页标签-->
<title>我的第一个网页</title>
</head>
<!--body代表网页主体-->
<body>
hello world!!
</body>
</html>
基本标签
-
标题标签
-
段落标签
-
换行标签
-
水平线标签
-
字体标签
-
注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>两只老虎 两只老虎</p>
<p>跑得快bai 跑得快</p>
<p>一只没有du耳朵zhi 一只没有尾巴</p>
<p>真奇怪 真奇怪</p>
<p>两只老虎 两只老虎</p>
<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<p>真奇怪 真奇怪</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
两只老虎 两只老虎br <br/>
跑得快bai 跑得快<br/>
一只没有du耳朵zhi 一只没有尾巴<br/>
真奇怪 真奇怪<br/>
两只老虎 两只老虎<br/>
跑得快 跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>
真奇怪 真奇怪<br/>
<!--粗体 斜体-->
<h1>字体样式标签</h1>
粗体:<strong>i love you</strong>
斜体:<em>i love you</em>
<br/>
<!--特殊符号-->
空格:空 格 (& nbsp ;) <br>
大于:>(& g t ;) <br>
小于:<(& l t ;) <br>
版权符号:©版权所有smallwang (& copy;)<br>
<!--
特殊付哈为记忆方式:
& ;
百度
-->
</body>
</html>
图像标签
img标签
常见的图像格式
-
JPG
-
GIF
-
PNG
-
BMP
-
...
<img src="path" alt="text" title= "text" width="x" height ="y" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--
img学习:
src:图片地址
相对地址、绝对地址
../ 上一级目录
./ 当前目录
alt: 图片名字
-->
<img src="../resources/img/巨石.jpg" alt="巨石" title="鼠标悬停显示的文字" width="500" height="300">
</body>
</html>
链接标签
超链接
a标签
-
超文本链接
-
图像链接
<a href="path" target="目标窗口位置">链接文本或图像</a>
href:链接路径
target:链接在哪个窗打开
目标窗口位置:常用值(_self、_blank )
- 页面间链接
从一个页面链接到另一个页面
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面1</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度页面</a>
- 锚链接
<a name="top">回到这里了</a><br>
.....
<a href="#top">回到顶部</a>
- 功能性链接
<!--
功能性链接
邮件链接:mailto:
qq链接:
-->
<a href="mailto:294295399@qq.com">点击联系我</a><br>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点击添加我" title="点击添加我"/>
</a>
行内元素和块元素
块元素
-
无论内容多少该元素多少,该元素独占一行;
-
(p、h1-h6)
行内元素
-
内容撑开宽度,左右都是行内元素的可以排在一行
-
(a、strong、em....)
列表
什么是列表
-
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并 以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息
列表的分类
-
无序列表
<!--无序列表-->
<ul>
<li>Java</li>
<li>PHP</li>
<li>运维</li>
<li>前端</li>
<li>C/C++</li>
</ul>
- 有序列表
<!--有序列表-->
<ol>
<li>Java</li>
<li>PHP</li>
<li>运维</li>
<li>前端</li>
<li>C/C++</li>
</ol>
-
定义列表
<!-- 自定义列表 dl:标签 dt:列表名称 dd:列表内容 应用范围:公司网站底部显示首部 --> <dl> <dt>学科</dt> <dd>Java</dd> <dd>python</dd> <dd>Linux</dd> <dd>C</dd> <dt>位置</dt> <dd>仁怀</dd> <dd>南通</dd> <dd>凯里</dd> <dd>遵义</dd> </dl>
表格
-
为什么使用表格
-
简单通用
-
结构稳定
-
-
基本结构
-
单元格
-
行
-
列
-
跨行
-
跨列
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!-- 表格 table
行 tr rows
列 td
-->
<table border="1px">
<tr>
<!-- colspan 跨列 -->
<td colspan="4" align="center">使用了colspan标签</td>
</tr>
<tr>
<!--rowspan 跨行-->
<td rowspan="2">使用了rowspan标签</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
<table border="1">
<tr>
<td colspan="3" align="center">学生成绩</td>
</tr>
<tr>
<td rowspan="2">小明</td>
<td>语文</td>
<td>90</td>
</tr>
<tr>
<td>数学</td>
<td>111</td>
</tr>
<tr>
<td rowspan="2">小红</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>92</td>
</tr>
</table>
</body>
</html>