1.1 HTML基础知识点

一、HTML是什么？

Hyper Text Markup Language 超文本标记语言 的缩写
开发一个html文件，可以有很多方式 ：比如Dreamweaver,HBuilder等等专业工具。 最简单的方式就是用记事本写一个
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

二、中文乱码问题

对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

三、基础结构

  1. <!DOCTYPE html> 声明为 HTML5 文档
  2. <html> 元素是 HTML 页面的根元素
  3. <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
  4. <title> 元素描述了文档的标题
  5. <body> 元素包含了可见的页面内容
  6. <h1> 元素定义一个大标题
  7. <p> 元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>页面标题</title>

</head>

<body>

    <h1>行标题</h1>

    <p>段落。</p>

</body>

</html>

四、常用标签

  1. HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.（由大变小）
  2. HTML 段落是通过标签 <p> 来定义的.（会自动换行）
  3. <b> <strong> 都可以用来实现粗体的效果
  4. <i>和<em>都可以表示斜体效果
  5. HTML 链接是通过标签 <a> 来定义的.
  6. HTML 图像是通过标签 <img> 来定义的.
  7. <hr> 标签在 HTML 页面中创建水平线。
  8. 注释：<!-- 这是一个注释 -->
  9. 预格式<pre></pre>保留原有的格式
  10. 删除标签<del>使用del标签实现的删除效果</del>
  11. <ins>即下划线标签</ins>

五、标签的格局

  1. <img> 即图像标签 ,需要设置其属性 src指定图像的,路径src直接使用文件名，不需要/(绝对路径、相对路径)，可用width="200" height="200"描述大小。用块确定相应位置
<div align="left">

  <img src="example.gif"/>

</div>

<div align="center">

  <img src="example.gif"/>

</div>

<div align="right">

  <img src="example.gif"/>

</div>

alt图片的默认文字，图片不存在的时候，alt就会出现

　　2.超链接<a href="跳转到的页面地址">超链显示文本</a>属性target点击变色

　　当鼠标放在超链上的时候，就会弹出提示文字。title="跳转到http://www.12306.com"

　　使用图片也可以超级链接</a href="www.baidu.com"><img src="1.jsp"></a>

　　3、表格，border表示边框<table border="1">

　　tr(table row)表示行，所有3个tr元素

　　td(table data)表示列，每一行，有2列，所以每一个tr元素里，有2个td元素

　　比如你的分辨率是1024X768,则你的屏幕横向就有1024个像素，width可以填像素和百分比。

<table border="1" width="200px">

  <tr>

      <td width="50%" align="left">1</td>

      <td>2</td>

  </tr>

  <tr>

      <td align="center">3</td>

      <td>4</td>

  </tr>

  <tr>

      <td align="right">a</td>

      <td>b</td>

  </tr>

</table>

设置td的属性valign；valign="top"、"middle"、"bottom"

设置td的属性colspan（行合并）、设置td的属性rowspan（列合并）

同时：设置tr或者td的属性bgcolor背景色。

　　4、列表

　　列表分无序列表和有序列表

　　分别用<ul>标签和<ol>标签表示

六、HTML的块div和span

div是块元素，即自动换行 ，常见的块元素还有h1,table,p

span是内联元素，即不会换行 ，常见的内联元素还有img,a,b,strong

这两种标签都是布局用的 这种标签本身没有任何显示效果 ，通常是用来结合css进行页面布局

<div align="left">
  <img src="http://how2j.cn/example.gif"/>
</div>
 
<div align="center">
  <img src="http://how2j.cn/example.gif"/>
</div>
 
<div align="right">
  <img src="http://how2j.cn/example.gif"/>
</div>

