HTML & CSS 编辑静态网页

最新推荐文章于 2024-06-24 00:14:58 发布
最新推荐文章于 2024-06-24 00:14:58 发布
阅读量344 收藏 1
点赞数
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fer12138/article/details/127308495
版权
这篇博客介绍了HTML作为超文本标记语言的基础概念和语法，包括HTML文档的后缀名，以及表单标签的学习。接着，文章转向CSS，解释了层叠样式表的概念、优势，如内容与样式的分离，以及它如何提升开发效率。最后，讨论了CSS中的选择器，用于筛选和控制元素的样式。
摘要由CSDN通过智能技术生成

一、HTML 概念概述

HTML 是最基础的网页开发语言。是 Hyper Text Markup Language（超文本标记语言）的缩写，是一种用于创建网页的标准标记语言。

  • 超文本 是指用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
  • 标记语言 是指由标签构成的语言。语法格式：<标签名称>。标记语言不是编程语言，是没有任何逻辑性的。

html文档后缀名 .html 或者 .htm。

二、HTML 语法使用说明

标签学习：

1. 文件标签：构成html最基本的标签
    * html:html文档的根标签
    * head：头标签。用于指定html文档的一些属性。引入外部的资源
    * title：标题标签。
    * body：体标签

2. 文本标签：和文本有关的标签
    * 注释：<!-- 注释内容 -->
    * <h1> to <h6>：标题标签
    * <p>：段落标签
    * <br>：换行标签
    * <hr>：展示一条水平线
        * color：颜色
        * width：宽度
        * size：高度
        * align：对其方式
            * center：居中
            * left：左对齐
            * right：右对齐


    * <b>：字体加粗
    * <i>ÿ
