1-HTML简介（标记、属性）

来源：互联网发布：python json库编辑：程序博客网时间：2024/05/18 00:50

网络结构

网络结构：B/S（browser/server）、C/S（client/server）

浏览器：将服务器返回的各种代码（HTML，CSS，JavaScript），翻译成“图文混排”的效果

服务器：安装了服务器端软件（Apache等）的电脑

HTML：超文本标注语言，控制网页结构

CSS：层叠样式表，控制网页元素外观

JavaScript：交互效果，控制网页元素行为

HTML

HTML：Hypertext Markup Language，是一种规范，是一种标准，编写网页的一种标准

HTML文件结构：<html><head></head><body></body></html>

HTML文件结构说明：

1、<html></html>标记含义：告诉浏览器，其中的代码用什么格式来翻译

2、<head></head>标记的含义：告诉浏览器，网页中的汉字用说明字符集（GB2312：简体中文、BIG5：大五码繁体中文、JIS：日文、UTF-8：多国）显示，不使用正确字符集，网页就出现乱码

3、<body></body>表及含义：主要内容的显示区域，几乎所有

HTML标签格式：双边标记和单边标记

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

语法格式：<标签属性1 = “值1” 属性2 = “值2”>内容</标签>，属性可以理解为特征，对标签内容的详细描述

2、单边标记：只有开始标记，没有结束标记，没有内容，一般就是起一个特殊功能。如：<br>

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

HTML标签编写规范：

1、HTML中标记不区分大小写

2、HTML中标记属性可有可无，有的标记没有属性

3、双边标记和单边标记的特征

4、HTML中标记可以相互嵌套，但一定是顺序嵌套，外层套内层，一层套一层

<body>的常见属性

1、bgColor：网页背景色

2、background：网页背景图片地址

HTML文本修饰标记

1、<b></b>：加粗bold

2、<i></i>：斜体italic

3、<u></u>：下划线underline

4、<s></s>：删除线strike

5、<sup></sup>：上标superscript

6、<sub></sub>：下标 subscript

7、<font></font>：字体标记

font属性： size：文本大小，取值1-7，1小7大。

Color：颜色

Face：字体

代码编辑器简介

中文操作系统的默认字符集（字符编码），就是GB2312，记事本的默认字符集也是GB2312

一个好的代码编辑器，可以提高工作效率。代码编辑器分两类：

（1）增强的文本编辑器：Editplus、Notepad+

优点：软件较小，占用内存更小，语言颜色，自动缩进

缺点：没有代码提示（代码自动补全）

（2）IDE集成开发环境：Dream weaver、Zend studio

特点：功能更强大，一般情况下不会免费，错误检查，Apache，连接MySQL

Editplus设置：工具—>参数（字体，颜色，编辑环境字符集。。。）

如何保证网页不会出现乱码？

1、编辑环境的字符集

2、<meta>标记的字符集

3、PHP的字符集

4、MySQL的字符集

保证以上几种环境的字符集一致，一般情况下不会出现乱码

HTML排版标记

1、<p></p>：表示一个段落paragraph

常用属性：align：水平对齐方式，取值left（默认左对齐）、center、right

2、<br>：换行break

3、<hr>：水平线标记horizontal

常见属性：

size：水平线粗细，单位一般为像素px
color：水平线颜色
width：水平线的宽度，默认网页的宽度
noshade：去掉水平线的阴影，在HTML中是没有值得属性。如<hr noshde>或noshade=“noshade”（XHTML）

4、<pre></pre>：预排版标记，保留所有的空白字符（空格、换行）

5、<h1>...<h6>：标题标记，双边标记

常见属性：align

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

块元素：一般独占一行<div> <h1> <p> <pre>...

行内元素：不会独占一行，多个行内元素，会排在同一行<font> <b> <i> <u> <sub> <sup>…..

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

HTML字符实体

1、空格：  代表一个半角空格，一个汉字2个字节，一个字节相当于一个半角宽

2、<：<

3、>：>

4、&：&

5、×：&times；

6、÷：&divide；

7、¥：¥

HTML项目符号（无序列表）

<ul>

...

</ul>

块元素

注意：在HTML标记中，内容（文本、项目符号、编号列表、表格、图片等）应该放在最底层标记中

<ul><li>常用属性：

Type：项目符号的类型，取值：disc（小黑点）、circle（空心圆）、square（实心方块）

HTML编号列表（有序列表order list）

<ol>

...

</ol>

<ol><li>常用属性：

Type：项目编号的类型，取值：a、A、i、I、1
start：从第几个开始编号（数字）

滚动字幕标记

1、<marquee>滚动内容</marquee>

2、常用属性：

direction：滚动方向，取值up、down、left、right
width：滚动宽度
height：滚动高度
bgColor：滚动背景色
scrollAmount：滚动步长值
scrollDelay：两步之间的停留时间（ms）1秒=1000毫秒
loop：循环滚动次数

图片标记

1、<img 属性1=“值1” 属性2=“值2”>，单边标记

2、常用属性：

Width：图片宽度
Height：图片高度
Border：图片边框粗细
Src：图片的路径（相对路径），一般和HTML文件平级，images/xx.xx
Align：图片的水平对齐方式，取值left、center、right，只能让文本居中，图片中用于图文混排（left、right）
Hspace：图片与左右文字之间的距离（水平距离）
Vspace：图片与上下文字之间的距离（垂直距离）

3、注意：如果图片只想等比例缩放，只需要指定width或height其中一个

0 0