自己跟着网上教程复习上学期的HTML+CSS，因为已经忘得差不多了，而且现在学的js也要以HTML+CSS为基础，坚持每天持续更新。

n  B/S 网络结构

 

Browser/Server 浏览器/服务器，这是现在最流行的网络模式。如新浪网、凤凰网等。

C/S Client/Server 客户端/服务器。最关键的地方，在自己电脑上安装一个客户端软件，通过客户端访问服务器。QQ

n  HTML 简介

 

HTML  Hypertext Markup Language 超文本标注语言。

HTML是一种规范，是一种标准，编写网页的一种标准。

超文本：就是网页上不光有文本，还有图片、音乐、视频等。

标注：是一种记号，是一种标志。如：红绿灯。

语言：这里的“语言”就是代码，跟所谓“程序语言”一点关系都没有。

HTML的主要目的：就是用来显示网页的不同效果，不同部分。如：<b>文本</b>

n  HTML文件结构

<html>

<head>

<title>新浪首页</title>

</head>

<body>

网页正文··、、、、、、

</body>

</html>

HTML文件结构的说明

l  <html></html>标记的含义：告诉浏览器，其中的代码用什么格式（图片、视频）来编译。

l  <head></head>标记的含义：告诉浏览器，网页中的汉字用什么字符集（GB2312、BIG5、JIS）显示。不使用正确的字符集，网页会出现乱码。GB2312（简体中文）、BIG5（繁体中文）、JIS（日文）、utf-8（多国语言）

l  <title></title>中只能是纯文本，任何标记都会原封不动的显示。

l  <body></body>是网页主要内容的显示区域，网页中99%的内容都必须放在<body>中，最终浏览器翻译以后，才能看见结果。

l  功能：告诉浏览器，如何翻译汉字

l  Content-type：内容类型

l  Control：详细内容类型介绍

l  Text/html：网页是text格式，html是文本中的小格式

l  Charset：字符集，主要控制汉字如何显示

l  Utf-8：多国语言编码，什么国家的语言都可以正常显示

n  HTML标签格式

 

HTML标记，大致分两类：（1）双边标记；（2）单边标记

1、 双边标记

双边标记，是指有开始和结束标记，内容放在开始和结束标记之间。如：<b>内容</b>

语法格式：<标签 属性1=“值1” 属性2=“值2”>内容</标签>

“属性”的理解：人的特征（属性）有身高=170cm、体重=70KG、姓名=张三

2、 单边标记

  单边标记，只有开始标记，而没有结束标记，单边标记一般是没有内容。如：<br />

单边标记一般起一个特殊的功能。

单边标记常用的有10多个标记。

语法格式：<标签 属性1=“值1” 属性2=“值2” />

n  HTML标签编写规范

 

l  HTML标记不区分大小写。如：<font>=<Font>=<fOnt>

l  HTML标记属性可有可无，有的标记是没有属性的。如：<html><head><title>等

l  双边标记的内容在开始和结束标签之间，单边标记没有内容。

l  HTML标记可以相互嵌套，但一定注意是顺序嵌套，外层套内层，一层套一层

n  <body>的常用属性

 

l  bgcolor：网页背景色。如：<body bgcolor=”red”>

l  background:网页背景图片地址。如：<body background=”images/1.jpg”>

n  HTML文本修饰标记

 

l  <b></b>：加粗bold。如：<b>HTML文件</b>

l  <i></i>：斜体italic。如：<i>HTML文本</i>

l  <u></u>：下划线underline。如：<u>HTML文本</u>

l  <s></s>：删除线strike。如：<s>HTML文本</s>

l  <sup></sup>上标。

l  <sub></sub>下标。

l  <font></font>字体标记

  • Size：文本大小，取值1-7。1小，7大
  • Color：颜色值。
  • Face：字体。楷体、黑体、宋体、微软雅黑

n  HTML排版标记

l  <p></p>表示一个段落

  • 常用属性：align：水平对齐方式，取值：left（左）、center（居中）、right（右）
  • 例：<p align=“right”>段落段落段落段落段落段落段落段落</p>

l  换行标记（单边标记）<br />

