首页 > 编程札记 > 编程

零基础html入门（1）

阅读：评论：0

零基础html入门（1）

计算机

分为硬件和软件。

硬件：电脑、手机。
软件：C/S开发：C#、C++、C 等。
B/S开发：Java、PHP、Python，等等。
软件测试：测试软件。
网络：维护等。

1.html简介

超文本标记语言

后缀名：xxx.html/xxx.htm

写网页的编辑器：DW、txt、Hbuilder、等等。

调试网页的方法：浏览器调试：

谷歌、火狐、IE、欧朋、safari浏览器

2.html基本结构

<html> <head><title></title></head><body></body>
</html>

插：
< meta charset=“utf-8” />：

设置页面的编码方式：UTF-8/GBK

< meta http-equiv=“refresh” content=“3;url=”/ >
设置页面3秒刷新，并且跳转至某个网站

3.网页

网页分为静态页面和动态页面

（1）静态网页：静态网页也称为普通网页，是相对网页而言的。静态网页不是指网页中的元素都是静止不动的，而是指网页文件中没有程序代码，只有 HTML（超文本标记语言）标记，一般后缀为.htm、.html、.shtml 或.xml 等。

（2）动态网页：动态网页是指在网页文件中除了 HTML 标记以外，还包括一些实现特定功能的程序代码，这些程序代码使得浏览器与服务器之间可以进行交互，即服务器端可以根据客户端的不同请求动态产生网页内容。动态网页的后缀名通常根据所用的程序设计语言的不同而不同，一般为.asp、.aspx、cgi、.php、.perl、.jsp 等。

4.Html 标题、段落、换行与字符实体

（1）标题标签：<h1>——<h6>

（2）段落标签：

（3）强制换行符： 

（4）预先格式化标签：

< pre >

      基本标签学习基本标签学习基本标签学习基本标签学习

< /pre >

（5）字符格式化标签：
加粗： 
倾斜： 
下划线： <ins></ins>
删除线：<s></s> <del></del>
上标：32=9
下标：O2

（6）字体标签：
常用属性：
color（设置字体的颜色）
size（设置字体的大小），参数：1-7
face（设置字体样式）

（7）特殊字符： ©®

（8）水平线标签：<hr>

<hr width="50%" align="left" size="10px" color="red" />

常用属性： width（设置水平线的宽度）
Size（设置水平线的高度、厚度）
Color（设置水平线的颜色）
Align（设置水平线的对齐方式）
Noshade（设置水平线的阴影）

5.html图像、绝对路径和相对路径
路径：

URL：统一资源定位符（简称：“路径”）。

（1）图像标签：（<h6>）和源属性src。例如：<img src="url "/>

                      （alt源属性）在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。（title源属性）鼠标经过图片时的提示文字

（2）绝对路径：绝对路径是指文件在硬盘上真正存在的路径。例如：<body backround="E:book网页布局代码bg.jpg">
相对路径：相对路径，就是相对于自己的目标文件位置。
1**、先理清楚对应的文件位置关系**
2**、遇到同一级直接写对方文件的名字**
…/…/index.html
…/:表示从当前位置向父级退一级
/：表示从当前位置向子集前进一级

6.超链接标签：

<a href="index.html" target="_self">点击看看</a>

常用属性：href（链接网页的路径）
target（设置网页打开的方式《当前页面或者新页面》）
target属性值：
_self：默认方式，即在当前窗口打开链接
_blank：在一个全新的空白窗口中打开链接

7.列表标签：
（1）有序列表：

 <ol type="A" start="26"><li>星期日</li><li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li><li>星期六</li></ol>

常用属性：type（设置有序列表排序的类型）；参数（1、a、A、i、I）
Start**（设置排序的开始位置，参数只能是数字，表示从第XX位开始排序）

（2）无序列表：

<ul type="square"><li>星期日</li><li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li><li>星期六</li></ul>

常用属性：type（设置无序列表样式）参数（square->实心方块、disc->实心圆《默认值》、circle->空心圆）

（3）自定义列表：

<dl><dt>蔬菜</dt><dd> ?</dd><dd>?</dd><dd>青菜</dd><dt>水果</dt><dd>?</dd><dd>?</dd><dd>?</dd></dl>

8.表格标签：
…

<table><caption></caption><tr><th></th><th></th><th></th></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr>

…
标签含义：
table->表示表格
tr->表示行
td->表示单元格
th->单元格标题（表头）
caption->表格标题
表格常用属性：
border：设置表格的边框线
align：设置表格的对齐方式
width：设置表格、单元格的宽度
height：设置表格、单元格的高度
bgcolor：设置背景颜色
cellpadding：设置单元格的内容与单元格边框之间的距离
cellspacing：设置单元格与表格边框之间的距离

列合并案例：

        <table border="1px" width="80%" align="center"><caption>列合并（colspan）</caption><tr><td colspan="2">1</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td colspan="3">7</td></tr></table>

行合并案例：

       <table border="1px" width="80%" align="center"><caption>行合并（rowspan）</caption><tr><td rowspan="2">1</td><td>2</td><td rowspan="3">3</td></tr><tr><td>4</td></tr><tr><td>7</td><td>8</td></tr></table>

9.HTML框架技术——frameset
（1）先删除页面中的body标签：

<frameset rows="14%,*" border="1px" bordercolor="green"  frameborder="0"><frame src="F_01.html" noresize="noresize"  /><frameset cols="30%,70%"><frame src="F_02.html" noresize="noresize" /><frame src="F_03.html" name="shouye" /></frameset><noframes><body>您的浏览器不支持框架</body></noframes></frameset>

常用属性：border：框架边框线
bordercolor：设置边框颜色
noresize：禁止用户调整框架页面布局
frameborder：删除框架的边框线（参数：0/no、1/yes）

（2）内嵌框架：iframe

内嵌框架可以写在body中：
<table width="70%" align="center" border="1px"><tr><td><a href="F_01.html" target="aaa">正在进行</a></td><td><a href="F_02.html" target="aaa">商城特惠</a></td><td><a href="F_03.html" target="aaa">长期活动</a></td></tr><tr><td colspan="3"><iframe width="100%" height="300px" name="aaa" frameborder="0"></iframe></td></tr></table>常用属性：width：设置内嵌框架的宽度height：设置内嵌框架的高度frameborder：删除框架的边框线（参数：0/no、1/yes）

10.表单元素——form表单
（1）写在input标签外的有两种
下拉菜单
文本域

（2）写在input标签内的有十种
A.4种XXX框
文本框type=“text”
密码框type=“password”
单选框type=“radio”
复选框type=“checkbox”

B.3种域
文件域type=“file”
图片域type=“image”
隐藏域type=“hidden”

C.3种按钮
type=“button”（普通按钮）
type=“submit”（登录、注册）
type=“reset”（重置）

（1）三原色 rgb（red green blue）
#000 黑色
#FFF 白色
#999 灰色
#F00 红色
#0F0 绿色
#00F 蓝色
#FF0 黄色
#F0F 紫色
#0FF 青色
（2）十六进制
0 1 2 3 4 5 6 7 8 9 A B C D E F