目录
2.B/S网络模式(结构)
3.HTML简介
4.HTML标记的格式
5.书写HTML标记的规范
6.一个网页的HTML结构
7.的常用属性
8.HTML字体修饰标记
9.代码编辑器
10.网页颜色表示
12.HTML排版标记
14.HTML字符实体
15.项目符号标记(无序列表):块元素
16.编号列表(有序列表)
首页 web前端 html教程 php学习第一天之HTML篇

php学习第一天之HTML篇

Sep 14, 2016 am 09:24 AM

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

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

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

    AI Clothes Remover

    AI Clothes Remover

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

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    AI Hentai Generator

    AI Hentai Generator

    免费生成ai无尽的。

    热门文章

    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.最佳图形设置
    1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
    威尔R.E.P.O.有交叉游戏吗?
    1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

    热工具

    记事本++7.3.1

    记事本++7.3.1

    好用且免费的代码编辑器

    SublimeText3汉化版

    SublimeText3汉化版

    中文版,非常好用

    禅工作室 13.0.1

    禅工作室 13.0.1

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

    Dreamweaver CS6

    Dreamweaver CS6

    视觉化网页开发工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)

    &gt; gt;的目的是什么 元素? &gt; gt;的目的是什么 元素? Mar 21, 2025 pm 12:34 PM

    本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

    &lt; datalist&gt;的目的是什么。 元素? &lt; datalist&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

    本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

    &lt; meter&gt;的目的是什么。 元素? &lt; meter&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

    本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

    视口元标签是什么?为什么对响应式设计很重要? 视口元标签是什么?为什么对响应式设计很重要? Mar 20, 2025 pm 05:56 PM

    本文讨论了视口元标签,这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互,而滥用可能会导致设计和可访问性问题。

    &lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么? &lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么? Mar 20, 2025 pm 06:05 PM

    本文讨论了&lt; iframe&gt;将外部内容嵌入网页,其常见用途,安全风险以及诸如对象标签和API等替代方案的目的。

    HTML容易为初学者学习吗? HTML容易为初学者学习吗? Apr 07, 2025 am 12:11 AM

    HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

    HTML,CSS和JavaScript的角色:核心职责 HTML,CSS和JavaScript的角色:核心职责 Apr 08, 2025 pm 07:05 PM

    HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

    HTML中起始标签的示例是什么? HTML中起始标签的示例是什么? Apr 06, 2025 am 12:04 AM

    AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

    See all articles