l  水平线标记（单边标记）<hr />

  • Size：水平线的粗细，单位一般为px。
  • Color：水平线的颜色。
  • Width：水平线的宽度。可以用百分数 %
  • Noshade：去掉水平线的阴影（值等于本身）。如：noshade=”noshade”

l  <pre>预排版标记

  • 功能：将保留所有的空白字符（空格、换行符），换句话说就是原封不动输出。

l  标题标记：<h1></h1>………<h6></h6>

  • 功能：定义各种标题
  • 属性：align水平对齐，取值：left、center、right。
  • 语法：<h1 align=”left | center | right”></h1>

n  <div>和<span>标记

<div>是没有任何意义的标记，但是又是使用最多的标记。<div>一般要与CSS配合使用，<div>是一个块元素。

<span>是没有任何意义的标记，但是又是使用最多的标记。<span>一般要与CSS配合使用，<span>是一个行内元素。

（1）块元素

  • 块元素一般是单独占一行，
  • 块元素有哪些？<div>、<p>、<h1>、<h2>、<pre>等

（2）行内元素

  • 行内元素不会单独占一行。
  • 行内元素的宽度，主要是根据内容决定。
  • 多个行内元素，会排在一行。
  • 行内元素有哪些？<font>、<b>、<i>、<u>、<sub>、<sup>等

结论：在标记嵌套时，一般是块元素中嵌套行内元素。

n  HTML字符实体

  • 空格：&nbsp;代表一个半角空格。一个汉字是2个字节：1个字节相当于1个半角空格。
  • <：&lt;
  • >：&gt;
  • &：&amp;
  • ￥：&yen;
  • ×：&times;
  • ÷：&divide;

n  HTML项目符号

<ul>

<li>内容1</li>

<li>内容2</li>

<li>内容3</li>

</ul>

  • <ul>或<li>的常用属性
  • Type：项目符号的类型，取值：disc（小黑点）、circle（空心圆）、square（实心方块）。

注意：在HTML标记中，内容应该放在最底层标记中。

<ul>和<li>是块元素。

n  HTML编号列表（有序列表）

<ol>

<li>…………</li>

<li>…………</li>

<li>…………</li>

</ol>

  • <ol>或<li>的常用属性

Type：编号类型，取值：1、a、A、i、I

Start：从第几个开始编号（数字）。

n  滚动字幕标记<marquee>（已淘汰）

语法格式：<marquee>滚动的内容</marquee>

常用属性

  • Width：滚动宽度
  • Height：滚动高度
  • Bgcolor：滚动背景色
  • scrollAmount：滚动步长值。值越大，滚动越快。
  • scrollDelay：两步之间的停留时间，以毫秒单位。1秒=1000毫秒。
  • Loop：循环滚动的次数。
  • Behavior：滚动的方式。取值：alternate（循环滚动）、scroll（单方向循环滚动）、slide（只滚动一次）

注意：当取值为scroll时，可改变方向（和direction配合使用。Direction：滚动方向，取值：up、down、left、right）

PS：1点了，所有内容都是从自己文档笔记直接复制上来的，有些项目符号显示不出来，还有着重颜色也没有了，将就看吧，觉得有意思的可以联系我发源文档和一些代码例子。

转载于:https://www.cnblogs.com/roadlandscape/p/8750698.html

