HTML静态网页设计

最新推荐文章于 2025-03-20 08:39:54 发布

柏舟1230

最新推荐文章于 2025-03-20 08:39:54 发布

阅读量9w

收藏 1.5k

点赞数 333

文章标签： html入门前端基础

本文链接：https://blog.youkuaiyun.com/qq_28891989/article/details/80290000

版权

第一周：HTML写静态网页

一、HTML理论介绍及常用格式

1.HTML主体格式基本结构

<!DOCTYPE html>
<html>
<head>
<mate charset="utf-8"/>
<title>标题</title>
</head>
<body>
主要内容
</body>
</html>

解说：整个HTML格式分为两大部分，一个是head部分，一个是body部分，其中head部分是用于书写网页样式，而body部分用于书写网页主题

2.常用标签：

标题标记

...
<h6></h6>

<p></p>段落标签

<b></b> <strong></strong>加粗

<i></i>倾斜

<br/>换行

 空格

<img src="" alt="" title=""/> 图片【gif，png，jpg】src:图片的链接地址 alt：图片加载失败的时候，在图片原本的位置显示的提示文本
title：鼠标悬停的时候，显示的提示文本

<a href="" target=""></a> 超链接 href：链接地址 target：打开新网页的打开方式，默认是在本页面打开

<div></div> 盒子

3.css样式：

内联样式： <标记 style="属性1：属性值1；属性2：属性值2；..."></标记>
内部样式：在head中添加<style></style>

4.选择器：
（1）标签选择器：在<>中的标记都可以作为标签选择器
语法：
<style>
标记{
属性1：属性值1；
属性2：属性值2；
            }
</style>
（2）class选择器：必须在style中进行声明，在标签中进行引用，声明的时候使用“.”进行声明，多个class选择器可以同时作用于一个标记。
语法：
<style>
.color1{
属性1：属性值1；
属性2：属性值2；
            }
        .color2{
属性1：属性值1；
属性2：属性值2；
}
</style>
<p class= "color1 color2">M</p>
id选择器：必须在style中进行声明，在标签中进行引用，声明的时候使用“#”进行声明，他是唯一的，取名的时候不能使用关键字
语法：
<style>
#color1{
属性1：属性值1；
属性2：属性值2；
}
#color2{
属性1：属性值1；
属性2：属性值2；
}
</style>
<p id= "color1">M</p>

:hover 伪类选择器，表示鼠标经过事件
包含选择器：必须要有包含的关系
比如：.box p
<div class="box">
<p></p>
</div>

（5）常用的css属性：
width：宽取值px/%
height：高取值px/%
background-color 背景颜色
font-size 字体大小
font-weight：bold；字体加粗
line-height 行高
color 字体颜色
text-align：center/left/right 文本居中/居左/居右
border：边框宽度边框颜色边框样式；边框
box-showdow：水平阴影的位置，垂直阴影的位置，高斯模糊的距离，阴影的宽度，阴影的颜色以及透明度，阴影的样式
border-radius：边框圆角
transform：rotate(10deg) scale(1.2); 动画，旋转动画单位deg 缩放动画
transtion：all 0.3s；过渡动画，单位ms/s
margin：外边距
padding：内边距

(6)元素类型
块元素：
特征：独占一行，可以设置宽高，一般情况下作为容器。
若宽不指定的情况下默认与父元素宽度相等，若高不指定的情况下，则它的高度由其内容来决定。
对于块元素，我们若指定了宽度，可以使用margin-left与margin-right取值为auto来进行水平居

例如：div、p、h1~h6

行内元素：
特征：不独占一行，设置不上宽高。
行内元素的大小由其内容大小来决定。
例如：span、a

行内块元素：隶属于行内元素，但是又具有块元素的特征。

特征：既不独占一行，又能设置宽高。

(7).元素类型转换
display：block；转为块元素
display：inline；转为行内元素
display：inline-block；转为行内块元素

(8)浮动
float：left；左浮动
float：right；右浮动
作用：通过浮动，我们可以使块元素在同一行显示

(9)列表
无序列表
<ul>
<li><

最低0.47元/天解锁文章