首页 > 代码库 > HTML基础

HTML基础

HTML(hyper  text  markup  language)超级链接 文本 标记 语言

用<>括起来称为标记语言

扩展名 .htm  .html

对同一内容的控制,标记语言的显示遵循语句的“就近原则”

语言的对比:

Html 是解释执行的语言  读一行数据,浏览器解释一行

Sql 是编译执行的语言  将源代码变成机器代码   比HTML反应快

制作网站流程:

1.网站先做出来

2.买域名

域名的后缀:

。com 商业性(可随便申请)

。net  商业性(可随便申请)

。org  非盈利性

。edu  高校教育(申请不下来)

。gov  政府(申请不下来)

。cn

3.买空间

网页做出来要传到浏览器上,需要买空间(空间是用来提供服务的)。买空间就会分给你一块区域,用来乘放HTML代码,和数据库文件,然后给你分配一个ip地址。买完空间需要申请使用权,大陆的空间都需要备案,如果是个人,需要提供很多证件,而且需要审核通过才能用此空间,这个过程一般时间很长;对企业的申请要求更加严格,但审批的快;而香港的虚拟主机是免费注册的。买空间时,一般不在网上买,在代理手中买,代理一般买很大的空间,所以价格便宜,一般在2~3折,卖时一般在5折。

空间和域名之间有一个过程叫解析,即输入域名就能看到空间的内容的过程,所以在空间和域名的购买问题上,一般选择同一家购买齐全,这样如果网页出现问题,就不会出现两家企业互相推责任的踢皮球事故,也更容易管理。

开启运行功能,在控制板输入 ping  网址  结果是你所输入网址的ip地址

 

HTML格式:

<html>

<head>

<title>

</title>

</head>

<body>

</body>

</html>

一个<>标记语言称为标签,一对<>标记语言称为元素。

例:<head>是一个标签<head></head>是一个元素

HTML的四个主要元素:

<html></html>   

<head></head>  头

<title></title>   标题(地址栏的内容)

<body></body>   身体(网页的内容)

HTML的注释语法:

<!——输入要被注释的内容——>  

Body里的属性:

     Bgcolor=” ”  设置整个页面背景色

     Text=” ”      字体颜色

     Topmargin=””  页面边距(上部分,在“”里填数值,代表边距多少)

     Bottommargin=””   下部分边距

     Rightmargin=””   右部分边距

     Leftmargin=””    左部分边距

     Background=””  背景图案(一般图案不要找太大的)(平铺)(””内填写 路径)

颜色的调配:

rgb(,,)光的三原色红,绿,蓝,每个数最大是255

“#ff0000”用16进制表示出来,代表红…

 

 

路径:分相对路径和绝对路径

相对路径是从网页存的页面开始找,在同一个文件夹内,用 ./ 来表示,但可以省略不写,直接写文件名称加扩展名。如果不在同一个文件夹内,以网页存的地址开始查找,每向上一个文件夹,就用一个 ../ 代替一次,直到找到能找到这个文件的文件夹。

绝对路径是从网站根开始,即在根后面的路径全部写出来。例如百度的根是:http://www.baidu.com/

一般做网页常用相对路径,在自己的语言控制范围之内,防止绝对路径在根后面自己写的路径前面加路径或修改路径而不能实现读取数据。

标签分类:    

格式控制标签:

<font> </font>    控制字体

<b></b>      控制加粗      <strong></strong >(效果和b一样,内容强调为关键字)

<i></i>       控制倾斜      < em></em> (效果和i一样,内容强调为关键字)

<u></u>      控制下划线

< center ></ center >    居中

<br>      换行

&nbsp;   空格,写一个为一个空格(在网页界面ctrl+shift+空格  为空格)

<font  color=”” face=”” size=””></font>  控制字体的颜色,样式,大小(这三样称为属性)

延伸:

网页中索引内容一般为关键字出现的密度决定,密度过高,不一定排列在最前面(索引会审查内容,密度过高,可读性差,会被定义为垃圾)。一般密度在6%左右。网页下面有‘推广’字眼的点击都会花钱,他们的排列顺序(影响知名度)都是由投资大小来决定。

内容容器标签:

<h1></h1>       标题 默认换行(数字有1~6,数字越大,字越小)

<p></p>        段落 默认换行 (有行距)

<div></div>      层(区域)  默认换行 (无行距)

<span></span>    层(区域)  默认在内容中间,实现单独控制 类似选中的功能

<ol></ol>     控制有顺序的列表,默认换行(order list)单独用无效果,必须和li元素合用

<ul></ul>     控制无序列的列表,默认换行          单独用无效果,必须和li元素合用

<li></li>        清单   可单独用  默认换行(有行距)

Ol元素和ul元素的属性为type=“”即清单前面按符号或数字等元素分别

延伸:

在上网时,如果不想显示某一块区域,停留在某一块区域后右键,点击审查元素。把鼠标放在某一元素上,如果网页的内容被一层蓝色覆盖,选中此区域,删除,此块区域不在显示,刷新后再次显示出来。

常见标签:

1.超链接:

<a href=http://www.mamicode.com/”超链接指向的网页(也是路径)” > 链接的文字内容 超链接

超链接的内容在网页中显示默认有下划线,href是hyper reference的缩写,(reference引用)

Href 的另一个属性:显示方式

Target=”_blank”  在另一个界面 打开新的网页

Target=”_self”   覆盖在本网页 打开新的网页

 

2.图片:

<img src=http://www.mamicode.com/”图片路径” /> 图片(单标签)src是source(来源)的缩写

图片的名称一般用英文,不要带汉字,汉字容易出现乱码。

图片的属性:

Width=””宽度大小  Height=””高度大小 

图片大小并没有改变 宽度和高度设置其中一个即按比例缩放显示

Alt=””替代文字  为了帮助搜索引擎识别图片    将鼠标放在网页上的图片时,会显示替代文字,如果将源图片文件路径修改或删除后,会出现方框和叉号还有替代文字。

 

3.表格:

<table></table>   表格标签

<tr></tr>         行标签

<td></td>        单元格标签

Table 的属性:

      width宽度 两种计算方式:像素大小     百分比

      border边框粗细大小   像素

      cellpadding边距(内容与边界线的距离)

      cellspacing间距

      align对齐方式(整个表格在界面的对齐方式)

      bgcolor背景色

      hight表格高度一般用不到,高度都是由内容撑起来的才有意义

tr的属性:

      align对齐方式(表格中内容的水平对齐方式)

      valign对齐方式(表格中内容的竖直对齐方式)

      bgcolor背景色

      hight行高

td的属性:

      <th></th> 单元格标签,自动加粗,一般为表头

      align对齐方式(单元格中内容的水平对齐方式)

      valign对齐方式(单元格中内容的竖直对齐方式)

      bgcolor背景色

      hight 一般在头列

      width一般在头列

表单元素:

1.文本类:

2.按钮类:

3.选择输入类:

框架集:

HTML基础