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. 修改git默认的编辑器nano为vim的方法

    git默认的编辑器是nano,使用起来不易操作,下面介绍两种方法将git默认的编辑器修改为vim.  git config --global core.editor vim .git/config文件 ...

  2. O031、Start Instance 操作详解

    参考https://www.cnblogs.com/CloudMan6/p/5470723.html   本节将通过日志文件分析 instance start 的操作过程,下面是 start inst ...

  3. JavaScript笔记(2)

    函数 1.使用关键字function声明一个函数,如果需要传参数就传参,多个参数用逗号隔开,如果不需要传参数就不传 //函数声明 function name(num1,num2){ //方法体 } 2 ...

  4. SSM框架中的Mapper.xml文件中的增、删、改、查等操作

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "- ...

  5. GitLab端口冲突 解决办法

        访问gitlab,出现:502 GitLab在使用的过程中,会开启80端口,如果80端口被其他的应用程序占用,则GitLab的该项服务不能使用,所以访问GitLab会失败.大多数皆是此问题.  ...

  6. 中断或取消Promise链的可行方案

    ES6标准引入的异步编程解决方案Promise,能够将层层嵌套的回调转化成扁平的Promise链式调用,优雅地解决了“回调地狱”的问题.当Promise链中抛出一个错误时,错误信息沿着链路向后传递,直 ...

  7. 怎么处理U盘无法正常弹出的情况？

    我们都知道U盘和移动硬盘在使用完毕后需要点击“安全删除硬件并弹出”后才能拔出,这样可以避免U盘还在工作时被拔出而造成的故障. 但有时我们点击“安全删除硬件并弹出”时,系统会提示U盘正在工作,没有办法停 ...

  8. Manjaro18+kde 更换壁纸重启失效

    更换壁纸 ​ 在kde的桌面右键->配置桌面 壁纸里更换壁纸,我不能直接添加图像并应用.我的系统在这样操作后重启就会发现一切都被重置了.刚刚添加的图片也不见了. ​ 于是,我就模范原本存在壁纸文 ...

  9. CAN总线简介：如何以编程方式控制汽车

    最近,我正与Voyage公司的朋友合作研究,以实现福特Fusion空调系统(A/C)的编程控制.目前,Voyage公司正努力打造自动驾驶的终极目标:能够以低廉的价格成本和广泛的投放范围,把世界任何地方 ...

  10. Docker容器入门篇

    第1章 Docker简介 1.1 Docker容器介绍 Docker官网:https://www.docker.com/ 什么是docker? Docker 最初是 dotCloud 公司创始人 So ...