一、HTML的介绍

     HTML(HyperText Markup Language)超文本标记语言，不是一种编程语言，而是一种描述性的标记语言，用于描述超文本的内容的显示，比如字体颜色或者大小。

     HTML是最基础的网页语言，它是通过标签定义的语言，代码是由标签所组成的。

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<!--
  5. 		  1.放置一些属性信息，辅助信息。
  6. 		  2.引入一些外部的文件(css js)。
  7. 		  3.它里面的内容会先加载。
  8. 		 -->
  9. 		<meta charset="UTF-8" />
  10. 		<title>这是HTML标题</title>
  11. 	</head>
  12. 	<body>
  13.  
  14. 		<font color="red">这是网页正文</font> 
  15.  
  16. 	</body>
  17. </html>

 

二、HTML标签的使用

1.排版标签

(1)<br/>

    换行。

(2)<p></p>

    段落标签，在开始和结束的位置上留一个空行。

     属性: align="left/center/right"对齐方式。

(3)<hr/>

     一条水平线。

(4)div

     声明一块区域。

     <div>数据</div>

(5)span

     声明一块区域。

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>HTML学习</title>
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.   </head>
  7.  
  8.   <body>
  9.  
  10.   	---------------------p标签测试---------------------
  11.   	<p>
  12.   		 HTML(HyperText Markup Language)超文本标记语言，不是一种编程语言，而是一种描述性的标记语言，用于描述超文本的内容的显示，比如字体颜色或者大小。
  13.   	</p>
  14.  
  15.   	---------------------hr标签测试---------------------
  16.   	<hr align="left" width="50%"/>
  17.  
  18.   	---------------------div标签测试---------------------<br>
  19.     <div>这是div区域1</div>
  20.     <div>这是div区域2</div>
  21.     ---------------------span标签测试---------------------<br>
  22.     <span>这是span区域1</span>
  23.     <span>这是span区域2</span>
  24.  
  25.   </body>
  26. </html>

结果:

 

2.字体标签

(1)<font></font>

     中间放文字，设置文字的颜色大小。

     sieze:字号大小最大值7，最小值1。

(2)标题标签

     <h1></h1>

     ……字体从大到小……

     <h7></h7>

 

(3)<b></b>

    粗体。

 

(4)<i></i>

    斜体。

 

3.列表标签

     数据对齐格式化。

(1)<ol></ol>

    有序列表。

(2)<ul></ul>

    无序列表。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML学习</title>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6. </head>
  7.  
  8. <body>
  9.  
  10. 	<h2>有序列表</h2>
  11.  
  12. 	<ol type="a">
  13. 		<li>AAA</li>
  14. 		<li>BBB</li>
  15. 		<li>CCC</li>
  16. 	</ol>
  17.  
  18. 	<h2>无序列表</h2>
  19.  
  20. 	<ul>
  21. 		<li>AAA</li>
  22. 		<li>BBB</li>
  23. 		<li>CCC</li>
  24. 	</ul>
  25.  
  26. </body>
  27. </html>

结果:

 

4.图片标签

<img />

     属性:

           src: 文件的位置。

           width:文件宽度。

           height: 文件高度。

           alt: 文件的说明文字。

 

5.超链接标签

<a></a>

(1)链接资源

     href="" 必须指定协议，默认为file文件协议。

(2)定位资源

     name 锚点

     <a name="top">顶部</a>

     <a name="center">中间</a>

     <a href="#top">回到顶部</a>

 

6.表格标签

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML学习</title>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6. </head>
  7.  
  8. <body>
  9.  
  10. 	<table border="1" width="50%" align="center" cellpadding="8">
  11. 		<caption>用户列表</caption>
  12.  
  13. 		<tr>
  14. 			<th>姓名</th>
  15. 			<th>性别</th>
  16. 			<th>年龄</th>
  17. 		</tr>
  18. 		<tr align="center">
  19. 			<td>AAA</td>
  20. 			<td>男</td>
  21. 			<td>22</td>
  22. 		</tr>
  23. 		<tr align="center" >
  24. 			<td>BBB</td>
  25. 			<td>女</td>
  26. 			<td>21</td>
  27. 		</tr>
  28. 		<tr align="center" >
  29. 			<td colspan="3">
  30. 				人数总计:
  31. 			</td>
  32. 		</tr>
  33. 	</table>
  34.  
  35. </body>
  36. </html>

结果:

 

7.表单标签

<form></form>

(1)form标签中常见的属性

action: 指定表单组件数据发送的位置。如果没有定义action属性，那么默认提交到当前页面。

method: 定义表单提交的方式。只有两种常用 get post.如果没有指定method，默认就是get提交方式。

 

(2)input标签中type的类型如下

     文本框 text。输入的文本信息直接显示在框中。

     密码框 password。输入的文本以原点或者星号的形式显示。

     单选框 radio 复选框 checkbox 如：兴趣选择。

     隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。

     提交按钮 submit 用于提交表单中的内容。

     重置按钮 reset 将表单中填写的内容设置为初始值。

     按钮 button 可以为其自定义事件。

     文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。

 

(3)两个特殊的

A:<select>

     选择标签 提供用户选择内容。如：用户所在的省市。size 属性为显示项目个数。

    <option>:子项标签 属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选项。

