html静态网页设计代码

preview
试读
10页
html
需积分: 0 2 下载量 125 浏览量 更新于2023-03-31 收藏 68KB DOCX 举报
HTML 静态网页设计代码 HTML 是一种标记语言，用于描述网页的结构和内容。静态网页设计代码是指使用 HTML 语言编写的网页代码，该代码可以被浏览器解析，并显示出相应的网页内容。 HTML 基本结构 HTML 文档的基本结构由 `<html>`、`<head>` 和 `<body>` 三部分组成。其中，`<head>` 部分用于书写网页样式和元数据，而 `<body>` 部分用于书写网页主题。 HTML 常用标签 1. 标题标记 `<h1>`... `<h6>`：用于定义标题的级别和样式。 2. 段落标记 `<p>`：用于定义一个段落。 3. 加粗标记 `<b>`、`<strong>`：用于加粗文本。 4. 倾斜标记 `<i>`：用于倾斜文本。 5. 换行标记 `<br/>`：用于换行。 6. 空格标记 `&nbsp;`：用于添加空格。 7. 图片标记 `<img>`：用于添加图片，src 属性用于指定图片链接地址，alt 属性用于指定图片加载失败时的提示文本，title 属性用于指定图片鼠标悬停时的提示文本。 8. 超链接标记 `<a>`：用于添加超链接，href 属性用于指定链接地址，target 属性用于指定打开新网页的方式。 CSS 样式 1. 内联样式：使用 `style` 属性在 HTML 标签中添加样式。 2. 内部样式：在 `<head>` 部分添加 `<style>` 标签，用于定义样式规则。 选择器 1. 标签选择器：使用标签名选择元素，例如 `<style> h1 { color: red; } </style>`. 2. class 选择器：使用 `.` 选择器，例如 `<style> .color1 { color: red; } </style>`，然后在 HTML 标签中添加 `class` 属性，例如 `<p class="color1">文本</p>`. 3. id 选择器：使用 `#` 选择器，例如 `<style> #color1 { color: red; } </style>`，然后在 HTML 标签中添加 `id` 属性，例如 `<p id="color1">文本</p>`. 常用 CSS 属性 1. 宽度 `width`：用于设置元素的宽度，单位为 px 或 %。 2. 高度 `height`：用于设置元素的高度，单位为 px 或 %。 3. 背景颜色 `background-color`：用于设置元素的背景颜色。 4. 字体大小 `font-size`：用于设置元素的字体大小。 5. 字体加粗 `font-weight`：用于设置元素的字体加粗。 6. 行高 `line-height`：用于设置元素的行高。 7. 文本颜色 `color`：用于设置元素的文本颜色。 8. 文本居中 `text-align`：用于设置元素的文本居中方式。 9. 边框 `border`：用于设置元素的边框宽度、颜色和样式。 10. 盒阴影 `box-shadow`：用于设置元素的盒阴影效果。 元素类型 1. 块元素：独占一行，具有宽高，例如 `<div>` 和 `<p>`. 2. 行内元素：不独占一行，大小由内容决定，例如 `<span>` 和 `<a>`. 3. 行内块元素：既不独占一行，又能设置宽高，例如 `<button>`. 元素类型转换 1. `display: block;`：将元素转换为块元素。 2. `display: inline;`：将元素转换为行内元素。 3. `display: inline-block;`：将元素转换为行内块元素。 浮动 1. `float: left;`：将元素浮动到左侧。 2. `float: right;`：将元素浮动到右侧。 列表 1. 无序列表 `<ul>`：用于创建无序列表。 2. 有序列表 `<ol>`：用于创建有序列表。 这些知识点是 HTML 静态网页设计代码的基础，掌握这些知识点可以帮助您更好地设计和开发静态网页。
第一周：HTML 写静态网页
一、HTML 理论介绍及常用格式
1.HTML 主体格式基本结构
<!DOCTYPE html> <html> <head> <mate charset=”utf-8″/> <title>标题</title> </head>
<body> 主要内容 </body> </html>
解说：整个 HTML 格式分为两大部分，一个是 head 部分，一个是 body 部分，其中 head
部分是用于书写网页样式，而 body 部分用于书写网页主题
2.常用标签：
标题标记
<h1></h1>
… <h6></h6>
<p></p>段落标签
<b></b> <strong></strong>加粗
<i></i>倾斜
<br/>换行
&nbsp;空格
<img src=”” alt=”” title=””/> 图片【gif，png，jpg】src:图片的链接地址 alt：图片加载失败
的时候，在图片原本的位置显示的提示文本 title：鼠标悬停的时候，显示的提示文本
<a href=”” target=””></a> 超链接 href：链接地址 target：打开新网页的打开方式，默认是
在本页面打开
<div></div> 盒子
<span></span>
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></li> <li></li> … </ul>
有序列表
type 的取值：1、a、A、i、I
<ol type=””> <li></li> <li></li>
</ol>
自定义列表 <dl> <dt>名词</dt> <dd>解释</dd> </dl>
(10)css 样式： 外部样式的引用 <link href=”外部样式文件的地址”></link>
去掉下划线： text-decoration: none;
去掉列表默认的样式： list-style: none;
平移动画 transform: translateX(20px) ; translateX：在 x 轴的平移，取值为正，向右平移，
取值为负，向左平移 translateY：在 y 轴的平移，取值为正，向下平移，取值为负，向上平
移。
(11)background：背景颜色 背景图片链接地址 背景图片平铺方式 背景图片水平方向的
位置 背景图片垂直方向的位置 参数二：url(“”) 参数三：默认 repeat，no-repeat 不平铺
repeat-x 水平平铺 repeat-y 垂直 参数四：默认 left，取值 left/right/center/px/% 参数五：
默认 top，取值 top/bottom/center/px/%
(12)position 定位 可以有四个方位进行定位： left、top、right、bottom

剩余9页未读，继续阅读

资源推荐
资源评论
老了敲不动了
  • 粉丝: 87
  • 资源: 4618
上传资源 快速赚钱
voice
center-task 前往需求广场，查看用户热搜

最新资源