PHP学习之旅-PHP相关基础知识(了解HTML及语法标签)

HTMl(超文本标记语言)简介

含义

文本标记语言:用标记将文本标识出来的语言。

超:比文本标记语言多了一些东西,能够标记出图片

超文本标记语言(HypertextMark-uplanguage),他通过标记符号来标记显示的网页中的各个部分,HTML是一种规范,是一种标准。

HTML的发展史

w3c(万维网联盟)

HTML5在2014年10月29日,制定结束。

注意:

某某某浏览器支持了HTML5=>

严格来说应该说:某某某浏览器支持了HTML5的什么功能。

HTML语言的语法

创建HTML文件

创建html文件后缀名必须为html,前面文件名随意,但是不要用中文。

标签属性

双标签

<标签名></标签名>叫双标签。

<marquee></marquee>叫标签。

标签是HTML最基本的单位,也是最重要的组成部分。

标签需要使用两个尖括号包起来,包含指定的字母。

标签有两个标记一个代表开始,一个代表结束。结束使用/加标签名。

标签名都是相同的,成对出现的。

小技巧:

写双标签时应该将开始标签和结束标签全部写完了后再写标记的内容。

单标签

<标签名/>叫单标签,不是成对出现的,结尾以/来结尾。

<br/>换行。

注意:

1、HTML标签不区分大小写,但是我们推荐使用小写,这样更符合标准。

2、属性:

用来修饰、控制标签的,如果你不写某个属性,这个属性也会有一个默认值。

loop这个属性默认值是0,代表一直循环。

loop='3'属性。

格式:

属性名="属性值"

注意:

1、属性要写在标签里面。

2、写属性值的时候,可以使用单引号也可以使用双引号,也可以不写。但是建议使用双引号。

3、标签的属性可以有多个。

4、标签属性不分先后。

HTML颜色值得设置

颜色值两种表示方法

1、直接用英文单词来表示颜色(pink、red、blue、green、yellow、black)

2、用6位的16进制的值来表示(0~9a~f)

6位分成三组,红、绿、蓝的比例。

每一组的2位里面就是指的这种颜色。在使用的时候前面加上#号。

HTML对于空格及回车的处理

1)、HTML中一个空格和多个空格都会当作一个空格来处理。

2)、HTML中一个回车也会当作一个空格。

HTML字符实体

有些字符是系统预留的或者打印不出来的字符,这个时候如果你想要显示他们需要使用到实体。

实体的概念

实体:就是一些特殊的数字、字符来表示一些特殊的字符的字符串。

常用的实体

空格

<

>

&

"

'

两种表示实体的方法

1)、字符串表示

空格

<<

>>

&&

""

''

格式:&字母;

2)、数字表示

空格

<<

>>

&&

""

''

格式:&#数字;

标签的嵌套

双标签里面可以嵌套双标签也可以嵌套单标签。

HTML标签格式:

1、双标签的格式

<标签名属性1="值1"属性2="值2".....>要标记的内容</标签名>

2、单标签的格式

<标签名属性1="值1"属性2="值2"....../>

HTML的注释符

<!--要注释的内容-->

注释符的使用:

1、说明代码的时候。

2、调试代码的时候。

HTML的主体标签

告诉浏览器应该以什么方式来解释这个文档

<!DOCTYPE  html>

注意:

1、必须放在第一行。

2、不区分大小写<!doctype  html>或者<!DOCTYPE  HTML>都可以

HTML的外层标签:

HTML文档的最外层要有一组<html>标签成对出现,在整个文档中是唯一的。是网页文件的最外层标签。

注意:

1、HTML文档中的所有的标签都应该在<html></html>中

2、<html>告诉浏览器这是HTML文件的起始点。

3、</html>告诉浏览器这是HTML文件的结束。

在<html>标签中要有<head>和<body>标签:

<head>标签:

头标签,这里的内容不会显示在浏览器中,这里面通常放置网页的描述性语句。说明网页的公共属性。

<body>标签:

主体标签,这里面放置的是真正的内容、文字、图片。

HTML的缩进

按Tab键=》每次缩进4个空格

HTML的标签

<head>描述和关键字

描述:keywords  关键字:description

示例:

<meta name="keywords" content="忘记时间" />

<meta name="description" content="忘记,时间" />

<head>标签

<head></head>

<title>标签:

定义在整个HTML文档中的标题,显示在网页的标题栏上,在整个HTML文档中只能有一个。

作用:

1、显示网页的标题,让用户一看就知道网页要表达的意思。

2、搜索引擎在搜索的时候将title作为关键字。

字符集

字符集:

字符的集合。

编码:

规定字符集里面的每个字应该怎么写。

发展过程:

1、美帝国主义发明了电脑。他们需要和电脑进行沟通,这个时候发明了一种编码,单字节编码ACSCII码。只包含了英文字母和一些符号。一个字占用一个字符。

