py的HTML基础（1）第一周

最新推荐文章于 2023-05-11 00:17:08 发布

m0_73633742

最新推荐文章于 2023-05-11 00:17:08 发布

阅读量109

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_73633742/article/details/129710202

版权

1.HTML语法规范

1.1基本语法概述

1.HTML标签是由尖括号尖括号包围的关键词，例如:<html>。
2.HTML标签通常是成对出现的，例如<html>和</html>,称为双标签。
3.有些特殊的标签必须是单个标签，例如</br>,称为单标签。

1.2标签关系

双标签关系可以分为两类：包含关系和并列关系
1.包含关系

<head>
    <title></title>
</head>

2.并列关系

<head></head>
<body></body>

2.HTML基本结构标签

标签名	定义
< html >< html >	HTML标签
< head >< /head >	文档的头部
< title >< /title >	文档的标题
< body >< /body >	文档的主体

<html>
  <head>
    <title>我的第一个页面</title>
  </head>
  <body>
    主体内容
  </body>
</html>

3.网页开发工具

3.1< !DOCTYPE HTML >文档类型声明标签，告诉浏览器这个页面采取html5版本来显示页面
3.2< html lang=“en” >告诉浏览器或者搜索引擎这是一个英文网站，本页面采用英文来显示。
3.3< meta charset=“UTF-8”/ >必须写，采用UTF-8来保存文字。

4.HTML常用标签

4.1标题标签< h1 >-< h6 >

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

<h1>标题一共六级选<h1>
<h2>文字加粗一行显</h2>
<h3>由小到大依次减</h3>
<h4>从重到轻依次变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新见</h6>

在这里插入图片描述

4.2段落标签和换行标签

<p>标签用于定义段落，它可以将整个网页分为若干段落。

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

<br/>是一个换行标签，而且是一个单标签。

4.3文本格式化标签

语义	标签
加粗	`<strong></strong>`或者`<b></b>`
倾斜	`<em></em>`或者`<i></i>`
删除线	`<del></del>`或者`<s></s>`
下划线	`<ins></ins>`或者`<u></u>`

<strong>我是加粗的文字</strong>
<em>我是倾斜的文字</em>
<del>我是删除线</del>
<ins>我是下划线</ins>

在这里插入图片描述

4.4< div >和< span >标签

特点：1.<div>标签用来布局，但是现在一行只能放一个<div>。大盒子
2.<span>标签用来布局，一行可以放多个<span>。小盒子

4.5图像标签和路径

1.图像标签属性

属性	属性值	说明
src	图片路径	必需属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放在图像上，显示的文字
widtn	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

<img src="img.jpg" alt="你好啊" title="你好呀" width="500" border="15" heigth="100">

2.目录文件夹和根目录
3.相对路径和绝对路径
相对路径：以引用文件所在的位置为参考基础，从而建立起的目录路径，简单来说，就是图片相对于HTML页面的位置。

相对路径分类	符号	说明
同一级路径		图像位于HTML文件同一级，如`<img src="baidu.gif"/>`
下一级路径	/	图像位于HTML文件下一级，如`<img src="images/baidu.gif"/>`
上一级路径	…/	图像文件位于HTML文件上一级，如`<img src="../baidu.gif"/>`

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如，“D:\web\img\logo.gif”或完整的地址“http://www.itcast.cn/imges/logo.gif”。

4.6超链接标签

1.链接的语法格式

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

属性	作用
href	用于指定链接目标的url地址（必需属性）当标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，期中_self为默认值，_blank为在新窗口中打开方式

2.链接分类

1.外部链接，例如<a href="http://www.baidu.com">百度</a>.
2.内部链接，网站内部界面之间的相互链接，直接点链接内部页面名称即可，例如<a href="index.html">首页</a>。
3.空链接，如果当时没有确定链接目标时，<a href="#">首页</a>。
4.下载链接，如果href里面地址是一个文件或者压缩包，会下载这个文件。
5.网页元素链接，在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接。
6.锚点链接，当我们点击链接，可以快速定位到页面中某个位置。

在链接文本的href的属性中，可以设置属性值为#名字的形式，如<a href="#two">第二集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第二集介绍</h3>

5.HTML的注释标签和特殊字符

5.1注释

HTML中的注释以“<!- ->”开头，以“- ->”结束。
 快捷键：Ctrl+/;

5.2特殊字符

在HTML文件中，一些特殊字符难以实现，可以用下面的字符替代。

特殊字符	描述	字符的代码
	空格符	`&nbsP;`
`<`	小于符	`<`
`>`	$1	`>`
`&`	和号	`&`
`￥`	人民币	`¥`
©	版权	`copy:`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`&times；`
÷	除号	`divide;`
²	平方二	`²`
³	立方三	`³`