搜索
首页web前端html教程php学习第一天之HTML篇

2.B/S网络模式(结构)

B/S,browser/Server浏览器/服务器结构。在这种模式下,客户端不需要安装任何的软件(除了浏览器软件),所有的其它的功能都集中到了服务器上。客户端基本上零维护。

image002

image003

3.HTML简介

HTML,HyperText Markup Language超文本标注语言,是SGML的一个应用。是一种标准,一种规范,一种标志(标记)。

比如:北京传智

各种标记的作用:就是告诉浏览器这个内容该如何显示。

image006

静态网页的扩展名:.html   .htm

动态网页(包含服务器端程序)的扩展名:.php  .jsp  .aspx等

 

超文本:是指加了超链接的文本。

 

4.HTML标记的格式

双边标记:内容标记>

举例:广州传智

单边标记:

 

 

一个人有哪些特性:姓名、年龄、学历、毕业院校、身高、体重等

同理:人是一个类别,张三是类别中的一个具体的对象。

 

5.书写HTML标记的规范

1)HTML标记不区分大小写,建议大家使用小写,为了向后兼容。如:

2)一个标记可以有属性,也可以没有属性。如果有属性的话,属性和标记间用空格隔开(至少一个),属性与属性之间用空格隔开。属性必须放在开始标记中,不能放在结束标记中。

比如:

没有属性:

3)属性值一般情况下,都需要加引号(不加也不为错)。

4)HTML的数值属性值,不需要加单位(px),但CSS中的数值的属性值必须要加单位。

HTML中的写法:

CSS中的写法:

5)标记之间可以嵌套,但只能是顺序嵌套,也就是一层套一层,不能交叉嵌套。

6.一个网页的HTML结构

网页标题

网页的主体内容

结构说明:

当浏览器遇到该标记时,就把内容按网页格式来翻译。包含两个子标记:

定义网页文件头信息的,该标记中的内容在浏览器中是不可见,一般起一个特殊的作用。

定义网页的标题的,是的子标记。

是网页的主体内容,网页中99%的内容或标记,都是放在中。中的内容是可见的。

 

7.的常用属性

bgColor:设置网页背景颜色,比如:

background:设置网页的背景图片URL,比如:

 

8.HTML字体修饰标记

加粗    bold

斜体     italic

下划线   underline

删除线   strike

上标

  下标

字体标记

常用的属性

Size:字体大小,取值:1-7,1小7大。

Color:字体颜色,比如:red或RGB(255,0,0)或#FF0000

Face:字体类型,比如:face=“黑体”

举例:内容


水平线,是单边标记

常用的属性:

Size:水平线的粗细

Width:水平线的宽度

Color:水平线的颜色

noshade:纯色显示,不带阴影效果

 

 

9.代码编辑器

1)增强文本编辑器:Editplus  Notepad

特点:软件小、占用系统资源少、语法颜色

缺点:没有代码提示功能

 

 

2)IDE集成开发环境:Zend Studio

特点:软件较大、占用系统资源多、语法颜色、代码提示功能、PHP程序的调试功能、数据库配置等

缺点:收费

 

3)可视化的网页代码编辑工具:Dreamweaver

第一步:创建站点,站点——管理站点

一个站点,就是一个网站,一个网站由多个目录或文件构成。

image008

第二步:设置代码字号大小  CTRL+U  编辑——首选参数——字体

image010

第三步:设置新建网页时的默认编码:CTRL+U  编辑——首选参数——新建文档

image012

UTF-8是多国语言编码,只要你有相应的输入法,就能显示不同国家的语言。

 

 

 

如何保证网页不出现乱码的问题?

1)  你的编辑器的默认编码,要设置为UTF-8

2)  你的HTML代码中,标记,也要设置相应的UTF-8编码

3)  你的PHP网页的编码也要设置为UTF-8

4)  你的MySQL读取的数据编码也要设置为UTF-8

 

第四步:设置DW的默认浏览器:CTRL+U  编辑——首选参数——在浏览器中预览

image014

DOM浏览器,标准浏览器,Firefox浏览器

 

10.网页颜色表示

用英文单词来表示:red  green   blue

用10进制来表示:RGB(255,0,0)  RGB(0,255,0)  RGB(0,0,255)

用16进制来表示:#FF0000      #00FF00       #0000FF

 

RGB色彩模式

自然界中的所有颜色,都可以通过红(R)、绿(G)、蓝(B)三种基色相互混合而成,RGB又叫三原色。