2、随着电脑的普及,每个国家人都需要和电脑进行沟通。这个时候各个国家开始制定自己的字符集(ANSI编码),ANSI是各国指定的,中国制定了GBK、GB2312。一个汉字占用2个字符。

3、ANSI中只能存储自己国家的字符,如果要在一个文档中存储多个国家的字符。国际标准化组织制定了个规范,推出了UNICODE编码。UTF-8的字符集、UTF-16,

<meta/>标签

定义对页面的描述:

更改字符集

规定让浏览器以什么字符集来解析这个页面。

<metacharset="utf-8"/>

其他用法

<metaname=""content=""/>

name属性里面的值都是规定好的:

1、keywords,指定网页的关键字

2、description,指定网页的描述

content属性中的值,根据name属性的值来字定义的内容。

1、name值为keywords时

作用:

1、当搜索引擎在抓取网页的时会将这些关键字抓取出来。

注意:

1、可以设置多个关键字、每个关键字之间使用逗号进行分隔。

2、计算机中使用的符号都是英文符号。

2、name值为description时

注意:

1、里面就是放置的本网页的描述信息。

其他的头标签

<script></script>

用来定义一段javaScript脚本

<style></style>

用来写CSS样式

<link/>

设置外部文件的链接,用于确定本页面和其他文档之间的关系。

<body>内的标签

<body>标签中的内容都是显示在浏览器中的。

文本标签:

网页中信息通常以文字为主,一个使用的好的文本标签的网页可以很好的突出内容。

1.<p>标签:

定义一个段落。

注意:p标签会在每个段落前后自动创建一行空白。

2.<hn>标签:

文字的标题

<h1>~<h6>

<h1>最大的标题

<h6>最小的标题

注意:

1、被<hn>标记的文本将会自动换行并加粗。

2、H标签是标题标签,他的重要程度从<h1>-><h6>依次递减。

3、内容的总体标题,通常使用<h1>标签,而且这个标签离body越近越好。

3.<b>标签:

加粗文本

4.<strong>标签:

表示重要的文本内容,也就是在需要文本突出周围文本的时候使用。

注意:

<b>和<strong>样式虽然一样,但是对于浏览器和搜索引擎来说他们的意义是不同的,<b>表示加粗,

<strong>表示文本很重要。

5.<i>标签:

斜体

6.<em>标签:

斜体,并强调标记的内容要重读。

注意:

<i>只用来表示斜体,通常用在技术术语,一些外文单词,

<em>标签表示这个单词要重读。

7.<cite>标签:

用来定义作品的标题。

8.<q>标签:

用来表示一个简短的引用。

cite属性:

表示从哪里引用的。

注意:不要看他的样式,注意他的含义,内容。

9.<abbr>标签:

表示一个缩写

注意:

1、会告诉搜索引擎、用户这个简写代表什么意思。

2、鼠标移动上去的时候会有一个提示框。

10.<del>标签:

表示该文本已经被删除。中间有一条中横线表示删除。

cite属性:

表示为什么删除。

11.<dialog>标签:

表示对话,将对话的内容包含在里面。(需要配合dt和dd标签)

注意:

1、dialog包括起来以后,说话的人用<dt>包括起来,说的话用<dd>包括起来。

链接标签

链接:

在web项目中,网页是相互连接的。这种点击可以跳转的东西叫作链接。

绝对路径、相对路径

绝对路径:

从头开始计算文件的路径。

举例说明:

C:\xampp\htdocs\140\20160229

http://www.baidu.com/index.html

相对路径:

相对于文件现在的位置来进行计算。

注意:

相对路径中表示当前目录使用.

举例说明:

./1.html

相对路径中表示当前目录的上级目录使用..

./../20160226/1.html

../20160226/1.html

http://www.baidu.com/index/index.html

./abc

http://www.baidu.com/index/abc

http://localhost/140/20160229/xxoo.html

http://localhost/140/20160229/ooxx.html

<a>标签:

链接到指定的文档

href属性:

要跳转的页面,为一个URL,可以是绝对路径也可以是相对路径

注意:

1、如果网址为绝对路径时需要加上http://否则找的是当前目录下xx文件。

2、绝对路径不能使用本地的绝对路径

http://www.baidu.com/index/index.html

target属性:

点击链接后在哪里打开。

_blank:新窗口打开

_self:本窗口打开(默认)

锚点(URL中的片段表示符)

步骤:

1、分块

<aname="标记名">

要分块的内容

</a>

2、标记链接(显示出来的能够点击的链接)

<ahref="#标记名">标记链接</a>

注意:

1、标记链接的时候要和分块的名称要一样。

2、不要用中文。

块状元素和行内元素

行内元素:都在一行上面显示。

块状元素:每一个都是一整块(会自动换行)。

列表标签

<ul>无序列表

注意:

1、将所有的项用<ul>包起来。

2、将每一项用<li>包起来。

