一、HTML的文字段落标签
1. 什么是HTML
—HTML(Hypertext Markup Language)超文本标记语言。
2. HTML的特点
—HTML不需要编译,直接由浏览器执行。/HTML文件是一个文本文件。/HTML文件必须使用html/htm为文件的后缀名/HTML大小写不敏感。
3.HTML的基本结构
—HTML分为头部信息、网页信息、HTML文件
hello world
//下划线 ## 4.DOCTYPE文档类声明 —声明必须放在HTML文档的第一行,声明不是HTML的标签。 ## 5.网页编码设置 —当网页出现乱码时,可以在标签之间加: content=“text/html; 表示文档类型,charset=utf-8 表示编码格式。
二、HTML的文字段落标签
1.标签标签:<h1>-<h6>
2.段落标签:<p></p>
3.align对其属性:left左对齐/right右对齐/center居中对其/justify对行进行伸展,这样每行都有相等的长度。
4.换行标签:<br/>
5.空格标签:  ;
6.文字斜体:<i></i>,<em></em>
7.加粗:<b></b>,<strong></strong>
8.下标:<sub>
9.上标:<sup>
10.特殊符号:<–小于号或显示标记 <;>–大于号或显示标记>©版权 ©®已注册 ®;™商标 ™ Space不断行的空白  
三、HTML列表标签
1.无序列表<ul><li>
type属性值:
disc圆点
square正方形
circle空心圆
<!DOCTYPE html>
<head>
<mata http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
</head>
<body>
<h1>什么是HTML?</h1>
<p>HTML是用来描述网页的一种语言</p>
<ul type="disc">
<li>HTML指的是超文本标记语言</li>
<li>HTML不是一种编程语言,而是一种标记语言</li>
<li>标记语言是一套标记标签</li>
<li>HTML使用标记标签来描述网页</li>
</ul>
<ul type="square">
<li>HTML指的是超文本标记语言</li>
<li>HTML不是一种编程语言,而是一种标记语言</li>
<li>标记语言是一套标记标签</li>
<li>HTML使用标记标签来描述网页</li>
</ul>
<ul type="circle">
<li>HTML指的是超文本标记语言</li>
<li>HTML不是一种编程语言,而是一种标记语言</li>
<li>标记语言是一套标记标签</li>
<li>HTML使用标记标签来描述网页</li>
</ul>
<hr />
</body>
</html>
2.有序列表
type属性值:
1,数字1,2 默认
a,小写字母a,b
A,大写字母A,B
i,小写罗马数字I
I,大写罗马数字I
<!--续-->
<ol type="1">
<li>HTML指的是超文本标记语言</li>
<li>HTML不是一种编程语言,而是一种标记语言</li>
<li>标记语言是一套标记标签</li>
<li>HTML使用标记标签来描述网页</li>
</ol>
<ol type="a">
<li>HTML指的是超文本标记语言</li>
<li>HTML不是一种编程语言,而是一种标记语言</li>
<li>标记语言是一套标记标签</li>
<li>HTML使用标记标签来描述网页</li>
</ol>
<ol type="A">
<li>HTML指的是超文本标记语言</li>
<li>HTML不是一种编程语言,而是一种标记语言</li>
<li>标记语言是一套标记标签</li>
<li>HTML使用标记标签来描述网页</li>
</ol>
<ol type="Ⅰ">
<li>HTML指的是超文本标记语言</li>
<li>HTML不是一种编程语言,而是一种标记语言</li>
<li>标记语言是一套标记标签</li>
<li>HTML使用标记标签来描述网页</li>
</ol>
<ol type="ⅰ">
<li>HTML指的是超文本标记语言</li>
<li>HTML不是一种编程语言,而是一种标记语言</li>
<li>标记语言是一套标记标签</li>
<li>HTML使用标记标签来描述网页</li>
</ol>
<hr />
3.定义列表 <dl><dt><dd>,可以有多个<dt>和<dd>
<!--续-->
<dl>
<dt>HTML指的是超文本标记语言</dt>
<dd>HTML不是一种编程语言,而是一种标记语言</dd>
<dd>标记语言是一套标记标签</dd>
<dt>HTML使用标记标签来描述网页</dt>
<dd>HTML不是一种编程语言,而是一种标记语言</dd>
<dd>标记语言是一套标记标签</dd>
</dl>
<hr />
四、HTML图像标签
语法:<img src=“” alt=“” …/>
img属性
属性 | 值 | 描述 |
---|---|---|
src | URL | 显示图像的URL |
alt | 文字 | 图像替代文本 |
height | 数值的百分比 | 图像的高 |
width | 数值的百分比 | 图像的宽 |
相对路径和绝对路径
绝对路径要从盘中拿取图片,相对路径引入同个文件下的图片
在相对路径中,如果是放在文件的上一级目录中要用
在相对路径中,如果是放在文件夹的子文件夹下的图片要用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--绝对路径-->
<img src="E:/axure/素材/成果图标/性格.png"/>
<!--相对路径-->
<img src="./唱歌.png" alt="html基础" width="50px" height="50px"/>
<h2>html基础课程</h2>
<img src="../img/粉丝.png" alt="入门" width="20%" heigh="20%"/>
<h2>html入门</h2>
</body>
</html>
五、HTML超链接标签
1.语法
<a href=“” >内容</a>
href:链接地址,可以是内部链接或外部链接。
属性:
self当前窗口下的链接
blank创建一个新的链接
属性 | 描述 |
---|---|
href | 链接地址 |
target | 链接的目标窗口 _self、 _blank、 _top、 _parent |
title | 链接提示文字 |
name | 链接命名 |
2.定义锚
<a href=“#锚的名字1”>目录1</a>
<a href=“…” name=“锚的名字1”>内容</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--绝对路径-->
<a href="#素材1">素材1</a>
<a href="#素材2">素材2</a>
<a href="#素材2">素材3</a>
<br>
<a href="demo1.html" target="_self" name="素材1"><img src="E:/axure/素材/成果图标/性格.png" width="50px" height="50px"/></a>
<br>
<h2>素材1</h2>
<h3>性格图标</h3>
<h2>素材1</h2>
<h3>性格图标</h3>
<h2>素材1</h2>
<h3>性格图标</h3>
<!--相对路径-->
<a href="demo1.html" target="_blank" name="素材2"><img src="./唱歌.png" alt="html基础" width="50px" height="50px"/></a>
<br>
<h2>素材2</h2>
<h3>唱歌图标</h3>
<h2>素材2</h2>
<h3>唱歌图标</h3>
<h2>素材2</h2>
<h3>唱歌图标</h3>
<a href="https://www.baidu.com/?tn=78000241_12_hao_pg" ><h2>html基础课程</h2></a>
<h1>素材图片3</h1>
<a name="素材3"><img src="../img/粉丝.png" alt="入门" width="50px" heigh="50px"/></a>
<br>
<h2>素材3</h2>
<h3>粉丝图标</h3>
<h2>素材3</h2>
<h3>粉丝图标</h3>
<h2>素材3</h2>
<h3>粉丝图标</h3>
<a href="demo1.html#素材2" title="提升技术"><h2>html入门</h2></a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--绝对路径-->
<img src="E:/axure/素材/成果图标/性格.png"/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<a name="素材2"><img src="唱歌.png"/></a>
</body>
</html>