学习html5+css3（1）

最新推荐文章于 2024-09-24 21:17:34 发布

今天学什么！

最新推荐文章于 2024-09-24 21:17:34 发布

阅读量805

点赞数 1

分类专栏： HTML 文章标签：前端 html5

本文链接：https://blog.csdn.net/qq_56994594/article/details/123903775

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Web标准的构成标准：

Web标准提出的最佳体验方案：结构、样式、行为相分离

简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

HTML标签例：<html>

双标签例：<html> </html>

单标签例：<br />

标签关系：

1.包含关系

<head>

<title></title>

</head>

2.并列关系

<head></head>

<body></body>

HTML的基本结构标签（也称为骨架标签）

HTML文档的后缀名必须是 .html或 .htm

开发工具VSCdoe

VSCode工具生成骨架标签新增代码

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

<!DOCTYPE html> （必须写在文档中最前面的位置）

这句代码的意思是：当前页面采取的是HTML5版本来显示网页

2.lang语言种类

<html lang='zh-CN'> 语言定义为中文

<html lang='en'> 语言定义为英文

3.字符集

<meta charset='UTF-8'>

HTML常用标签

1.标题标签<h1>-<h6> （h是head的缩写） <h1>我是一级标题</h1>

标签语义：作为标题使用，并且依据重要性递减

<h1>标题一共六级选，</h1>

<h2>文字加粗一行显。</h2>

<h3>由大到小依次减，</h3>

<h4>从重到轻随之变。</h4>

<h5>语法规范书写后，</h5>

<h6>具体效果刷新见。</h6> （ctrl+】键快速对齐）

2.段落和换行标签

段落标签语义：可以把HTML文档分割为若干段落

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

换行标签语义：强制换行

<br /> (单标签）

3.文本格式化标签

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

<div>这是头部</div> div是division的缩写，表示分割、分区。现在一行只能放一个<div>，大盒子

<span>今日价格</span> span意为跨度、跨距。一行可以多个<span>，小盒子

5.图像标签和路径

图像标签:

<img src="图像URL" />

<h1>易烊千玺</h1>

<img src="yyqx.jpg" />

<h1>alt 替换文本图像显示不出来的时候用文字替换</h1>

<img src="yyqx.jpg1" alt="易烊千玺" />

<h1>title 提示文本鼠标放到图像上，提示的文字</h1>

<img src="yyqx.jpg" alt="易烊千玺" title="易烊千玺" />

<h1>width 给图像设定宽度</h1>

<img src="yyqx.jpg" alt="易烊千玺" title="易烊千玺" width="500" />

<h1>height 给图像设定高度</h1>

<img src="yyqx.jpg" alt="易烊千玺" title="易烊千玺" height="500" />

<h1>borde 给图像设定边框</h1>

<img src="yyqx.jpg" alt="易烊千玺" title="易烊千玺" height="500" border="15" />

路径：

6.超链接标签

链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

例：<h1>1.外部链接</h1>

<a href="http://w ww.qq.com" target="_blank">腾讯</a>

target 打开窗口的方式默认的值是_self 当前窗口打开页面 _blank 新窗口打开页面

<a href="http://www.itcast.com" target="_blank">传智播客</a>

<h1>2.内部链接:网页内部页面之间的相互链接</h1>

<a href="公司简介.html" target="_blank">公司简介</a>

<h1>3.空连接：#</h1>

<a href="#">公司地址</a>

<h1>4.下载连接：地址链接的是文件.exe或者是.zip等压缩包形式</h1>

<a href="yyqx.zip">下载文件</a>

<h1>5.网页元素的链接</h1>

<a href="https://www.baidu.com" target="_blank"><img src="yyqx.jpg" title="易烊千玺" width="500" /></a>