文档的编辑

选择文档---->修改文档后缀名（.thml）--->用浏览器打开(解释和执行HTML源代码的工具)

　　浏览器主要分类及内核

火狐（Firefor）--->Gecho

IE（Internet Explore）---->Trident

谷歌（Chrome）--->Webkit

苹果（Safari）---->Webkit

欧朋（Opera）----->Presto/Blink

主要用来渲染html,CSS渲染引擎，解析引擎

　　HTML文档结构

<html>---html标签的起始标签

    <head>

       <title>标题</title>

    </head>

       <body>

            这是我们的主战场

      </body>

</html>---html标签的结束标签

　　标签（标记）的语法：

HTML标签的分类：双标签、单标签

双标签：<tag 属性1='属性值1' 属性2='属性值2'></tag>

单标签：<tag 属性1='属性值1' 属性2='属性值2'/>

tag泛指所有标签的名称

 编辑html标签的注意事项：

1 必须要符合基本语法

2 必须要定义文档类型

      <!DOCTYPE html>:告诉浏览器这是一个html文档，方便浏览器渲染html

　　　　document：文档

　　　　type：类型

3 必须要定义文档的字符编码

　　gb123:中文简体编码

　　gbk：中文编码

　　utf-8：国际编码

　　<meta http-equiv='content-type' content='text/html;charset=utf-8'/>

　　把content关联到http头部，告诉浏览器准备接受一个html文档，并以utf-8的字符编码来进行解析

　　<meta name='description' content='描述信息'/>

　　<meta name='keywords' content='关键字'/>

　　方便浏览器的搜索引擎搜索相关网站

　　meta标签要放在head标签里面

4 文档类型编码必须和网页字符编码一致，如果用记事本，另存为设置编码

5 必须要符合代码风格---层层缩进

6 所有标签都必须为英文小写，属性与属性之间用一个空格分开，属性与属性值用等号连接，属性值用英文的单/双引号包住

---------------------------------------------------------------

　

1 <body></body>标签

body标签的常用属性：

text='颜色'

颜色的表示方法：