B: <textarea>

     多行文本框。如：个人信息描述。

HTML基础学习(一)—HTML的更多相关文章

  1. salesforce 零基础学习（五十二）Trigger使用篇（二）

    第十七篇的Trigger用法为通过Handler方式实现Trigger的封装,此种好处是一个Handler对应一个sObject,使本该在Trigger中写的代码分到Handler中,代码更加清晰. ...

  2. 如何从零基础学习VR

    转载请声明转载地址:http://www.cnblogs.com/Rodolfo/,违者必究. 近期很多搞技术的朋友问我,如何步入VR的圈子?如何从零基础系统性的学习VR技术? 本人将于2017年1月 ...

  3. IOS基础学习-2: UIButton

    IOS基础学习-2: UIButton   UIButton是一个标准的UIControl控件,UIKit提供了一组控件:UISwitch开关.UIButton按钮.UISegmentedContro ...

  4. HTML5零基础学习Web前端需要知道哪些？

    HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...

  5. python入门到精通[三]:基础学习(2)

    摘要:Python基础学习:列表.元组.字典.函数.序列化.正则.模块. 上一节学习了字符串.流程控制.文件及目录操作,这节介绍下列表.元组.字典.函数.序列化.正则.模块. 1.列表 python中 ...

  6. python入门到精通[二]:基础学习(1)

    摘要:Python基础学习: 注释.字符串操作.用户交互.流程控制.导入模块.文件操作.目录操作. 上一节讲了分别在windows下和linux下的环境配置,这节以linux为例学习基本语法.代码部分 ...

  7. CSS零基础学习笔记.

    酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...

  8. Yaf零基础学习总结5-Yaf类的自动加载

    Yaf零基础学习总结5-Yaf类的自动加载 框架的一个重要功能就是类的自动加载了,在第一个demo的时候我们就约定自己的项目的目录结构,框架就基于这个目录结构来自动加载需要的类文件. Yaf在自启动的 ...

  9. Yaf零基础学习总结4-Yaf的配置文件

    在上一节的hello yaf当中我们已经接触过了yaf的配置文件了, Yaf和用户共用一个配置空间, 也就是在Yaf_Application初始化时刻给出的配置文件中的配置. 作为区别, Yaf的配置 ...

  10. qml基础学习 Canvas画笔

    一.画布元素 自qt4.7发布qml以来,qml也在一直不断的完善中,在qt4时代使用qml时如果需要异形图,那我们只能让设计师来切图,这样的感觉是很不爽的,总感觉开发没有那么犀利.但是到了qt5这一 ...

随机推荐

  1. 把时间还给洞察，且看PPT调研报告自动生成攻略

    文/JSong @2017.02.28 在数据分析里面有一句话是说,80%的时间要用于数据清洗和整理,而我觉得理想的状态应该是把更多的把时间花在数据背后的洞察当中.去年11月在简书占了个坑,说要自己写 ...

  2. jquery的ajax提交后，会跳转页面

    今天在写代码的时候,遇到一个很奇怪的问题,一个form表单,用的是ajax的方式提交.结果,在服务器端php中,使用exit(),函数后都不能停止,并且继续跳转到本页.请求如下: 第一个请求中,其实我 ...

  3. MySQL · 引擎特性 · InnoDB IO子系统

    前言 InnoDB做为一款成熟的跨平台数据库引擎,其实现了一套高效易用的IO接口,包括同步异步IO,IO合并等.本文简单介绍一下其内部实现,主要的代码集中在os0file.cc这个文件中.本文的分析默 ...

  4. 抓包工具Wireshark的使用

    WireShark是非常流行的网络封包分析软件,功能十分强大.可以截取各种网络封包,显示网络封包的详细信息. WireShark界面简介 启动WireShark的界面如下: 选择网卡 wireshar ...

  5. 1212: [HNOI2004]L语言

    1212: [HNOI2004]L语言 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 643  Solved: 252[Submit][Status] ...

  6. PPAPI VS NPAPI

    flash player PPAPI 它的CPU和内存占用率会比较高,主要是因为缓存大多放在内存里而不是硬盘上.   npapi的flash跟ppapi的flash基本是一样的,只不过ppapi插件都 ...

  7. 右键打开cmd命令出错

    今天想在E盘git clone一个工程项目下来,发现自己的window10上,出现了如下问题(不知道是不是是什么软件引起的冲突) 在度娘里面找了半天也没有解决问题,只有通过如下方法实现了 ctrl+r ...

  8. QT 中使用 c++ 的指针

    之前没有接触过 c++,不过听说 c++ 的指针很坑,直到最近在用 QT / C++ 写一个 Linux Deepin 系统上检测网络流量和网速的小程序时,发现 c++ 的指针用起来真的特别蛋疼. 不 ...

  9. JS实现购物车特效

    学习通过JavaScript实现类似于淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能. 1. 实现兼容低版本IE的getElementsByClassName( ...

  10. 读headFirst设计模式 - 装饰者模式

    继承可以在复用父类代码的情况下扩展父类的功能,但同时继承增加了对象之间的耦合度,所以要慎用继承.那么有没有既能扩展父类的功能,又能使对象间解耦的方法呢?答案是肯定的,这就是我们今天要学习的装饰者模式. ...