HTML基础
软件体系结构: C/S 客户端/服务器 (如QQ,需要安装)
B/S 浏览器/服务器 (如 网页)
PHP 属于 B/S结构 .工作 :给予PHP的WEB开发.
B/S结构软件的优劣势:
-维护和升级方式简单
-成本降低,选择更多
-应用服务器,运行数据负荷较重
一、1、什么是HTML: 超文本标记语言,是由标签和内容(标签和节点)构成的。
2、HTML5文档的注释: <!--注释内容-->
3、HTML标签: 由“<” “>” 括起来。
双标签(成对):<标签名>······</标签名>
单标签(不成对):<标签名/>
推荐小写
4、HTML标签的组成部分: 属性、实体
属性是由属性名和值同时出现: <标签名 属性名1=“值” 属性名2=“值”··· 属性名N=“值”> </标签名>
HTML实体 "<" : <
">" : >
"空格" :
"引号" : "
"&" : &
5、HTML 文件的主体结构
1 <!DOCTYPE html> <!--类型说明,DOCTYPE声明必须放在每一个HTML文档最顶部,在所有代码和标识之上。-->
2 <html>
3 <head> <!--页面设置-->
4 <meta content="text/html; charset=utf-8" /> <!--格式中也要选择utf-8-->
5 <title>标题<title/>
6 <link type="text/css" rel=stylesheet href="**.css" /> <!--连接引入css文件-->
7 <script type="text/javascript" src="**.js"></script > <!--连接引入js文件-->
8 </head>
9 <body></body> <!--页面主体,浏览器显示-->
10 </html>
或者css样式和js全部写在页面里
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta content="text/html; charset=utf-8" />
5 <title>标题<title/>
6 <style type="text/css">写入本页的css样式</style>
7 <script type="text/javascrpt">写入本页的js样式,js文件也可写在body中</script>
8 </head>
9 <body></body>
10 </html>
6.HTML中的颜色:① 颜色单词:如:red 、blue、black
②六位十六进制 #000000——#FFFFFF(画图中,可提取或者ColorSpy的屏幕取色工具) 前两位是红色 中间是绿色 后两位是蓝色
如:白色为#FFFFFF(可缩写为#FFF)、红色为#000
二、HTML中的文本标签,格式化标签
1、文本标签
* ① <br/> 换行
* ② <p>···</p> 换段
③ <i>···</i> 斜体
* ④ <em>···</em> 强调斜体
⑤ <b>···</b> 加粗
* ⑥ <strong>···</strong> 强调加粗
⑦ <hn>···</hn> 其中n为1-6的值,标题标签(加粗,独立行)
⑧ <cite>···</cite> 引用
⑨ <sub>···</sub> 下标
⑩ <sup>···</sup> 上标
* ⑪ <del>···</del> 删除线
⑫ <bdo>···</bdo> 文本方向 例:<bdo dir="rtl">···</bdo> 或者 <bdo dir="ltr">···</bdo>
⑬ <abbr>···</abbr> 缩写
⑭ <details>···</details> 元素细节
⑮ <summqry>···</summqry> 包含details元素的标题
1 例:
2 <details>
3 <summary>HTML 5</summary>
4 This document teaches you everything you have to learn about HTML 5.5 </details>
<!-- 结果是:HTML 5 This document teaches you everything you have to learn about HTML 5.-->
⑯ <time>···</time> 时间
⑰ <dialog>···</dialog> 对话
⑱ <pre> 保留文字在源代码中的格式
2、格式化标签
* ① <br/> 换行
* ② <p>···</p> 换段
* ③ <hr/> 水平线
④ <font>···</font> 字体
例:<font size="5" face="arial" color="red">A paragraph.</font>
3、列表
* ① <ul> 无序列表 例:<ul type="square"
> </ul> type类型值:discsquare circle
② <ol> 有序列表 例:<ol type="I"
> </ol> type类型值:A a i I 1
<ol start="5"
></ol> 起始值
* ③ <li> 列表项
④ <dl> 自定义列表
<dt>···</dt> 标题
<dd>···</dd> 内容
三、* HTML中的超级链接
属性:href target title
* <a href=""></a> 超级链接标签
* target: 表示打开方式
_blank 新窗口
_self 本窗口(默认)
_parent 父窗口
_top 顶级窗口
framename 窗口名
title:文字提示属性
锚点链接:
定义一个锚点: <a id="a1">内容</a> (以前使用 <a name="a1">)
使用锚点: <a href="#a1">跳转到a1处</a>
四、图片标签<img>
* <img/> 插入一张图片
属性:* src: 图片名以及URL地址
* alt:图片加载失败时才显示的提示信息、鼠标放在图片上提示的字、搜索引擎可以搜到图片
title:文字提示属性
width:宽度
height:长度
border:边框线粗细
<a href="·····"><img src="·····" /></a>点击图片链接到别的页面
五、多媒体标签(HTML 5标签)
<audio>声音 <video>视频 <source>媒介资源 <embed src=" ">嵌入的内容
<map> 客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。注释:<area>永远嵌套在 <map>内部,<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性
例:
1 <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
2
3 <map name="planetmap" id="planetmap">
4 <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /> <!--alt:替换文本,coords:坐标值,shape:定义区域的形状(圆形,多边形,矩形)-->
5 <area shape="poly" coords="129,161,10" href ="mercur.html" alt="Mercury" />
6 <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
7 </map>
六、* 表格标签
<table>表格 <caption>标题 <th>表头标签 <tr>行标签 <td>列标签 <thead>表头 <tbody>表体 <tfoot>表尾
cellspacing 单元格之间的空间,默认为2px
cellpadding 文字与单元格之间的距离
<td>{colspan 横跨列数
{rowspan 横跨行数
{align 水平方向
{valign 垂直方向——{top middle bottom
col :为表格中的一个或多个列定义属性值(不常用)
colgroup:定义表格列的组,对列进行组合(不常用)
1 <table border="1">
2 <caption>people</caption>
3 <tr>
4 <th>name</th>
5 <th>age</th>
6 <th>sex</th>
7 </tr>
8 <tr>
9 <td>Tom</td>
10 <td>20</td>
11 <td>boy</td>
12 </tr>
13 </table>
七、form 表单标签
1、<form> 表单
属性:* action:提交的目标地址(URL)
* method:提交方式:get(默认) 和 post
get 方式地址栏可见 长度受限制(IE 2K,火狐8k) 不安全
post 方式 地址栏 不可见 长度不受限制 相对安全
enctype:提交类型
target: 在何处打开
name:为表单起个名字,HTML5不支持,用 id 代替
2、<input> 表单项中的属性
* name : 表单项名,用于存储内容值的。
* value: 输入的值
size: 输入框宽度值
maxlength:输入框 输入内容的最大长度
readonly:只读
* display:禁用
* checked:对选择框指定默认选项
accesskey:快捷键(IE:alt+键 火狐:alt+shift+键)
tabindex:通过数字指定tab键的切换顺序
* type:表示表单的类型,值如下:
text 单行文本框
Email: <input type="text" name="email" />
posswird 密码输入框,密码字段中的字符会被掩码(显示为星号或原点)
<input type="password" name="pwd" />
checkbox 多选框 ,输入value值
<input type="checkbox" name="shu[]" value="one" /> one
<input type="checkbox" name="shu[]" value="two" /> two
radio 单选框 ,输入value值
<input type="radio" name="sex" value="boy" /> boy
<input type="radio" name="sex" value="girl" checked="checked"
/> girl
file 文件上传选择框
<input type="file" />
button 普通按钮,但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。
<input type="button" value="Click me" onclick="msg()" />
submit 提交按钮
1 <form action="form_action.html" method="get">
2 Email: <input type="text" name="email" />
3 <input type="submit" />
4 </form>
image 图片提交按钮,必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用,默认具有提交功能。
<input type="image" src="submit.gif" alt="Submit" />
reset 重置按钮,返回第一次打开的时候
<input type="reset" />
hidden 主表单隐藏域,要喝表单一起提交的信息,但是不需要用户修改
<input type="hidden" name="id" value="1" />
3、<select> 标签创建下拉列表
* name:名称
size:定义菜单中可见项目的数目(html5不支持),出现滚动条
multiple:多选
* <option>:下拉选项标签,用于嵌入在<select>中使用
value:下拉选项的值
selected:默认下拉选项值
disabled:当该属性为true时,会禁用该项目
1 <select name="cars" multiple="multiple" size="2">
2 <option value="volvo">Volvo</option>
3 <option value="saab" >Saab</option>
4 <option value="fiat" selected>Fiat</option>
5 <option value="audi" disabled="true">Audi</option>
6 </select>
4、<textarea>多行文本域
* name:名称
* cols:规定文本区内可见的列数
* rows:规定文本区内可见的行数
disabled:是否禁用
readonly:只读
5、<button> 按钮
可放置内容,比如文档或图像
初次学习的HTML基础,做的笔记~~勿喷~~
如果您觉得本文对你有用,不妨帮忙点个赞,或者在评论里给我一句赞美,小小成就都是今后继续为大家编写优质文章的动力,小九妹拜谢! 欢迎您持续关注我的博客:)
作者:小九妹
出处: http://www.cnblogs.com/jiumei/
版权所有,欢迎保留原文链接进行转载:)