HTML入门知识

B/S:浏览器-服务器
C/S:客户端-服务器 更新麻烦 管理麻烦

PHP:基于BS结构进行项目开发的语言

====================
HTML:超文本标记语言 -- 控制网面内容
CSS:层叠样式 -- 控制网页样式
JavaScript:-- 控制网页行为

====================
HTML
这是一个解释性语言,不需要编译,是由浏览器直接翻译标记来执行的语言

浏览器:
了解内核

====================
最基本的HTML代码:
<html>
<head>
<title>my firstpage</title>

</head>

<body>
hello P42
</body>
</html>

注意:html代码都是由标记来组成的
标记:双标记 <tag></tag>
单标记 <tag />

<tag 属性1="值1" 属性2="值2" >


实体都具有属性

红色的宝马
宝马
红色

-----------------------------------------
<head>
<title> -- 网页标题
<meta> -- 作为网页声明
<meta name="keywords" content="关键字内容" /> -- 声明当前网页的关键字,用于提高被搜索引擎检索的概率 (name:声明)
<meta name="Description" content="对当前网页的描述" /> -- 声明当前网页的描述信息
<meta name="author" content="作者的名字" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -- 用于设置网页的字符集
字符集:utf-8 国际通用的中文编码集,包含了所有的简体字和繁体字
GBK/GB2312 普通使用的中文编码集

注意:文件的字符集必须和代码中设置的字符集相同

-----------------------------------------

<body>
text:用于指定网页中非链接文字的颜色
关于颜色:1.使用单词 red yellow blue orange....

2.使用十六进制数 #红 绿 蓝 0~F
#ff0000

bgcolor:用于指定网页主体的背景颜色
background:用于指定网页主体的背景图片
关于路径:相对路径 -- 相对于当前文件本身所指的路径
绝对路径 -- 使用物理址管理文件路径
C://abc/bb/1.jpg

-----------------------------------------

<p> 段落标记,该标记所包含的内容占浏览器的一整行,所以有换行的功能
align -- left/center/right
用于设置当前p标签中的内容在浏览器中的对齐方式
-----------------------------------------

<br /> 换行符
-----------------------------------------

&nbsp; 空格
&lt;< / &gt;>
-----------------------------------------

注释: 不需要程序执行的代码片断,一般用于对代码的解释,给程序员看的
<!--注释内容-->
-----------------------------------------

标题标记:
<h1>~<h6>

-----------------------------------------

<hr /> 水平分隔线
width: 设置水平分隔线的宽度
1. 固定值 -- 不受浏览器大小影响,始终为固定大小
2. 百分比 -- 根据浏览器大小来动态决定自身大小
size:设置粗细
color:设置颜色
align:left/center/right:水平显示位置

-----------------------------------------

<pre> 按照原代码格式显示内容,注意,一般只用于PHP开发阶段进行对后台代码的查看使用

-----------------------------------------

<font> 文字标签
size : 1~7 用于设置文字的大小
color:设置文字颜色
face:设置字体样式

-----------------------------------------

<center></center>

-----------------------------------------

<img />
src:指向图片路径
title:图片的标题
alt:当图片无法正常显示时,用于对图片位置的提示信息
width:设置图片的宽度
height:设置图片的高度
注意:如果width和height都同时设置,会导致图片变形,但如果只设置一个,另一个值会等比缩放

-----------------------------------------
<table>:表格 行+列
border="数值" :表示该table有该数值这么宽的边框
width="数值" :表示该table的整体宽度
height="数值" :表示该table的整体高度
注意:表格中没有内容的情况下,宽度和高度都会根据行和列的数量进行平均分配
bordercolor="颜色":设置表格的边框颜色
align="left/right/center" : 设置整个表格在网页中的水平方向对齐方式
bgcolor="颜色":设置整个表格的背景颜色
background="图片路径":设置整个表格的背景图片
cellpadding="值":表示内容与边框之间的间距(内边距)
cellspacing="值":表示单元格与单元格之间的间距(外边距)

<tr>: 行
height="数值":设置该行的整体高度
bgcolor="颜色":设置该行的背景颜色
background="图片":设置该行的背景图片
align="left/right/center":设置该行的内容的水平方向的对齐方式
valign="top/middle/bottom":设置该行的内容的垂直方向的对齐方式

<td>: 列
width="数值":设置该列的宽度
bgcolor="颜色":设置指定单元格的背景颜色
background="图片":设置指定单元格的背景图片
align="left/right/center":设置指定单元格的内容的水平方向的对齐方式
valign="top/middle/bottom":设置指定单元格的内容的垂直方向的对齐方式
rowspan="合并行数"
colspan="合并列数"


caption:作为表格标题,出现在tr之外
eg:<table>
<caption>标题内容</caption>
</table>

th:用来替代td,其中的内容会加粗并居中

 2017-08-05

posted @ 2017-08-05 15:39  php_小学生  阅读(177)  评论(0编辑  收藏  举报