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实体  "<" : &lt

　　　　　　　　 　">" : &gt

 　　　　　　　　   "空格" : &nbsp;

　　　　　　　   　 "引号" : &quot

　　　　　　　　    "&" : &amp　　

　　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基础，做的笔记~~勿喷~~

 

posted @ 2017-06-08 11:15  盛夏天微凉  阅读(140)  评论(0)  编辑  收藏  举报