HTML基础使用

时间:2022-12-12 14:01:15
一.html基本结构

1.网页基本结构

<!DOCTYPE HTML>

<html>

<head>

<meta charsret="UTF-8">

<title></title>

</head>

<body>


</body>

</html>

2.网页基本结构使用的标签

(1)<html>...</html>

作用:标记html文档的开始和结束

(2)<head>...</head>

作用:网页的头部,通常用于对网也进行设置

(3)<body>...</body>

作用:网页的主体部分,页面上的显示的内容都是在body里

(4)meta

作用:1.设置编码格式

2.搜索关键字

3.搜索内容的描述

(5)<DOCTYPE HTML>

作用:声明这个文档是html类型

(6)<title>...</title>

作用:导航栏,用于网页导航信息

二。基本标签

(1)标题标签

<h1>...</h1>

<h2>...</h2>

<h3>...</h3>

<h4>...</h4>

<h5>...</h5>

<h6>...</h6>

(2)段落标签

<p>...</P>

(3)水平切线

</hr>

(4)换行标签

<br/>

(5)图片标签

1.基本语法

<img src=""/>

2.作用

img就是图片标签,src就是路径

3.属性

title:鼠标停在图片上的时候,显示提示文字

alt:图片加载失败的时候,文字代替

width:图片的宽度

height:图片的长度

4.补充

查找图片的时候 ../ :返回上一级目录

(6)超链接标签

1.基本语法

<a href="">...</a>

2.作用:

a标签就是超链接标签,href表示要跳转页面的路径

3.属性

在新窗口打开网页:target="_blank"

在本窗口打开网页:targer="_self"

4.其它功能

(1)锚链接

1.基本结构

第一步却定标记位置:<a href="" name="起一个名字">...</a>

第二步回到标记位置:<a href="你起的名字" name="">...</a>

2.执行顺序

href--->name

关键:其它标签第一步可以使用id代替name,比如<img src="" id="你起的名字"/>

(2)功能性链接

<a href="mailto:Webmaster@ytzl.cn">联系我们

<a href="tencent://message"/?uin=3485321570>我的QQ<a>

(7)加粗标签

<b>...</b>

(8)倾斜标签

<em>...</em>

(9)缩小标签

<small>...</small>

<10>删除线

<s>...</s>

(11)下划线

<u>...</u>

三。特殊符号

<!---->:注释,用来标记代码,快捷键ctrl+shift+?

& :和and

 ;:空格

> :大于号>

< :小于号<

" :引号"只有一个,比如";引号"

&coppy :版权符合,比如&coppy;最终解释权归我所有

四。快捷键

复制:ctrl+c

粘贴:ctrl+v

撤销:ctrl+z

保存:ctrl+s

剪切:ctrl+x

回到桌面:win+d

关闭:alt+f4

关闭游览器导航栏:ctrl+w

windows重命名:f2

WebStrom重命名:F5

删除:Delete

切换:alt+tab

切换投影仪模式:win+p

查找:ctrl+f

全选:ctrl+a

打开计算机:win+e

打开运行:win+r

锁屏:win+l

最大化:alt+空格+x

win带的截屏Prtscr