目录
一、HTML简介
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
超文本有两层含义:
- 它可以加入图片、声音、动画、多媒体等内容(超越了文本限制);
- 还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)。
二、HTML标签
2.1标题标签
HTML 提供了从大到小6级标题,分别是:<h1> ~ <h6>
<h1>a</h1>
<h2>b</h2>
<h3>c</h3>
<h4>d</h4>
<h5>e</h5>
<h6>f</h6>
标题标签语义: 作为标题使用,并且依据重要性递减。
2.2图像标签
在html设计中往往会需要现有图片作为设计成分,而引用图片资源则需要用到图像标签image,image标签有个很重要的属性src,其作用是用于指定图像文件的路径和文件名,他是img标签的必需属性。
具体使用如下:
<img src="../***" />
2.3超链接标签
网页设计当中通常都需要有跳转其他网址的需求,例如详细信息查询,相关软件说明等等,html中提供了超链接标签a来实现这一需求。
超链接标签语法为:
<a href="baidu.com">百度一下</a>
超链接标签有以下两个重要属性:
1.href:表明你想要跳转的目标网址。
2.target:_blank
表示在新的页面打开超链接,_self是在当前页面打开即
2.4表格标签
表格标签一般用来处理和显示数据,创建表格的语法如下
<table>
<tr>
<td>具体显示文字内容</td>
...
</tr>
...
</table>
其中主要标签说明如下
1.<table>标签表明定义一张表格
2.<tr>标签对应表格中的每一行
3.<td>标签对应表格中的单元格
应该注意tr标签必须嵌套在table表格中,而td标签必须在tr标签中使用。
2.5列表标签
html提供了无序列表(ul),有序列表(ol)和自定义列表(dl)三种列表标签,其中使用最多的为ul。
列表定义方法如下:
<ul type = "">
<li>路飞</li>
<li>鸣人</li>
<li>黑崎一护</li>
</ul>
无序列表可以用type属性定义标志属性(默认为实心圆点)
circle:以空心圆做为标志
square:以方块做为标志
<ol type="">
<li>路飞</li>
<li>鸣人</li>
<li>纳兹</li>
</ol>
有序列表可以用type属性定义顺序标志属性(默认为数字)
a:以空小写字母做为顺序标志
A:以大写字母做为顺序标志
i:以罗马字母做为顺序标志
2.6锚点标签
锚点,也称为书签,用于标记页面的某个元素或位置。
当我们设计html时,如果页面过长,为了提高浏览效率,可以使用锚点标签进行快速的页面跳转
先使用id
属性生成某元素的锚点,然后再使用超链接指向该锚点即可。
<h2 id="ld">1000年后</h2>
<!-- 中间部分内容 -->
<a href="#ld">跳转至1000年后</a>
...
需要注意:
1.每个元素的id值必须唯一
2.超链接获得跳转地址时在id前要接#符号
2.7文本格式标签
在网页设计中,对于一些关键字段往往需要使其与其他普通字段不同,html提供了几种文本格式标签:
1.加粗标签
<strong></strong> 或 <b></b>
2.斜体标签
<em></em> 或 <i></i>
3.删除线标签
<del></del> 或 <s></s>
三、CSS简介
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS最大价值:由HTML专注去做结构呈现,样式交给CSS。即结构(HTML)与样式(CSS)相分离。
四、CSS的使用
4.1语法规范
css使用规则主要有两个重要部分组成:选择器以及声明。
.nav{
padding-right: 50px ;
}
nav:选择器
padding-right: 50px :声明
需要注意
- 选择权是用于指定CSS样式的HTML标签,花括号是对该对象设置的具体样式;
- 属性与属性值以“键值对”的形式出现;
- 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色;
- 属性和属性值之间用英文“:”分开;
- 多个“键值对”之间用英文“;”进行区分。
4.2CSS基础选择器
基础选择器分为标签选择器、类选择器、id选择器。
4.2.1标签选择器
使用语法:
标签名称{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
...
}
标签选择器作用:快速选择网页中的元素。
4.2.2类选择器
使用语法:
.类名{
属性1:属性值1;
属性2:属性值2;
...
}
类选择器作用:允许以一种独立于文档元素的方式来指定样式。
需要注意
-
每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名。
-
不要使用纯数字、中文等命名,尽量使用英文字母来表示
-
类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义)
-
在同一个界面中class的名称是可以重复的。
多类选择器使用:
在一个属性中使用多个类进行内容样式修饰。
<div class="red font20">变红色</div>
注意
- 在标签class属性中写多个类名
- 多个类名中间必须用空格分开
4.2.3id选择器
使用语法:
#id名{
属性1:属性值1;
属性2:属性值2;
...
}
该语句说明将id名为此名的元素内容以定义的样式进行展示。
id选择器和类选择器区别
-
与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次
-
可以使用类选择器词列表方法为一个元素同时设置多个样式,即类选择器可以使用多次
-
类选择器在修改样式中用的最多,id选择器一般用于页面唯一性的元素上,经常搭配JavaScript
4.3CSS实现方法
我们通常使用三种方法实现CSS作用效果:外部样式表,内部样式表,内联样式
4.3.1外部样式表
在写一个HTML文件的同时,在外部同时写一个CSS文件修饰HTML文件内容的样式,在HTML页面中,使用<link>
标签引入这个文件。
具体如下:
<a href="./content.html" class="box"> <img src="./img/毛笔 (2).png" alt="" class="cartoon_1"><span>传统文学</span></a>
<a href="./meishi.html" class="box"> <img src="./img/美食.png" alt="" class="cartoon_1"><span> 传统美食</span></a>
<a href="./gongyi.html" class="box"> <img src="./img/油纸伞 (1).png" alt="" class="cartoon_1"><span>传统工艺</span></a>
<a href="./jieri.html" class="box"> <img src="./img/鞭炮.png" alt="" class="cartoon_1"><span>传统节日</span></a>
/* 侧边导航栏a标签样式 */
.box{
display:flex;
height: 100px;
width: 75%;
margin: 19px;
border-radius: 5px;
transition: .3s;
color: rgb(216, 216, 233);
}
/* 侧边导航栏展开后的模块 */
.box span{
position: relative;
padding-top: 20px;
padding-left: 8px;
font: 400 20px '';
opacity: 0;
transition: .1s;
}
4.3.2内部样式表
在HTML文件内部通过定义style标签,进行相应元素内容的修饰。
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
<body>
<h1>aaa</h1>
</body>
4.3.2内联样式
在元素标签中内部的style属性中设定css样式
<div style="color:red;font-size:12px;">****</div>