0

0

菜鸟自学建站 HTML 第四课 设置文档格式(1)_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 12:06:57

|

1412人浏览过

|

来源于php中文网

原创

上一节课我们通过手打,复制粘贴,导入等几种方法创建了我们自学习以来的第一个网页。但是呢,跟我们平常浏览的网页比起来,它简直弱爆了,也丑爆了。不过毕竟是我们接触网页制作以来的第一个页面,怎么也得说句:我骄傲!是吧。

在文档中添加内容并不困难,接下来的工作是如何设置文本的大小、颜色、格式等属性以及文档的页面属性,这些呢,也是制作网页的基础工作。

在接下来的学习中,内容点会不断增加,大家还要多加练习才是王道。

1.设置浏览器的标题

标题其实就跟我们的姓名一样,比如我叫张三,那么一看到张三你就会联系到我这张苦逼的?丝脸跟我这个人。

立即学习前端免费学习笔记(深入)”;

标题的作用,就是让我们知道这个网页是什么内容,而且标题一定要跟内容相关,否则你看到一个网页的标题是香烟,可是打开却是卖茶叶的,这样就乱套了。

 

修改标题的方式有三种(上节课我们简单的教了2种)回顾一下:

(1)在文档的工具栏的标题文本框中输入,如

(2)选择修改?页面属性命令,或者单击属性面板中的页面属性按钮,打开页面属性对话框,然后选择标题/编码分类,在标题文本框中输入

2.设置段落格式

(1)分段和换行

在文档窗口里面,每按一次Enter,就会另起一个段落,但是段落之间会有一个空行间距。怎么样才能不让换行后没有间距呢?

一起动手做吧!

选择插入记录?HTML?特殊字符?换行符

或者按 Shift+Enter

或者工具栏中点文本,点换行符图标

 

一起来看看效果

 

(2)文档标题

在写文章时,我们都会有一个题目,这个题目就相当于浏览器的标题

而在文章里面,我们有时也会加一些小标题,这些小标题就是文档标题

举个例子:作文题目:我的游戏史

作文里面又分为两个部分: 魔兽世界  DOTA

然后魔兽世界里面又分为:部落 联盟

这里的作文题目,实际上就是我们的浏览器标题

魔兽世界 DOTA,是我们文档的1号标题

部落 联盟,是我们文档的2号标题

怎么设置这些标题的格式呢?

做个小例子:

先把上面的内容写到文档里

选中魔兽世界,点击属性栏的格式,选择标题1

我们会发现,代码里的

魔兽世界

已经变成了

魔兽世界

这里的就是我们的标题标签(俗称代码)

它代表的意思就是,这里是一个文档标题,不是文档段落或者其他

那如果我让这个标题换个字体,换个大小,怎么设置呢?

悟智写作
悟智写作

易开即用的AI写作平台

下载

点击属性栏的页面属性,选择标题分类,就可以进行标题的样式设定了

设置好以后,按照刚才的方法进行标题的设置

 

(3)设置列表

我们平常可能会遇到这样一种情况,就是比如记录我们每天的日程

比如:1.早上7点半起床

      2.7点半~8点开始锻炼身体

      3.8点~8点半洗漱完毕吃早饭

      4.9点到达公司开始上班

像上面这个例子的1.2.3.4. 就是一种列表

在网页制作过程中,我们怎么样来做这样一种列表呢?

还是做个小例子:

老规矩,先输入文本

然后点击属性栏的列表项目符号

观察代码:

变成了
  • 就是列表的代码

    那如果我想要换成a,b,c,d来作为列表,可以么?

    我们将鼠标光标放到列表中,点击属性栏的列表属性,在列表类型,样式中修改即可。

     

    今天的学习就到这里。下面留个小作业。

    输入以下内容:

    新建一个文档,保存为菜鸟建站的一个作业.html

    设置浏览器标题为: 菜鸟建站的第一个作业

    根据作用对以下文本进行设置

    把以上三行话设定一个文档标题

    h1标题文字大小为18,颜色为#000

    h2标题文字大小为14,颜色为#00f

    h3标题文字大小为9,颜色为#ccc;

    字体为像素(px)

    输入一个换行符

    我是菜鸟,我喜欢建站,我喜欢设计,我喜欢编程,我会为了我的目标而努力

    我的追求是将来可以自己动手制作一个网站

     

    作业要求,1,将前四段话设置一个项目列表,列表样式为数字1.2.3.4.

    2.将第5~8段话,设置为3个文档标题。标题样式为话语本身

    3.在第9~10行话中加入一个换行符

    最终效果如下:

    by??午夜的猫

  • HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
    pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

    本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

    705

    2026.02.13

    微博网页版主页入口与登录指南_官方网页端快速访问方法
    微博网页版主页入口与登录指南_官方网页端快速访问方法

    本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

    233

    2026.02.13

    Flutter跨平台开发与状态管理实战
    Flutter跨平台开发与状态管理实战

    本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

    117

    2026.02.13

    TypeScript工程化开发与Vite构建优化实践
    TypeScript工程化开发与Vite构建优化实践

    本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

    22

    2026.02.13

    Redis高可用架构与分布式缓存实战
    Redis高可用架构与分布式缓存实战

    本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

    61

    2026.02.13

    c语言 数据类型
    c语言 数据类型

    本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

    30

    2026.02.12

    雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
    雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

    本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

    15

    2026.02.12

    豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
    豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

    本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

    669

    2026.02.12

    PostgreSQL性能优化与索引调优实战
    PostgreSQL性能优化与索引调优实战

    本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

    58

    2026.02.12

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号