首页 > Web开发 > 详细

HTML基础,及基础标签

时间:2021-07-20 23:25:36      阅读:12      评论:0      收藏:0      [点我收藏+]

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 在新窗口打开新文档
: #锚点名称
定义锚点
&lt a name="" &gt $lt /a &gt 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中预留了一些字符;
这些预留字符是不能在网页中直接使用的。

小于号< (&lt;)
大于号>(&gt;)
空格(&nbsp;)

版权C(&copy;)
商标tm(&trade;)
注册商标R(&reg;)

HTML基础,及基础标签

原文:https://www.cnblogs.com/MrTumnus-xiaozhiRE0-lizhiqing/p/15037006.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!