8.1 HTML基础知识点的更多相关文章

  1. fastclick 源码注解及一些基础知识点

    在移动端,网页上的点击穿透问题导致了非常糟糕的用户体验.那么该如何解决这个问题呢? 问题产生的原因 移动端浏览器的点击事件存在300ms的延迟执行,这个延迟是由于移动端需要通过在这个时间段用户是否两次 ...

  2. .NET基础知识点

    .NET基础知识点   l  .Net平台  .Net FrameWork框架   l  .Net FrameWork框架提供了一个稳定的运行环境,:来保障我们.Net平台正常的运转   l  两种交 ...

  3. JavaScript 开发者经常忽略或误用的七个基础知识点(转)

    JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...

  4. JavaScript 开发者经常忽略或误用的七个基础知识点

    JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...

  5. JavaScript开发者常忽略或误用的七个基础知识点

    JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...

  6. JavaScript语言基础知识点图示（转）

    一位牛人归纳的JavaScript 语言基础知识点图示. 1.JavaScript 数据类型 2.JavaScript 变量 3.Javascript 运算符 4.JavaScript 数组 5.Ja ...

  7. JavaScript 语言基础知识点总结

    网上找到的一份JavaScript 语言基础知识点总结,还不错,挺全面的. (来自:http://t.cn/zjbXMmi @刘巍峰 分享 )  

  8. c语言学习之基础知识点介绍（三）：scanf函数

    本节继续介绍c语言的基础知识点. scanf函数:用来接收用户输入的数据. 语法:scanf("格式化控制符",地址列表); 取地址要用到取地址符:&(shift+7) 例 ...

  9. c语言学习之基础知识点介绍（二）：格式化控制符和变量的补充

    上节简单介绍了c语言中的一些基础知识点,本节将对之前介绍的不够详细的知识点进行补充. 格式化控制符的消息介绍: %d的其他控制符: 1.%md:m代表这个整数位占用多少位,m是一个整数.实际数字不足的 ...

  10. (转)JavaScript 开发者经常忽略或误用的七个基础知识点

    英文原文:7 JavaScript Basics Many Developers Aren't Using (Properly) JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和 ...

随机推荐

  1. visual studio2015 搭建pro*c开发编译环境

    关于pro*c是什么,这里不做介绍,主要说明如何在vs2015里面开发pro*c程序,并编译exe执行文件 一.vs2015环境配置 1.新建一个空的vc++项目,如下图 2.右击项目属性,添加相关的 ...

  2. OSCP-Kioptrix2014-1 环境搭建

    环境搭建 该系列文章参考 : https://www.youtube.com/watch?v=bWM0BCQ5q1o&list=PL9WW-prbqvGzHsGK_OqTyYWbCZjucpI ...

  3. 理解Cookie和Session的区别及使用

    资料一: Cookie和Session的区别 共同之处: cookie和session都是用来跟踪浏览器用户身份的绘画方式. 区别: cookie数据保存在客户端,session数据保存在服务端. s ...

  4. JavaJDBC【七、JDBC升级版简介】

    Commons-dbutils Apache提供的一个开源JDBC工具类库,对传统操作数据库的类进行二次封装,可以把结果集转换成List. 特点: 1.杜绝资源泄漏 2.简化代码 3.以Bean实例形 ...

  5. 【0】Zookeeper Q&A

    1.Observer角色如何配置? Zookeeper集群中的中的Leader和Follower角色是由服务器启动时期的Leader选举产生的,Observer不参与选举,此角色的节点需要在配置文件z ...

  6. [转] - Linux中使用alternatives切换Jdk版本

    1. 准备JDK包,分别是1.7和1.8,jdk-7u79-linux-x64.tar.gz和jdk-8u161-linux-x64.gz: 2. 解压,解压后的目录结构如图所示: JDK1.7: J ...

  7. 十四，K8s集群网络flannel及canal策略

    目录 k8s网络CNI之flannel k8s网络通信模型 常见CNI插件(Container,Network,Interface) 插件通信一般的解决方案 网络插件的应用 Flannel插件 fla ...

  8. python面向编程：阶段练习

    1.所有程序都因该使用面向对象来设计吗?为什么? 不是,面向对象编程优点是扩展性高,对程序员来说不需要关心具体的步骤,只需要调用对象功能,缺点是:程序的复杂度变高,整体的可控性比较低! 2.什么是对象 ...

  9. 3.NIO_Buffer缓冲区

    1.缓冲区(Buffer) 一个用于特定基本数据类型的容器.由 java.nio 包定义的,所有缓冲区都是 Buffer 抽象类的子类,任何时候访问 NIO 中 的数据,都是通过缓冲区进行操作 在 J ...

  10. php is_numeric函数可绕过产生SQL注入

    老老实实mysql_real_escape_string()防作死......is_numeric的SQL利用条件虽然有点苛刻,但还是少用的好= = 某CTF中亦有实测案例,请戳 http://dro ...