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. devXpress ribbonForm处理

    1.图标处理 这个图标是通过 Element Ribbon API

  2. github常用搜索技巧

    1.在项目名称,readme文件和描述中包含关键字seckill的项目seckill in:name,readme,description 2.fork大于500,stars大于500springbo ...

  3. mybatis 插入语句 返回自增长id方法

    背景:目前有个插入语句需要获取插入记录的id  因为id是自增长的,所以要在插入后返回这个id 错误1: mapper.xml: <!-- 新增 返回自增长id--> <insert ...

  4. 1 c#传递表变量去存储数据的例子

    1 c# 代码 using (SqlConnection con = GetEditorConnection()) { con.Open(); using (SqlCommand command = ...

  5. <%%> <%! %> <%=%> <%-- --%> jsp中jstl一些运用

    <%%> 这里面可以添加java代码片段<%! %> 这里添加java方法 主要是用来声明变量的 <%=%> 将变量或表达式值输出到页面<%-- --%> ...

  6. 卡尔曼(Kalman)滤波及十种数据采集滤波的方法和编程实例

    卡尔曼(Kalman)滤波:https://blog.csdn.net/CSDN_X_W/article/details/90289021 十种数据采集滤波的方法和编程实例:https://wenku ...

  7. 6.声明式异常处理、I18N

    声明式异常处理 1.在Action 中进行异常映射 <exception-mapping result="error" exception="java.sql.SQ ...

  8. BLE 5协议栈-链路层

    文章转载自:http://www.sunyouqun.com/2017/04/page/3/ 链路层LL(Link Layer)是协议栈中最重要的一层. 链路层的核心是状态机,包含广播.扫描.发起和连 ...

  9. 卸载CUDA和cuDNN

    卸载CUDA和cuDNN 1.卸载CUDA 本教程只针对对于.run方式安装的,其他的没有进行测试 打开终端,输入sudo /usr/local/cuda-10.0/bin/uninstall_cud ...

  10. Excel种的数据类型研究【原创】【精】

    因为要做一个项目,开始研究Excel种的数据类型.发现偌大的一个cnblogs竟然没人写这个,自己研究以后记录下来. 在我们通常的认识中,Excel中的数据类型有这么几种 1.常规:2.数值:3.货币 ...