a 英文单词：(三原色---rgb）r:red g:green b:blue

yellow pink white black....

b 十六进制：

red:#ff0000

green:#00ff00

blue:#0000ff

bgcolor='颜色'---表示body标签的背景色

background='图片路径'---表示背景图片

图片：.jpg .png(透明图片) .gif(动态图)。。。

路径---

绝对路径：相对于磁盘的路径，物理路径

相对路径：在同一文件夹下面html文档找图片的位置

同级关系：直接引用文件名

上一级关系：../图片名

下一级关系：文件夹名/图片名

---------------------------------------------------------------

2 文本格式标签

<br/>:换行标签

特殊字符标签：

&nbsp;---空格

&lt;---<

&gt;--->

&quot;---"

&copy;---版权号

电脑的单位：

基本单位：字节（b）

一个字符占一个字节，一个汉字占两个字节

最小单位：位（bit）

1b=8bit;

lkb(千字节)=1024b

1M(兆)=1024kb

标题标签:<hn></hn>---n:1---6

特点：

a 双标签

b 字体加粗

c 自动换行

d 1-6逐级减小

段落标签：<p></p>

p标签的属性：

align="center/left/right":水平对齐方式

预编译标签：<pre></pre>

特点：原样输出，自动换行

水平分割线：<hr/>

属性：

color="颜色"

size="粗细"

width="宽度"

align="center/left/right"

文本居中：<center></center>

---------------------------------------------------------------
3 字符格式标签

<b></b>:字体加粗

<i></i>:文本倾斜

<u></u>:下划线

<s></s>:删除线

<sub></sub>:下标

<sup></sup>:上标

<small></small>:字体变小

<font></font>:字体标签

属性：

size="12px"

color="颜色"

face="字体"

所有的字符格式标签都不换行，并且都是双标签

所有的字符格式标签最好都放在文本格式标签里面

<img/>:图片标签

属性：

src='路径'

width="50px/50%"

height="50px/50%"

border="2px"

title="提示信息"---当鼠标放上去的时候，就显示title所对应的属性值

alt="提示信息"---当图片在浏览器上显示不出来的时候，就会显示alt所对应的属性值

HTML注释：<!--注释的内容-->

a 屏蔽掉HTML代码（不在浏览器中显示）

b 标注注释

---------------------------------------------------------------
 表格标签：

<table>

<tr>

<td>内容</td>

</tr>

</table>

tr:代表的是表格的行标签

td:代表的是表格的列标签

table的属性：

border="2px":边框粗细

bordercolor="颜色"：表框颜色

width="500px":表格的宽度

height="500px":表格的高度

bgcolor="颜色":表格的背景颜色

background="路径":表格的背景图

align="left/right/center":表格水平对齐方式

cellspacing="5px":单元格与单元格之间的间距

cellpadding="5px"：内容与单元格边框的距离

tr的属性：

height:行的高度

bgcolor="颜色":行的背景颜色

background="路径":行的背景图

align="left/right/center":当前行的水平对齐方式

valign="top/middle/bottom":垂直方向对齐方式

td的属性：

width:单元格的宽度

height:单元格的高度

bgcolor="颜色":单元格的背景颜色

align="left/right/center":单元格的水平对齐方式

valign="top/middle/bottom":单元格的垂直方向对齐方式

rowspan="5":合并行

colspan="5":合并列

<table>

<thead><tr><th></th></tr></thead>

<tbody><tr><td></td></tr><tbody>

</table>

thead:表格表头

th:文字自动加粗，文字自动居中

如果没有表头的话：

<table>

<tr><td>内容</td></tr>

</table>

---------------------------------------------------------------

5 列表标签

(1) 有序列表

<ol><li></li></ol>

ol标签的属性：

type="1/a/A/i/I",默认为数字排序

start="10",表示从第十项开始，并且只能是数字

(2)无序列表

<ul><li></li></ul>

ul标签的属性:

type="square(方块)/disc(实心圆)/circle(空心圆)"，默认为实心圆

(3)语义列表

<dl>

<dt>标题部分</dt>

<dd>内容</dd>

</dl>

---------------------------------------------------------------

6 超链接标签(a标签)

<a href="http://www.baidu.com">百度一下</a>

a标签的属性：

href="路径"

http:超文本传输协议，是客户端和服务端请求和应答的标准

http/https---https加密的

www:world wide web(万维网、环球网)，简称web

w3c:万维网联盟

w3school:万维网联盟的中国社区

万维网联盟的创始人：蒂姆.伯纳斯.李（互联网之父）

a、外部链接：

<a href="http://www.baidu.com">百度一下</a>

b、内部链接：

<a href="项目的相对路径">百度一下</a>

//跳转到本地项目的某个页面

c、建立锚点：通过锚点可以找到相对标签的位置

<a href="#pig">找猪头</a>

<p id="pig">猪头</p>

//pig叫锚点值(hash值)，锚点值必须要与你要找的标签的id名要一致

<a href="相对路径#pig" target="_blank">找猪头2</a>

//可以找到本地项目的某个页面的标签

d、通过href可以做功能性链接：邮箱、qq链接

<a href="mailto:hehedaWebMail@nbsp.com">站长邮箱</a>

target="_self/_blank"

_self:在自身窗口打开

_blank：在新窗口打开

Html----编写的更多相关文章

  1. Angular2入门系列教程2-项目初体验-编写自己的第一个组件

    上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着 ...

  2. 从零开始编写自己的C#框架（28）——建模、架构与框架

    文章写到这里,我一直在犹豫是继续写针对中小型框架的设计还是写些框架设计上的进阶方面的内容?对于中小型系统来说,只要将前面的内容进行一下细化,写上二三十章具体开发上的细节,来说明这个通用框架怎么开发的就 ...

  3. 从零开始编写自己的C#框架（27）——什么是开发框架

    前言 做为一个程序员,在开发的过程中会发现,有框架同无框架,做起事来是完全不同的概念,关系到开发的效率.程序的健壮.性能.团队协作.后续功能维护.扩展......等方方面面的事情.很多朋友在学习搭建自 ...

  4. 从零开始编写自己的C#框架（26）——小结

    一直想写个总结,不过实在太忙了,所以一直拖啊拖啊,拖到现在,不过也好,有了这段时间的沉淀,发现自己又有了小小的进步.哈哈...... 原想框架开发的相关开发步骤.文档.代码.功能.部署等都简单的讲过了 ...

  5. 从零开始编写自己的C#框架（25）——网站部署

    导航 1.关掉访问保护 2.发布网站 3.复制网站到服务器 4.添加新网站 5.设置网站访问权限 6.设置文件夹访问权限 7.控制可更新文件夹执行权限 8.设置“应用程序池”.net版本与模式 9.附 ...

  6. 从零开始编写自己的C#框架（24）——测试

    导航 1.前言 2.不堪回首的开发往事 3.测试推动开发的成长——将Bug消灭在自测中 4.关于软件测试 5.制定测试计划 6.编写测试用例 7.执行测试用例 8.发现并提交Bug 9.开发人员修复B ...

  7. TypeScript为Zepto编写LazyLoad插件

    平时项目中使用的全部是jQuery框架,但是对于做webapp来说jQuery太过于庞大,当然你可以选择jQuery 2.*针对移动端的版本. 这里我采用移动端使用率比较多的zepto框架,他跟jqu ...

  8. 使用NUnit为游戏项目编写高质量单元测试的思考

    0x00 单元测试Pro & Con 最近尝试在我参与的游戏项目中引入TDD(测试驱动开发)的开发模式,因此单元测试便变得十分必要.这篇博客就来聊一聊这段时间的感悟和想法.由于游戏开发和传统软 ...

  9. 编写自己的PHP MVC框架笔记

    1.MVC MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller). ...

  10. 编写高质量代码:改善Java程序的151个建议(第8章:多线程和并发___建议126~128)

    建议126:适时选择不同的线程池来实现 Java的线程池实现从根本上来说只有两个:ThreadPoolExecutor类和ScheduledThreadPoolExecutor类,这两个类还是父子关系 ...

