IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		图片批量下载器
↓批量下载图片,美女图库↓ 		图片自动播放器
↓图片自动播放器↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> h5(html5)css3入门学习笔记 -> 正文阅读

[开发工具]h5(html5)css3入门学习笔记

萌新入门,做听课笔记,学的是黑马程序员pink老师的视频,可以去b站搜

一.语法规范

1.标签写在尖括号里"<>",例如<html>.

2.标签一般都为双标签(单标签很少)例如:

??????? <html></html>.第一个是开始标签,第二个是结束标签.

??????? 单标签:<br/>

3.标签的关系,存在包含关系和并列关系
包含关系例:

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

并列关系例:

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

二.基本结构标签(骨架标签)

<html></html>HTML标签,页面中最大的标签,我们称之为根标签
<head></head>文档的头部,在这之中我们必须要设置title标签
<title></title>文档的标题,让页面拥有属于自己的网页标题
<body></body>文档主题,元素包含文档所有内容,页面内容基本放到body里面

三.vscode工具生成骨架标签新增代码(一定要写):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    
</body>
</html>

1.!DOCTYPE标签

(1)文档类型声明,位于<html>标签之前,告诉浏览器采取html5版本来显示页面

(2)<!DOCTYPE>不是HTML标签,它就是文档类型声明标签

2.lang语言?? <html lang="en">

语言类型:

(1)en定义为英文

(2)zh-CN为中文

3.charset字符集?? <meta charset="UTF-8">

UTF-8为万国码,基本包含了全世界所以国家要用到的字符(不写可能乱码)

四.常用标签

1.标题标签

(1)分为6个等级,<h1>-<h6>

<h1></h1>

(2)双标签,作为标题使用,依据重要性递减

(3)加了标签文字会变粗,字体依次变大,独占一行

2.段落标签

<p>段落标签</p>

(1)文本在一个段落中会根据浏览器窗口大小自动换行.

(2)段落和段落之间保有空隙

3.段落和换行标签

<br/>

4.文本格式化标签(文档文字加粗,斜体,下斜线,下方案例就推荐前面的那一种写法)

(1)加粗:

<strong></strong>或者<b></b>

(2)倾斜

<em></em>或者<i></i>

(3)删除线

<del></del>或者<s></s>

(4)下划线

<ins></ins>或者<u></u>

5.<div>和<span>标签(双标签)

这两个标签用来布局网页,类似于盒子,可以装单独的内容等.

(1)<div></div>独占一行,可理解为一个很大的盒子.

(2)<span></span>一行可以放多个<span>,相当于小盒子

6.图像标签和路径

1.图像标签:<img>(单标签)

(1)src(必须属性)必须写,指定了<img>图像文件的路径和文件名

<img src="图像URL"/>
将图片文件和该html文件拖到同一个文件夹里,并且把图像文件名写进去,就可以了.

(2)alt(替换文本)当图像不能显示就显示文字

1<img src="图像URL" alt="图片无法显示"/>

(3)title(提示文本)鼠标放在图像上,显示的文字

<img src="图像URL" title="邱一凡卷!"/>

(4)width(图片宽度)

<img src="图像URL" width="500"/>

(5)height(图片高度)

<img src="图像URL" height="400"/>

ps:最好只修改宽度或者高度,这样就会等比例压缩,不会出现图像的变形

(6)border(边框粗细)

<img src="图像URL" border="10"/>

ps:①图像标签可以有多个属性,必须写在标签名后面

②属性不分前后,均以空格分开

③属性="属性值"

7.路径

(1)目录文件夹:存所有的该网站的html文件和素材

(2)根目录:打开目录文件夹第一层就是根目录

(3)相对路径:

若要找到同级文件夹的下一层的文件

<img src="同层的文件夹名/该文件夹下一层要使用的文件名"/>

若要找上一层的文件

<img src="../上一级的文件名"/>

(4)绝对路径:

指文件的绝对位置,可以直接在电脑中找图片的文件,可以在网络中找图片(找网站中的图片)

8.超链接标签

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

(1)链接的语法格式

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

①herf(必须属性)用于指定链接目标的url地址,有了它就有了超链接功能

②target:用于指定链接页面打开方式,target后面可以写_self或者_blank.其中_self为把当前页面变成链接通向的网页,不保留原来的网页,_blank为打开新窗口并通往新窗口.

(2)链接的分类:

①外部链接:可以跳转到外部网站

<a href="https://www.csdn.net/" target="_blank">文本或图片</a>

②内部链接:网站内部之间的相互链接

<a href="网站内的html文件" target="_blank">文本或图片</a>

两者都只需要在href后写目标的链接的地址即可.

③空连接:在地址写#

<a href="#">文本或图片</a>

④下载链接:

<a href="文件或者压缩包">文本或图片</a>

⑤锚点链接:当我们点击链接时,可以快速定位到页面中的某个位置

在链接文本的href属性中写一个""#目的地""的形式,在目标位置添加一个id属性:id="目的地".

<a href="#tar"></a>
id="tar"

9.注释和特殊字符标签

(1)注释标签:以"<!--"开头,"-->"结束.(快捷键:ctrl+/)

注释后在文档中不会在显示该部分内容,也不会执行,这是方便程序员来查看的,解释功能.

(2)特殊字符:

--空格( ):? &nbsp;

--小于号(<):? &lt;

--大于号(>):? &gt;

--与号(&):? &amp;

--人民币(￥):? &yen;

--版权(?):? &copy;

--注册商标(?):? &reg;

--摄氏度 :? &deg;

--正负号 :? &plusmn;

--乘号(x):? &times;

--除号(÷):? &divide;

--平方(2):? &sup2;

--立方(3):? &sup3;

五.表格

1.表格的基本结构

<table>
    <tr>
        <td>...</td> <!--单元格-->
        ......
    </tr> <!--行-->
</table>

表头的单元格(居中加粗):<th></th>

<thead></thead>:包含表头,必有<tr></tr>

<tbody></tbody>:包含表的内容

2.表格的属性(不常用)

(1)align:规定表格对周围元素的对齐方式,具体属性值可以为:"left,center,right"

(2)border:规定表格单元是否有边框,默认为"",表示没有边框

(3)cellpadding:规定表格单元边沿与其内容之间的空白,默认1像素

(4)cellspacing:规定单元格之间的空白,默认2像素

(5)width:规定表格宽度

<table align="left" border="1" cellpadding="0" cellspacing="0" width="500">
</table>

3.合并单元格

(1)跨行合并:rowspan="合并单元格个数"

(2)跨列合并:colspan="合并单元格个数"

<td colspan="2"></td>

合并单元格之后记得删除合并后覆盖的单元格.

持续更新,随学习进度更新
  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2021-10-18 17:35:25  更:2021-10-18 17:36:41 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/15 23:26:39-

图片自动播放器
↓图片自动播放器↓ 		TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓ 		图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码