什么是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>
1243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