随机推荐

  1. 让MySql支持表情符号（MySQL中4字节utf8字符保存方法）

    UTF-8编码有可能是两个.三个.四个字节.Emoji表情是4个字节,而MySQL的utf8编码最多3个字节,所以数据插不进去. 解决方案:将编码从utf8转换成utf8mb4. 1. 修改my.in ...

  2. swagger常用注解

    @Api:修饰整个类,描述Controller的作用 @ApiOperation:描述一个类的一个方法,或者说一个接口 @ApiParam:单个参数描述 @ApiModel:用对象来接收参数 @Api ...

  3. jquery 弹框，确定、取消

    function del(id, url) { var bool = confirm("确定删除?") if (bool) { //点击确定后操作 var Urls = " ...

  4. android TextView 例子代码（文字中划线、文字下划线）

    XML: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android ...

  5. redis 连接超时。。

    在虚拟机安装后.在项目中加入redis 想测试一下功能 然后在物理机死活连不上. 1.用物理机ping 虚拟机的IP 通.... 2.然后.把redis.conf 里面bind 0.0.0.0 依然没 ...

  6. Javascript学习笔记5 - 滑动Slides

    开始之前:http://docs.jquery.com/ 是jQuery文档的网站, https://jsfiddle.net/是js的在线验证工具 在html中,有这几个标签: javascript ...

  7. iframe之间通信问题及iframe自适应高度问题

    下面本人来谈谈iframe之间通信问题及iframe自适应高度问题. 1. iframe通信 分为:同域通信 和 跨域通信.所谓同域通信是指 http://localhost/demo/iframe/ ...

  8. 1. easyui tree 初始化的两种方式

    /** * 查询角色分类 */function queryRoleCategoryTree(selectId) { var url = basePath + 'rest/roleCategoryCon ...

  9. HTML5 Canvas 小例子 简易画板

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. 01.VMware虚拟机上网络连接（network type）的三种模式--bridged、host-only、NAT

    VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转换模式)和host-only(主机模式).要想在网络管理和维护中合理应用它们,你就应该先了解一下这三种工作模式. 1 ...