自学前端第二天——网络开发工具VScode

最新推荐文章于 2024-08-12 17:51:29 发布

今天学习了不

最新推荐文章于 2024-08-12 17:51:29 发布

阅读量116

点赞数

文章标签：前端 html vscode

本文链接：https://blog.csdn.net/weixin_57570383/article/details/130287037

版权

<!DOCTYPE>标签：文档类型声明标签，作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>-------不属于HTML标签，是整个文档的声明标签

lang语言种类：用来定义当前文档显示的语言

   1）en 定义语言英语，英文网页
   2）zh-CN 定义语言中文，中文网页
   注意：定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
例：<html lang='zh-CN'>

字符集(Character set)是多个字符的合集。以便计算机能够识别和储存各种文字

例：<meta charset="UTF-8"/>为了更好的显示中文和英文，通常使用"UTF-8"编码

标题标签<h1>-<h6>(6个等级的网页标题)head的缩写

<h1>我是一级标题</h1>

<h2>我是二级标题</h2>

<h3>我是三级标题</h3>

<h4>我是四级标题</h4>

<h5>我是五级标题</h5>

<h6>我是六级标题</h6>

段落标签

<p>我是一个段落 </p>

换行标签：<br/> 单词break的缩写，<br/>是一个单标签

文本格式化标签：

加粗	<strong>...</strong>或者<b>...</b>	更推荐前者，语义更强烈
倾斜	<em>...</em>或者<i>...</i>	更推荐前者，语义更强烈
删除线	<del>...</del>或者<s>...</s>	更推荐前者，语义更强烈
下划线	<ins>...</ins>或者<u>...</u>	更推荐前者，语义更强烈

<div>和<span>标签：没有语义，就是一个盒子，用来装内容的

           <div>...</div>----------division的缩写，表示分割分区
           <span>...</span>-----span意为跨度、跨区
   注意：1）<div>标签用来布局，但是现在一行只能放一个<div>。相当于一个大盒子
         2）<span>标签用来布局，一行上可以放多个<span>。相当于一个小盒子

图像标签：<img>单词image缩写，意为图像

   <img src="图像文件名"/>

    str是<img>标签的必须属性，用于指定图像文件的路径和文件名
   注：图片必须和.html文档放在同一路径下

alt	替换文本，图像不能显示文字的时候	<img src="图像文件名" alt="图片名"/>
title	提示文本，鼠标放在图像上，显示文字	<img src="图像文件名" title="文字"/>
width	设置图像的宽度（像素）	<img src="图像文件名" width="数字"/>
height	设置图像的高度（像素）	<img src="图像文件名" height="数字"/>
border	设置图像的边框粗细	<img src="图像文件名" border="数字"/>

一般宽度和高度修改一个就可以了，另一个会自动调整

注意： 1）图像可以拥有多个属性，必须写在标签名的后面；
2）属性之间不分先后顺序，标签名与属性、属性与属性之间需要用空格分隔开；
3）属性采取键值对的方式，即key="value"的格式，属性="属性值"。
src属性是必须要写的。

路径：

页面中的图片会非常多，通常我们会建一个文件夹来存放这些图片文件（images），这时在查找图像，就需要采用路径的方式来指定图片文件的位置。

   路径可以分为：
   1）绝对路径：是指目录下的绝对位置，直接到达目标位置（是在电脑中的位置），一般由盘符开始的路径
   2）相对路径：以引用文件所在位置为参考基础，而建立出的目录路径，简单的说，相对路径就是图片相对HTML页面的位置，如<img="img.jpg"/>

同一级路径		图像文件位于HTML文件同一级，如<img src="img.jpg"/>
下一级路径	/	图像文件位于HTML文件下一级,如<img src="images/img.jpg"/>
上一级路径	../	图像文件位于HTML文件上一级,如<img src="../img,jpg"/>

1）目录文件夹：就是普通文件夹
2）根目录：打开目录文件夹的第一层就是根目录

超链接标签（重点）：

<a>标签用于定义超链接，作用是从一个页面链接到另一个页面

   1）链接的语法格式：
   <a href="跳转目标" target=”目标窗口弹出的方式“>文本或图像</a>
       单词anchor的缩写，意为：锚

href

用于指定链接目标的url地址，（必须属性）

当为标签应用href属性时，就具有了超链接功能。

target

用于指定链接页面的打开方式，

其中_self为默认值在当前页面窗口打开，_blank则为在新窗口中打开方式。

2）链接分类：

        a.外部链接：以http://开头，跳转到外部的网站。
           例如：<a href="http://www.baidu.com">百度</a>
       b.内部链接：网站内部页面之间的相互链接，直接链接内部页面的名称即可。
           例如：<a href="index.html">首页</a>
       c.空链接：如果当时没有确定目标时，可用'#'代替空，
           例如：<a href='#'>首页</a>
       d.下载链接：如果href里面地址是一个文件和压缩包，会下载这个文件。地址链接的是文件.exe或者zip等压缩包形式。
       e.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接，使用方法和文字一样<a>标签进行包含f.锚点链接：点击链接，可以快速定位到页面中的某个位置。

f.锚点链接：点击链接，可以快速定位到页面中的某个位置。
步骤：

                1）在链接文本的href属性中，设置属性值为#名字的形式，

                        如：<a href="#mm">某某</a>
2）找到目标位置标签，里面添加一个id属性=刚才的名字，

                        如：<h3 id="mm">某某介绍</h3>

HTML中的注释

注释标签是在HTML文档中添加一些便于阅读理解但又不需要显示在页面中的注释文字,程序不会执行注释内容
HTML中的注释以”<i--"开头，以”-->“结束
 快捷键：ctrl+/

今天学习了不

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
自学前端第二天——网络开发工具VScode

在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接，使用方法和文字一样<a>标签进行包含f.锚点链接：点击链接，可以快速定位到页面中的某个位置。以引用文件所在位置为参考基础，而建立出的目录路径，简单的说，相对路径就是图片相对HTML页面的位置，如<img="img.jpg"/>例：<meta charset="UTF-8"/>为了更好的显示中文和英文，通常使用"UTF-8"编码。3）属性采取键值对的方式，即key="value"的格式，属性="属性值"。
复制链接

扫一扫