一、HTML的介绍

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

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

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

 

二、HTML标签的使用

1.排版标签

(1)<br/>

    换行。

(2)<p></p>

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

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

(3)<hr/>

     一条水平线。

(4)div

     声明一块区域。

     <div>数据</div>

(5)span

     声明一块区域。

<!DOCTYPE html>
<html>
<head>
<title>HTML学习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head> <body> ---------------------p标签测试---------------------
<p>
HTML(HyperText Markup Language)超文本标记语言,不是一种编程语言,而是一种描述性的标记语言,用于描述超文本的内容的显示,比如字体颜色或者大小。
</p> ---------------------hr标签测试---------------------
<hr align="left" width="50%"/> ---------------------div标签测试---------------------<br>
<div>这是div区域1</div>
<div>这是div区域2</div>
---------------------span标签测试---------------------<br>
<span>这是span区域1</span>
<span>这是span区域2</span> </body>
</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>

    无序列表。

<!DOCTYPE html>
<html>
<head>
<title>HTML学习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head> <body> <h2>有序列表</h2> <ol type="a">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ol> <h2>无序列表</h2> <ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul> </body>
</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.表格标签

<!DOCTYPE html>
<html>
<head>
<title>HTML学习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head> <body> <table border="1" width="50%" align="center" cellpadding="8">
<caption>用户列表</caption> <tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr align="center">
<td>AAA</td>
<td>男</td>
<td>22</td>
</tr>
<tr align="center" >
<td>BBB</td>
<td>女</td>
<td>21</td>
</tr>
<tr align="center" >
<td colspan="3">
人数总计:
</td>
</tr>
</table> </body>
</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. hibernate分页模糊查询

    在web项目中,显示数据一般采用分页显示的,在分页的同时,用户可能还有搜索的需求,也就是模糊查询,所以,我们要在dao写一个可以分页并且可以动态加条件查询的方法.分页比较简单,采用hibernate提 ...

  2. Ionic2中集成第三方控件Sweetalert

    Ionic2混合开发,入坑系列:Ionic2中集成第三方控件Sweetalert 注:Sweetalert2已经可以直接从npm中下载安装 npm install --save sweetalert2 ...

  3. 磁盘工作原理与IO性能分析

    最近,在研究如何优化产品设备的磁盘IO性能,需要深入研究磁盘及文件系统原理和工作机制,下面简要总结下关于磁盘方面的东西,下篇文章再分享文件系统的. 机械磁盘结构: 无论哪种机械硬盘,都主要由盘片.磁头 ...

  4. 业务逻辑 : forex & mlm

    业务逻辑 公司通过mlm的制度和顾客进行签约来收取资金,再把资金给第三方公司进行投资,再把所投资的回报给分配给公司和顾客. 公司的资金来自投资者,公司的营销策略来自mlm的制度,由市场人员来创建mlm ...

  5. 1232: [Usaco2008Nov]安慰奶牛cheer

    1232: [Usaco2008Nov]安慰奶牛cheer Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 612  Solved: 431[Submi ...

  6. OpenStack/devstack with Neutron on Ubuntu 14 (1)

    安装前,推荐安装一个全新的Ubuntu Server14.04,如果使用之前的ubuntu, 中间可能遇到各种的python包依赖,以及软件版本不对应的问题 环境准备,新建stack用户,给予sudo ...

  7. Java synchronized 关键字的实现原理

    数据同步需要依赖锁,那锁的同步又依赖谁?synchronized给出的答案是在软件层面依赖JVM,而Lock给出的方案是在硬件层面依赖特殊的CPU指令,大家可能会进一步追问:JVM底层又是如何实现sy ...

  8. 你的外接键盘的小键盘在Num Lock键亮着的,但是数字按了不能用,解决办法在这里

    1.可能是Num Lock键卡住了导致的,你多按几次numlock键试试. 如果上面的不行,你就再试试下面的这个: 2.系统下开启了启用鼠标键导致的,解决的方法如下: (1).打开"控制面板 ...

  9. Socket协议

    Socket协议的形象描述 socket的英文原义是"孔"或"插座".在这里作为4BDS UNIX的进程通信机制,取后一种意思.socket非常类似于电话插座. ...

  10. 基于Intranet的零件库管理信息系统设计--part02

    昨天建了第一个子表,今天继续. 按照这个一个一个来: 轴承参数查询如下(来源:轴承查询型号网) 照这个来大概就是这么几个属性: 轴承主键,轴承名称,新型号,旧型号,内径,外径,宽度,Cr,Cor(话说 ...