复习上学期的HTML+CSS（1）相关推荐

  1. 复习上学期的HTML CSS（1）

    自己跟着网上教程复习上学期的HTML CSS,因为已经忘得差不多了,而且现在学的js也要以HTML CSS为基础,坚持每天持续更新. n  B/S 网络结构   Browser/Server 浏览器/ ...

  2. 【大学复习】终极版计算机网络复习提纲自制（大二上学期）

    ▪概述: 1.p2计算机网络的两大基本功能: 连通性和共享性 2.p29网络协议三个基本要素:语义.语法与同步: 语法:是用户数据与控制信息的结构与格式,以及数据出现的顺序的意义: 语义:用于解释比特 ...

  3. 大二上学期做的不入眼的导航系统。

    大二上学期,数据结构老师说要让我们做一个课程设计,记得是从民航管理系统.导航系统.和电话管理系统三个系统里选择其中一个,而我就因为看会了floyd,就决定写写导航系统把,事实并没有非常熟练地掌握,一拖 ...

  4. 【心随意动】20-SIST研一秋季上学期课程总结【补】

    呀,自从来到了SIST,每天每夜都要么在写作业,要么就是在去写作业的路上,每天都是它们的deadline呐!好不容易有了一个早上可以睡觉养精神,我也是用来刷手机或发会儿呆.以至于上学期期间完全没有时间 ...

  5. 高三计算机教学计划,高三上学期教学教学计划集锦5篇

    高三上学期教学教学计划 篇4 一.指导思想; 根据上学期制订教学进度,结合学生特点,注重全面提高学生的素质和培养学生自主学习的能力,在高三这学期中稳步提高学生分析问题和解决问题的能力,争取今年高考的成 ...

  6. 四年上册级计算机教学计划,四年级上学期教学计划（通用5篇）

    四年级上学期教学计划(通用5篇) 教学计划要以校工作计划和德育工作计划为指导,本着为学生服务的宗旨,养成学生崇高的思想品质和良好的道德情操,努力培养德.智.体.美全面发展的接班人.下面是小编为大家整理 ...

  7. C语言高一,高一数学上学期的所有知识点

    偶尔会抱怨为什么自己没天赋,又或者因为别人能轻易做到自己做不到的事而不平衡.从某种角度上来讲,这完全没办法.现在的我倒觉得这样也好,世上或许有人能一步登天,但那人不是我.自己一点一点抓住的东西,比什么 ...

  8. 学物理赶不上计算机,高二上学期物理为何这么难？

    高二上学期物理为何这么难? (文/王尚)家长咨询:王老师您好,我家孩子是女孩,刚上高二.她的物理并不是强项,不过还凑合:高一结束时,其实我原来打算想让她读文科的,后来因为她们学校理科很强,文科比较弱, ...

  9. 八年级上学期计算机教学计划,八年级上学期劳技教学计划

    八年级上学期劳技教学计划 根据计划内容的明确性指标,可以将计划分具体性计划和指导性计划.那么八年级上学期数学教学工作计划应该如何制定呢?下面是爱汇网小编为大家整理的八年级上学期数学教学工作计划,供大家 ...

最新文章

  1. 重定向后，如何通过浏览器返回定向之前的页面？
  2. 所有表单对象_Laravel 表单方法伪造与 CSRF 攻击防护
  3. 菜鸟学习javascript实例教程
  4. vs2017的一件奇葩事
  5. 检查mysql当前状态
  6. AJAX框架构成设计,基于Ajax的Web框架设计与实现
  7. c语言opengles程序,OpenGL ES _ 着色器_程序
  8. 佳博ip修改工具_如何修改设备IP，换IP来组建网络
  9. 欧菲光修正2020年业绩为预计亏损18.5亿元
  10. 闪电邮修改服务器设置,网易闪电邮添加outlook邮箱的方法（图文教程）
  11. 雷赛服务器信号er020,伺服与雷赛控制卡配套的小技巧
  12. 初中理化生实验室仪器配置
  13. win7计算机怎么录屏,怎么用win7系统的电脑录屏
  14. 项目实战第二十一讲：平台商品库
  15. 基于CNN的SEEG/EEG脑电数据处理分析
  16. word文档中如何将软回车替换为硬回车
  17. Markdown字体转换
  18. sphinx（附demo）
  19. 搞IT的you知道这些么……
  20. html onload状态事件,HTML onload事件用法及代码示例

热门文章

  1. 随记（六）－－计算代码运行所需时间
  2. [转载]spring security 的 logout 功能
  3. android中控制ListView宽度和高度
  4. 程序员选择字体的标准是
  5. 线程高级应用-心得9-空中网的三道面试题，考察应试者的线程掌握的深度
  6. Unix下的crontab简介
  7. ActiveX技术在WEB页上的应用[转载]
  8. 03 | SRE切入点：选择SLI，设定SLO
  9. Docker 持久化存储
  10. 都说它是年度Android机皇,【上手】都说它是年度Android机皇，Galaxy Note10到底怎么样？...