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. C#求1-100的质数，100-1000的水仙花数，1-100所有的平方和平方平方根

    //你们的鼓励是我最大的动力 大家可以多留言评论  在接下来很长一段时间我会从初级到高级每天更新 大家有想学习的内容也可以留言哦 //现在是我做C#老师的第28天,希望和大家一起努力 加油 using ...

  2. DispatcherTimer和Timer的区别

    两者区别是 Timer在非UI线程跑的,DispatcherTimer是在UI线程跑的, DispatcherTimer 可以直接更新UI Timer必须使用this.Dispatcher.Begin ...

  3. O062、NFS Volume Provider（Part I）

    参考https://www.cnblogs.com/CloudMan6/p/5683352.html   cinder-volume 支持多种 volume provider ,前面我们一直使用的是默 ...

  4. 【强化学习】MOVE37-Introduction（导论）/马尔科夫链/马尔科夫决策过程

    写在前面的话:从今日起,我会边跟着硅谷大牛Siraj的MOVE 37系列课程学习Reinforcement Learning(强化学习算法),边更新这个系列.课程包含视频和文字,课堂笔记会按视频为单位 ...

  5. vue的使用与安装 npm -v报错

    1.先将node从官方文档下载下来,然后进行安装. 安装成功后,在dos命令中node -v.npm -v来测试,如果成功就可以安装cnpm(国内淘宝镜像比较快).这里我遇到一个bug,npm -v压 ...

  6. vue-loading图

    父组件给子组件src地址: columns(){ return [ {'title': '图片', 'key': 'img', render(h, {row}){ return h(LoadingIm ...

  7. haproxy实现ssl套接字加密

    概述 如果你的应用使用SSL证书,则需要决定如何在负载均衡器上使用它们. 单服务器的简单配置通常是考虑客户端SSL连接如何被接收请求的服务器解码.由于负载均衡器处在客户端和更多服务器之间,SSL连接解 ...

  8. winfrom---Window 消息大全

    最近正在捣腾winfrom,遇到了关于window消息这一块的东西,正好在网上看到“微wx笑”的总结. 原文地址:http://blog.csdn.net/testcs_dn/article/deta ...

  9. 第十章、numpy模块

    目录 第十章.numpy模块 一.导入方式 二.作用 三.通过函数创建numpy数组 四. numpy数组运算 五.重点 第十章.numpy模块 一.导入方式 import numpy as np#约 ...

  10. UVA 1482 SG打表

    打出SG表来可以很容易的发现i为偶数时 SG[i]=i/2 i为奇数时 SG[i]=SG[i/2] #include<bits/stdc++.h> typedef long long ll ...