html1,初识html

vs code编辑器

安装插件

chinese 中文支持
open in browser 快速预览文件
view in browser

快捷键

快捷键	描述
shift + end	选中从光标到行尾
shift + home	选中从光标到行首
shift + alt + 方向上下	快速复制粘贴当前行
alt + 方向上/下	快速和上/下行移动
tab	向后缩进
shift + table	向前缩进
alt + 鼠标左键	多光标编辑
ctrl + d	选择相同元素的下一个

web三大核心技术

HTML
CSS
javaScoript

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>
    
</body>
</html>

代码	描述
<!DOCTYPE html>	H5文档声明,告诉浏览器这是一个html文件
<html>	html文件的最外层标签
	lang="en" 表示是一个英文网站
	lang="zh-CN" 表示一个中文网站
<meta charset="UTF-8">	元信息,是编写网页中的一些赋值信息
	charset="UTF-8" 国际编码,让网页不出现乱码的情况
<title>	网页的标题

注释

写法

<!-- 注释的内容 -->

意义

1 为代码添加提示
2 将代码注释起来,方便以后使用

快捷键

扫描二维码关注公众号，回复： 8468305 查看本文章

ctrl+/
光标放在要注释的内容前面,执行ctrl+/

shift + alt + a
选中要注释的内容,执行shift + alt +a

标题和段落

标题
h标签
在一个网页中,h1标签很重要,并且一个.html文件中只能出现一次h1标签
h5和h6标签不常用

    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>

段落
p标签

<p>段落,会自动换行</p>

文本修饰标签

文本修饰标签	描述
<strong>	表示强调,会对文本进行加粗
<em>	表示强调,灰度文本进行斜体
<sub>,<sub>	下标文本,插入文本
<del>,<ins>	删除文本,插入文本

图片标签

图片标签
img

属性	描述
src	引入图片的地址
alt	当图片出现问题的时候,可以显示一段文字
title	提示信息,鼠标放到图片上,会显示提示信息
width,height	图片的大小(高,宽),默认单位是像素.当网络比较慢,图片未加载的时候,这两个属性可以先撑起图片所占据的位置

<img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg" alt="正在努力加载中" title="人生如梦" width="600" height="430">

引入文件的地址路径

相对路径

.在路径中表示当前路径
..在路径中表示上一级路径

绝对路径

C:\Users\inmeditation\Pictures\1.1\1.PNG
https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg

<!-- 插入本地图片 -->
<img src="../../Pictures/1.1/1.PNG" alt="">

其中1.png文件在当前文件的上一层的上一层的Pictures目录中

<!-- 插入本地图片 -->
<img src="C:\Users\inmeditation\Pictures\1.1\1.PNG" alt="">

发现斜线和反斜线都可以正常预览,但是要尽量避免使用反斜线

跳转链接

a标签

属性	描述
href属性	链接的地址
target属性	可以改变链接打开的方式
	_self 在当前页面打开,默认方式
	_blank 新窗口打开

<!-- 为文字添加链接 -->
<a href="http://www.sunlizhao.cn" target="_blank">我的网站</a>

<!-- 为图片添加链接 -->
<a href="http://www.sunlizhao.cn"><img src="../../Pictures/1.1/1.PNG" alt=""></a>

base标签
改变a链接的默认跳转行为的
当整个页面的标签,都需要做成新窗口打开的方式
可以为每一个a标签设置target属性,也可以通过base标签全局设置

<head>
    <base target="_blank">
</head>

跳转锚点

和跳转链接的区别

锚点是在当前页内间的跳转
常用在目录,回到行首和行尾等操作上

实现一

<a href="#html">html</a>
<a href="#css">css</a>
<a href="#JavaScript">JavaScript</a>

<h2 id="html">html</h2 id="html">
<p>模拟的段落</p>
...
<p>模拟的段落</p>

<h2 id="css">css</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>

<h2 id="JavaScript">JavaScript</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>

实现二

<a href="#html">html</a>
<a href="#css">css</a>
<a href="#JavaScript">JavaScript</a>

<a name="html"></a>
<h2>html</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>

<a name="css"></a>
<h2>css</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>

<a name="JavaScript"></a>
<h2>JavaScript</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>

特殊符号

可以解决冲突,左右尖括号,添加多个空格的实现

符号	描述	效果
	空格
©	版权	©
®	注册商标	®
<	小于号	<
>	大于号	>
&	逻辑和	&
¥	人民币	¥
°	摄氏度	°