<ol>有序列表

注意:

1、将所有的项用<ol>包起来。

2、将每一项用<li>包起来。

图像标签

<img/>标签:

图像标签

src属性:

值必须为一个URL,可以是本地文件也可以是网络文件。这个地址指向一个图像。

如果图像不存在就裂了

alt属性:

图像不能正确显示的时候告诉浏览器网页的人和搜索引擎这张图片应该表示的是什么内容。

width属性:图像的宽度

height属性:图像的高度

px:像素,pixel缩写。

举例说明:

1024×768屏幕中的像素点为1024*768个

表格

<table>标签:

告诉浏览器在<table>内包含内容属于表格。

<caption>标签:

给表格添加标题。

<thead></thead>:

表格表头

<tbody></tbody>:

表格主体

<tfoot></tfoot>:

表格脚注部分

<tr></tr>与<td></td>:

每一行使用一个<tr></tr>,如果是在<thead>中的单元格使用<th>

如果是在<tbody>或<tfoot>中的单元格使用<td></td>

常用属性:

<table>中的属性:

border属性:

边框

<th><td>中的属性

colspan:规定单元格横跨的列数。

rowspan:规定单元格竖跨的行数。

表单

<form>标签:

告诉浏览器这个双标签中包含的内容是表单的内容。

method属性:

提交数据的方法。默认的时候使用get方法,可以指定为post。

action属性:

将数据提交到哪里,直接写接收的地址。是一个URL地址,可以是绝对路径也可以是相对路径

<input/>标签:

单标签,用来定义输入框

type属性:

定义输入框的类型:

text:表示是一个文本输入框,让用户输入的。

配合的属性:

name:必须写,输入的值传递到服务器上的标识。

value:表示默认值。

size:表示输入框的宽度。

maxlength:最大允许输入的字符。

disabled:disabled="disabled"禁用输入框。

password:表示是一个密码输入框

配合的属性:

name:必须写,输入的值传递到服务器上的标识。

radio:表示定义一个单选框

配合的属性:

name:必须写,标识。

value:指每个选项对应的值。

注意:一组单选框他们的名字应该是相同的否则不能实现单选。

checked:checked="checked"默认选中

checkbox:复选框,可以选择多个。

配合的属性:

name:必须写,标识

value:对应的值。

注意:name的值后面加上个中括号,表示接收到的值是一组值,而不是一个值。

checked:checked="checked"默认选中

file:

上传框

配合的属性:

name:必须写,标识。

hidden:隐藏域,没有显示的结果。

name:必须写,标识

value:对应的值。

submit:提交按钮

value:表示按钮显示的值。

reset:重置按钮,重置input标签的内容

value:表示按钮显示的值。

image:图像按钮,使用图片代替submit原来的样式。

src属性:来指明图像的位置。

autofocus属性:将光标自动定位在拥有该属性的表单中,一个页面中只有一个元素能够使用autofocus。

placeholder属性:占位符,用于给予快速提示。格式:placeholder="值",当该字段获得鼠标焦点时候文字自动消失。

id属性:为了给一个<label>标签指定一个标识。

标签

<label>标签:

为<input/>标签定义标注

for属性:

和input表单中的id属性进行绑定

<select>标签:

定义一个下拉列表

name属性:下拉列表叫什么名字

disabled属性:disabled="disabled"

<option>标签:用来定义下拉列表中的每一项。

value属性:实际选中该选项后传递给服务器的值。

disabled属性:disabled="disabled"禁用掉某个选项

<textarea>标签:

用来输入大段文字。

name属性:传输的标识。

注意:

1、定义默认值时应该将默认值写在标记的中间。

2、如果<textarea>标签中间有回车,输入的内容中也会有回车。

cols:文本区域内可见的宽度

rows:文本区域内可见的高度

resize:none

让文本区域固定不变

<button>标签:

定义一个按钮

type属性:

button,表示没有任何效果。

submit,表示提交

reset,表示重置。

注意:对于type属性每个浏览器中的默认值是不同的。所以我们在使用的时候要注意给type加上一个值。

<iframe>标签:

内框架标签

src属性:载入框架的时候文档的地址。

frameborder属性:规定是否显示边框,1为显示,0为不显示。

width属性:设置iframe的宽度

height属性:设置iframe的高度

scrolling属性:是否允许滚动,在iframe显示滚动条使用yes,不显示滚动条使用no,auto表示的自动的。

name属性:是给这个框架起一个名字。配合a链接的target属性用于在该框架中打开页面。

其他的标签

<br/>换行

<hr/>标签线,定义内容中的主题变化。

<pre>原样输出。

"最没用"的标签,出现了CSS变成了最有用的标签:

<div>:块状元素

<span>:行内元素

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,001评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,210评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,874评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,001评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,022评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,005评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,929评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,742评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,193评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,305评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,911评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2 352

推荐阅读更多精彩内容