RGB色彩模式,又叫加色模式。任何两种颜色相加,可以产生其它颜色。

在计算机中,每个基色用1个字节来表示(8位二进制,假设如11011011),共可以表示256(0-255个亮度级别)种颜色

RGB共可以混合出多少种颜色? 256 * 256 *256=1677万种色

在网页中的写法:

红色:RGB(255,0,0)

绿色:RGB(0,255,0)

蓝色:RGB(0,0,255)

黄色:RGB(255,255,0)

 

 

二进制:0、1                                                   运算规则:逢二进一

十进制:0、1、2、3、4、5、6、7、8、9                           运算规则:逢十进一

十六进制:0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F     运算规则:逢十六进一

网页颜色用十六进制表示:

红色:#FF0000       用两位16进制来表示1位10进制

绿色:#00FF00

蓝色:#0000FF

黄色:#FFFF00

 

 

在不同的浏览器下,10进制显示存在不兼容性,最好的是16进制表示方法。

在HTML中10进制表示颜色,没有效果;但在CSS中可以使用10进制表示。

11. image016

12.HTML排版标记

代表一个段落


换行


水平线,noshade属性没有属性值

:一级标题最大

…………

六级标题最小

常用的属性:

align:水平对齐,取值: left、center、right

 

预排版标记,将保留代码所有的空白(连续的空格或换行),换句话说:该标记中的内容会原封不动的输出。

在PHP中输出数组时,用

保留空白输出。

image018

13.

这两个标记,如果单独使用,没有任何效果,一般要结合CSS来使用。

这两个标记,虽然没有任何意义,但在DIV+CSS中又是用的最多的。

相当于两个小的容器,里面用来存放其它内容,方便排版布局。

块元素和行内元素

块元素:单独占取通栏的宽度,前后的元素必须另起一行排版。比如:

行内元素:多个行内元素排在同一行,行内元素没有宽度,宽度是由内容来决定。比如:

 

14.HTML字符实体

      代表一个半角空格

>       大于号

<        小于号

&      &

¥       人民币

©      版权

×      乘号

÷       除号

 

 

15.项目符号标记(无序列表):块元素

  • 内容1
  • 内容2

常用的属性:

Type:项目符号的类型,取值:disc(实心圆点)、circle(小圆圈)、square(小方块)

 

 

16.编号列表(有序列表)

    “a” start=“3”>

      

  •       

  •        ……

    常用的属性:

    Type:编号类型,取值:1(数字)、a、A、i(小罗马)、I(大罗马)

    Start:编号的起始数,该值是一个数字。比如:start=3

     

    转载自—重蔚自留地
  • 声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    HTML与CSS和JavaScript:比较Web技术HTML与CSS和JavaScript:比较Web技术Apr 23, 2025 am 12:05 AM

    HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

    HTML作为标记语言:其功能和目的HTML作为标记语言:其功能和目的Apr 22, 2025 am 12:02 AM

    HTML的功能是定义网页的结构和内容,其目的在于提供一种标准化的方式来展示信息。1)HTML通过标签和属性组织网页的各个部分,如标题和段落。2)它支持内容与表现分离,提升维护效率。3)HTML具有可扩展性,允许自定义标签增强SEO。

    HTML,CSS和JavaScript的未来:网络开发趋势HTML,CSS和JavaScript的未来:网络开发趋势Apr 19, 2025 am 12:02 AM

    HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

    HTML:结构,CSS:样式,JavaScript:行为HTML:结构,CSS:样式,JavaScript:行为Apr 18, 2025 am 12:09 AM

    HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

    HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

    HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

    HTML与CSS vs. JavaScript:比较概述HTML与CSS vs. JavaScript:比较概述Apr 16, 2025 am 12:04 AM

    HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

    HTML:是编程语言还是其他?HTML:是编程语言还是其他?Apr 15, 2025 am 12:13 AM

    HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

    HTML:建立网页的结构HTML:建立网页的结构Apr 14, 2025 am 12:14 AM

    HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

    See all articles

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    Video Face Swap

    Video Face Swap

    使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

    热工具

    禅工作室 13.0.1

    禅工作室 13.0.1

    功能强大的PHP集成开发环境

    SublimeText3汉化版

    SublimeText3汉化版

    中文版,非常好用

    MinGW - 适用于 Windows 的极简 GNU

    MinGW - 适用于 Windows 的极简 GNU

    这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

    PhpStorm Mac 版本

    PhpStorm Mac 版本

    最新(2018.2.1 )专业的PHP集成开发工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)