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. DPI，像素，英寸的关系

    DPI * 英寸 = 像素 eg:在150dpi打印 (2 x 4)英寸的照片 等到多少像素的图像 (150*2)x (150*4) =300 x 600像素 同理可得  已知像素.英寸大小 求DPI ...

  2. warning LNK4076: 无效的增量状态文件“../×××.ilk”;正在非增量链接

      VS编译警告:warning LNK4076: 无效的增量状态文件“../×××.ilk”;正在非增量链接 解决方法:删除程序提示的输出目录的×××.ilk,重新编译,即可

  3. O064、NFS Volume Provider（Part III）

    参考https://www.cnblogs.com/CloudMan6/p/5702199.html   今天我们将前一小节中创建的 nfs-vol-xx attach 到Instance c1 上, ...

  4. vue项目使用openlayers来添加地图标注，标注样式设置的简要模板

    先把代码贴出来,注释以后有时间再写(需要留意一下这里图标的引入方式,函数内相同路径无法找到图片) import sk from "../../assets/img/home/sk-activ ...

  5. mysql的锁机制，以及乐观锁，悲观锁，以及热点账户余额问题

    mysql的简单锁机制. myisam 1.只支持表级锁,所以经常更新的表结构不适宜用. 2.select也会产生锁表 innodb 1.支持事务,行级锁,表级锁,执行行级锁的前提是sql语句的索引有 ...

  6. 5、Sersync实时同步实战

    1.实时同步概述 1.什么是实时同步, 只要当前目录发生变化则会触发一个事件,事件触发后将变化的目录同步至远程服务器. 2.为什么要实时同步, 保证数据的连续性, 减少人力维护成本, 解决nfs单点故 ...

  7. 从n个数里面找最大的两个数理论最少需要比较

    答案是:n+logn-2 过程是这样的: 甲乙比甲胜出,丙丁比丙胜出,最后甲丙比较,甲胜出...容易得出找出最大数为n-1次. 现在开始找出第二大的数字:明显,第二大的数字,一定和甲进行过比较.... ...

  8. 简单混合锁（HybridLock）

    internal sealed class SimpleHybridLock : IDisposable { //基元用户模式构造使用 ; //基元内核模式构造 private AutoResetEv ...

  9. da面板修改SSH端口号

    进入da面板,找到管理工具菜单下的文件编辑器,点击进入,选择所要编辑的文件/etc/ssh/sshd_config 点击右侧的显示文件,即可打开该文件进行编辑,例如可以将原始端口22修改为 33 #P ...

  10. 转 SQL连接查询语句（内、外、交叉和合并查询）

    转 http://blog.csdn.net/u010011371/article/details/50596535 1.内连接 (INNER JOIN) 内连接也称自然连接,它是根据两个或多个表中的 ...