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 /> 换行符
-----------------------------------------
空格
<< / >>
-----------------------------------------
注释: 不需要程序执行的代码片断,一般用于对代码的解释,给程序员看的
<!--注释内容-->
-----------------------------------------
标题标记:
<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
HTML入门知识的更多相关文章
- [置顶] Mysql存储过程入门知识
Mysql存储过程入门知识 #1,查看数据库所有的存储过程名 #--这个语句被用来移除一个存储程序.不能在一个存储过程中删除另一个存储过程,只能调用另一个存储过程 #SELECT NAME FROM ...
- 移动H5开发入门知识,CSS的单位汇总与用法
说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...
- H5移动端开发入门知识以及CSS的单位汇总与用法
说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...
- Java web 入门知识 及HTTP协议详解
Java web 入门知识 及HTTP协议详解 WEB入门 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资 ...
- Java基础入门知识
Java编程入门知识 知识概要: (1)Java入门基本常识 (2)Java的特性跨平台性 (3)Java的编程环境的搭建 (4)Java的运行机制 (5)第一个Java小程序入门 (1)Java ...
- zabbix入门知识
zabbix入门知识 zabbix中文手册 https://www.zabbix.com/documentation/3.4/manual/ 1.zabbix介绍 Zabbix 是一个企业级的分布式开 ...
- React的入门知识与概念【1】
回顾在以往的项目开发中,从最初的使用的原生html+js+css+jquery开发,到后来随着项目功能的增加,也渐渐学习了Vue.js框架的开发,以及Vue.js的全家桶Axios,Vue-route ...
- 我的Python笔记补充:入门知识拾遗
声明:本文整理借鉴金角大王的Python之路,Day1 - Python基础1,仅供本人学习使用!!! 入门知识拾遗 一.bytes类型 二.三元运算 1 result = 值1 if 条件 else ...
- 浅谈TCP IP协议栈(一)入门知识【转】
说来惭愧,打算写关于网络方面的知识很久了,结果到今天才正式动笔,好了,废话不多说,写一些自己能看懂的入门知识,对自己来说是一种知识的总结,也希望能帮到一些想了解网络知识的童鞋. 万事开头难,然后中间难 ...
- 2. Mysql数据库的入门知识
2. Mysql数据库的入门知识 (1)打开Windows系统提供的服务查看相应的服务. (2)在Windows任务管理器的进程中查看 (3)使用命令行管理windows的Mysql数据库服务. Ne ...
随机推荐
- 英语词汇(2)fall down,fall off和fall over
一.fall down,fall off和fall over都表示"摔倒.跌倒"的意思,但它们各自的含义不同. 1.fall over 落在...之上, 脸朝下跌倒 fall ov ...
- Mac 中配置Apache
使用的mac版本是10.10.1,mac自带的Apache环境 分为两部分: 1.启动Apache 2.设置虚拟主机 启动Apache 打开终端, >>sudo apachectl -v, ...
- [CodeForces 11D] A Simple Task - 状态压缩入门
状态压缩/Bitmask 在动态规划问题中,我们会遇到需要记录一个节点是否被占用/是否到达过的情况.而对于一个节点数有多个甚至十几个的问题,开一个巨型的[0/1]数组显然不现实.于是就引入了状态压缩, ...
- python/Django(增、删、改、查)操作
python/Django(增.删.改.查)操作 我们要通过pycharm中的Django模块连接MySQL数据库进行对数据的操作. 一.创建Django项目(每创建一个项目都要进行以下设置) 1.如 ...
- MySQL 如何使用 PV 和 PVC?- 每天5分钟玩转 Docker 容器技术(154)
本节演示如何为 MySQL 数据库提供持久化存储,步骤为: 创建 PV 和 PVC. 部署 MySQL. 向 MySQL 添加数据. 模拟节点宕机故障,Kubernetes 将 MySQL 自动迁移到 ...
- Windows Socket的UDP和TCP编程介绍
1:网络中进程之间如何通信 为了实现进程之间通信,首要解决的问题是如何唯一标识一个进程,在本地可以通过进程PID来唯一标识一个进程,但是在网络中则是行不通的,其实TCP/IP协议族已经帮我们解决了这个 ...
- MySQL 表空间传输
聊到MySQL数据迁移的话题,表空间传输时一个很实用的方法. 在MySQL 5.6 Oracle引入了一个可移动表空间的特征(复制的表空间到另一个服务器)和Percona Server采用部分备份,这 ...
- 学习HTML的第一次课
1.母板中的标签的含义 1.1< Doctype html/ > 声明文档类型为HTML 1.2< meta charset="UTF-8"/ > 设当前网 ...
- Jenkins + Gradle + pgyer + Android自动发布
Jenkins配置与必要的环境配置 一:Jenkins服务端(Linux系统为例说明): 1.jdk安装与配置 2.SDK安装与配置 3.安装配置对应的gradle版本(建议gradle版本在4.1版 ...
- 再谈前端HTML模板技术
在web2.0之前,写jsp的时候虽然有es和JSTL,但是还是坚持jsp.后面在外包公司为了快速交货,还是用了php Smart技术. web2.0后,前端模板技术风行. 代表有如下三大类: Str ...