HTML基础,及基础标签
1.什么是HTML
HTML 指的是超文本标记语言 (HyperText Markup Language)。
超文本: 文本(文字) 网页上显示的内容(图片,超链接,视频,音频.....)。
标记: 标签 ;标记信息 。
HTML可以用来开发工具。
使用开发工具HbuilderX
来创建一个基本项目
js,css,img,index.html。
2.HTML基本语法
<!DOCTYPE html>
<!--声明html语言版本 是html5 告诉浏览器-->
<!-- html是网页文件的根,所有内容都必须写在html中 -->
<html>
<!-- 头标签 -->
<head>
<!-- 设置当前网页字符集 -->
<meta charset="utf-8" />
<!-- title 定义网页标题 -->
<title>百度一下,你就知道</title>
<!-- 导入标题处图标 -->
<link href="img/baidu.ico" rel="icon" />
</head>
<body>
内容区
</body>
</html>
可以使用
<!---->
来进行注释,在HbuilderX中也可以使用Ctrl键+shift键+/键 对选中的字段进行注释。
3.标签分类
闭合标签:开始 标签内容 结束 (双标签);
自闭和标签:标签名 在内部结束 完成某个特定功能 不修饰别的内容 (单标签)。
4.标签属性
标签可以拥有属性,属性进一步说明了该标签的显示或使用的特性;
例如:
<body text="red" bgcolor="green">
语法:
属性名="属性值";
一个标签可以拥有多个属性;
属性必须写在开始标签中。
5.常用标签
(1)标题标签
<h1>一级标题</h1>
<h1>二级标题</h1>
<h1>三级标题</h1>
<h1>四级标题</h1>
<h1>五级标题</h1>
<h1>六级标题</h1>
标题标签会独占一行 。
(2)段落标签
<p> 写入段落内容</p>
段落标签会独占一行 ;段落与段落之间有间隔。
(3)换行标签
<br/>
可以插入一个简单的换行符号。
(4)列表标签
有序列表 ol li
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
无序列表 ul li
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
在开发工具HbuilderX中可使用快捷键生成。
ul(或者ol)>li*行数 +tab键 可快速得出
type=""改变列表项 type属性: circle,disc,square
(5)超链接
HTML 使用超级链接与网络上的另一个文档相连,通俗的说就是通过连接来访问其他网页资源。
<a href="" target=""></a>
target: _self(默认) 在当前窗口打开新文档
:_blank 在新窗口打开新文档
: #锚点名称
定义锚点
< a name="" > $lt /a > name属性值可以自定义
(6)图像标签
img标签
border 边框
src="图片地址"
width 宽
height 高
title 鼠标移动到标签上 提示信息
alt="图片不能正常显示时 提示信息"(网速卡顿,图片无法加载出来,显示的文本提示)
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>腾讯网</title><!--导航栏标题-->
<link href="img/5.png" rel="icon"> <!--导航栏图标-->
</head>
<body>
<img src="img/qq_logo.png" border="10" width="100" height="100" title="腾讯网址" alt="无法显示">
</body>
</html>
(7)特殊标签
在HTML中预留了一些字符;
这些预留字符是不能在网页中直接使用的。
小于号< (<;)
大于号>(>;)
空格( ;)
版权C(©;)
商标tm(&trade;)
注册商标R(®;)