最低0.47元/天 解锁文章
Fer12138
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 和 css 代码 总结
m0_55170432的博客
04-13 1384
标题
HTML- HTML&CSS
上山打卤面的博客
09-09 239
HTML标签：表单标签 * 表单： * 概念：用于采集用户输入的数据的。用于和服务器进行交互。 * form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 * 属性： * action：指定提交数据的URL * method:指定提交方式 * 分类：一共7种，2种比较常用 ...
使用html+css实现一个静态页面（含源码）
最新发布
qq_365392777
06-24 1041
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
HTML&CSS
人生如戏 全靠演技
04-02 1153
html&css 基础入门
HTML和CSS代码规范
Lee的博客
05-07 2015
HTML 语法 HTML5 doctype 语言属性 IE 兼容模式 字符编码 引入 CSS 和 JavaScript 文件 实用为王 属性顺序 布尔型属性 减少标签的数量 JavaScript 生成的标签 CSS 语法 声明顺序 不要使用 @import 媒体查询（Media query）的位置 带前缀的属性 单行规则声明 简写形式的属性声明 Less 和 ...
html+css静态网页制作
08-30
HTML+css静态网页制作，各位有兴趣的伙伴可以参考下，该网页的制作没有用到javascript，都是标记语言，花了将近一天的时间写完，量比较大，建议刚开始写网页编辑的朋友可以找类似的网站练练手。（可以上网搜搜凡科建...
HTML+CSS鲜花静态网页设计
08-10
### 知识点一：HTML+CSS静态网页设计概述 在HTML+CSS静态网页设计中，主要依靠HTML来构建网页的基本结构，而CSS则用来美化这些结构，使其呈现出丰富多彩的视觉效果。本案例中的“HTML+CSS鲜花静态网页设计”正是...
Web前端静态个人简历，网页个人简历模版，HTML&CSS制作个人简历.zip
06-03
本资源“Web前端静态个人简历，网页个人简历模版，HTML&CSS制作个人简历.zip”提供了一套用于创建专业且吸引人的个人简历的前端模板。这个模板基于HTML（HyperText Markup Language）和CSS（Cascading Style Sheets...
网页设计成品DW静态网页Html5响应式css3——电影网站bootstrap制作(4页d
08-10
**网页编辑**：作品中的代码简洁且易于理解，可以使用多种HTML编辑器进行运行和编辑，比如Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等，这些工具对于初学者来说都非常友好。 **知识应用*...
DIV+CSS静态HTML网页设计模板.zip
01-03
【标题】"DIV+CSS静态HTML网页设计模板.zip"是一个包含使用了HTML和CSS技术的网页设计模板。这种模板主要用于创建静态网页，其中HTML（超文本标记语言）负责定义页面结构，而CSS（层叠样式表）则用来控制页面的布局...
HTML+CSS静态页面设计
03-30
有三个页面，基本还原原页面效果。包括一个首页，一个人才招聘页面，一个人才研究会所页面。https://www.muji.com.cn/仿的该网页，适用于前端基础项目学习参考。
纯html+css静态网站
07-14
html+css做的一个静态的网站，该网站是模仿“惠州乐网科技”，只可用于学习，不得用于商业用途，谢谢
HTML与CSS各种代码与用法,几种关于html和css的使用方法
weixin_39640085的博客
06-09 95
本文主要和大家介绍了几种关于html和css的使用方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。HTML使用方法篇一：颜色代码如果你想使用某种颜色，取得它的颜色值即可。比如，您想改变某些文字的颜色，您可以使用下面的代码：改变#符号后的代码即可改变颜色二：文字加粗 倾斜的代码◆文字加粗的代码是: 你好 ◆文字倾斜的代码是: 你好！ ◆底线字：三：...
HTML&CSS简单代码示例
qq_46156328的博客
08-04 1454
<!DOCTYPE html><!-- 约束 声明 --> <html lang="en"><!-- html标签表示html的开始 --> <head><!-- 表示头部信息，一般包含三部分内容，title标签，css样式，js代码 --> <meta charset="UTF-8"><!-- 表示当前页面使用UTF-8字符集 --> <title>Hello JAVAWEB!&lt
html与css的配合
qq_35018332的博客
07-21 474
第一篇博客，博主就写写刚打出来的 html与 css的结合而设计的一个网页和小动画效果，拿来与大家共同探讨下，有错可指正哦!闲言少叙，上代码： /*动画效果跑屏*/ #message{ width:57px; height:57px; position:absolute; z-index:3; background:url(../image13/apple-touch-icon-57-
网页制作基础学习——HTML+CSS常用代码
热门推荐
北辰的博客
02-01 4万+
HTML（HyperText Markup Language）,即超文本标记语言，是用于描述网页文档的一种描述标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
常用 HTML CSS代码规范
a972043362的博客
12-19 605
代码规范 1. 概述 欢迎使用品优购代码规范， 这个是我借鉴京东前端代码规范，组织的品优购内部规范。旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范， 以下规范是团队基本约定的内容，必须严格遵循。 HTML规范 基于 W3C、苹果开发者 等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。 图片规范 了解各种图片格式特性，根据特性制定图片规范，包括但不限于...
【Css】Css和Html常用设计实例参考笔记（自己开发项目用）
【敦厚的曹操】的专栏
04-07 1142
一、左右居中 1、div等块元素左右居中 margin: 0 auto; margin: 0 auto; 2、span等行级元素左右居中 text-align: center; text-align: center; 二、图片、图标字体等上下错位调整 相对定位：position:relative { position:relative; left:10px; top:10px } 三、图标字体等上下错位调整 ............
使用html和css编辑一个静态网页
06-06
好的，下面是一个简单的例子，实现一个包含标题、图像和文本的静态网页。 HTML代码： ``` <!DOCTYPE html> <html> <head> <title>静态网页</title> <style> body { font-family: Arial, sans-serif; font-size: 16px; color: #333; margin: 0; padding: 0; } header { background-color: #333; padding: 20px; color: #fff; text-align: center; } img { display: block; margin: 0 auto; max-width: 100%; height: auto; } section { padding: 20px; text-align: justify; } </style> </head> <body> <header> <h1>我的静态网页</h1> </header> <section> <img src="https://via.placeholder.com/500x300" alt="图片"> <p>这是一段文本，可以在这里写一些关于你静态网页的介绍。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac ex euismod, interdum nulla sed, pulvinar lectus. Integer suscipit sem eget lorem hendrerit, vel consequat erat auctor. Cras eleifend ipsum vitae consequat consequat. Praesent vel lorem non massa luctus porttitor. Nullam a semper lorem. Donec auctor, nunc quis molestie semper, ex quam viverra quam, ut ornare felis enim in metus. Sed at velit at ante semper sagittis. Vestibulum ac congue purus, eu feugiat ipsum. Donec vitae ante nec elit ultricies lobortis.</p> </section> </body> </html> ``` CSS代码： 在`<style>`标签中添加以下样式： - `body`：设置全局字体、字号和颜色，并将页面的边距和内边距都设为0。 - `header`：设置页面头部的背景颜色、内边距和文字颜色，并将文字居中对齐。 - `img`：设置图片的样式，使其居中显示、自适应宽度和高度。 - `section`：设置页面主体部分的内边距和文本对齐方式。 完成后，将以上代码保存为一个HTML文件，然后在浏览器中打开这个文件即可看到效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值