HTML
什么是HTML
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML 标签(元素)
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词,比如
<html>
- HTML 标签通常是成对出现的,比如
<b>
和</b>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
-
HTML 文档描述网页
-
HTML 文档包含 HTML 标签和纯文本
-
HTML 文档也被称为网页
-
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。
-
浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容.
注意 :有时候我们也会把标签说成元素,比如
p
标签说成p
元素,其实说的就是同一个东西,指示说法不同而已。
HTML
的模板
<!DOCTYPE html> <!--文档类型-->
<html lang="en"> <!--根标签-->
<head> <!--网页的头部-->
<meta charset="UTF-8" /> <!--国际编码 UTF-8-->
<title>初识HTML</title> <!--网页标题-->
</head>
<body> <!--可视化区域 网页的主体-->
</body>
</html>a
HTML
标签
H
标题标签
h1~h6
标题标签 文字大小、粗细程度 、单独占一行
一个页面通常只出现一个
h1标签 有利于搜索引擎搜索
每个页面出现哪些标签,根据自己的需求
p
段落标签
- 独占一行
- 前后元素自动换行
粗体标签
<strong>/<b>
斜体标签
<em>/<i>
特殊符号
代码 | 符号 |
---|---|
< | < 小于号 |
> | > 大于号 |
| 空格 |
  | 空白位 |
© | 版权符 |
& | & 符号 |
换行
<br/>
换行符<hr/>
水平线
a
标签(超链接标签)
<a href="#">#</a> 刷新当前页面
<a href="javascript: void(0);">死链接</a> 死链接,不会跳转
<a href="#name">锚点</a>
<a href="http://baidu.com">跳转到百度</a> 跳转到百度 需要注意的是 http 不能少
HTML
的书写规范
- HTML命名规范
- 名字用小写字母
- 以英文开头,可以包含(英文字母 _ - 数字),不能使用中文
- 见名知意
- 驼峰命名,第二个单词大写,例如:
className
(js
中使用)
- 命名的2种方式
id
只能有一个名字,且在页面中相同的名字只能出现一次,相当于身份证号码一样class
相同的名字可以出现N次,并且可以有多个名字,相当于人名字一样
图片标签
语法 :<img src="图片地址"/>
图片要素
src
定义图片路径alt
图片描述,用于seo
给搜索引擎抓取width
规定宽度 不给值 默认图片多宽就多宽height
规定图片高度 不给值 默认图片多高就多高width
height
只给一个值的时候,会等比例缩放
列表
- 无序列表
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
无序列表就是所有的列表项没有先后顺序之分 默认小黑圆点(disc)
可以通过改变type 值来改变前面的小黑圆点(disc) 空心圆(circle) 小方框(square)
- 有序列表
<ol>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ol>
有序列表就是有先后顺序之分 默认是1 2 3
可以通过改变type 值来改变 A 大写字母排序 a小写字母排序 I大写罗马字母排序 i小写罗马字母排序。
H5新增的两个属性:
reversed 降序排序
start 有序列表的其实值
-
定义列表
<dl> <dt>列表标题</dt> <dd>列表项目1</dd> <dd>列表项目2</dd> <dd>列表项目3</dd> </dl>
div
和span
标签
#####div
是块级标签,可以包含任何块和行内元素,不会和其他元素同占一行
display:bock
默认宽度100%,支持设置宽高,支持所有css命令
span
是内联(行内)标签,可以和其他行内元素位于同一行
display:inline
默认内容撑开宽度,不支持设置宽高
display:inline-block
块级可以横排展示,行内支持设置宽高
display:none
隐藏元素
代码练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我是h1标签</h1>
<!--一个页面通常只出现一个h1标签有利于搜索引擎搜索-->
<h2 id="box">我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
<h7>我是h7标签</h7>
我是在外面的
<h2>p段落标签</h2>
<p class="li">
  万维网上的一个 超媒体文档称之为一个 页面( 外语:page)。作为一个组织或者个人在 万维网上放置开始点的 页面称为 主页(外语:Homepage)或首页,主页中通常包括有指向其他相关页面或其他节点的 指针( 超级链接),所谓 超级链接,就是一种 统一资源定位器(Uniform Resource Locator, 外语 缩写: URL)指针,通过激活(点击)它,可使 浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列 页面的有机集合称为 网站( Website或Site)。超级文本标记语言(英文缩写:HTML)是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言。
</p>
<p class="li2">
  网页的本质就是超级文本标记语言,通过结合使用其他的 Web技术(如: 脚本语言、 公共网关接口、 组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网( Web)编程的基础,也就是说 万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记 语言,是因为文本中包含了所谓“ 超级链接”点。 [1]
</p>
<h2>粗体标签</h2>
我是在外面的<hr/>
<!--hr水平线标签-->
<b>我是b加粗标签</b><hr/><!--只是物理加粗-->
<strong>我是strong加粗标签</strong><hr/><!--不仅能加粗,还有利于搜索引擎搜索-->
<h2>斜体标签</h2>
<br>
<!--br 换行标签-->
我是在外面的<br/><br/>
<em>我是em斜体标签</em><br/><br/><!--强调斜体,利于搜索引擎搜索-->
<i>我是i斜体标签</i><br/><br/><!--斜体作用-->
<strong><em>啦啦啦</em></strong>
<img src="../第一节课html/images/a.png" alt="出错啦"> <br>
<h2>特殊符号</h2>
<p>
小于号: -- <<br/>
大于号: -- ><br/>
空格符号: -- lala haha<br/>
空白位: -- lala haha<br/>
&字符: -- &<br/>
版权符号: -- ©<br/>
</p>
<h2>a标签</h2>
<a href="http://www.baidu.com" target="_blank">去百度</a><!--链接 跳转到百度-->
<a href="#">#</a><!--刷新当前页面-->
<a href="javascript:void(0);">死链接</a><!--死链接,不会跳-->
<a href="#li">锚点</a>
<!--
只有拥有name属性的a标签才有锚点
其他标签可以通过id属性实现锚点
target属性
_self 当前页面打开 默认
_blank 在新窗口打开
-->
<!--
</body>
</html>