几个知识点：　　

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML框架结构：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

此处为标签内容

</body>

</html>

HTML属性：

class=“XXX”  :元素类名，CSS定位用

id=“XXX”  :元素id，CSS定位用

style=“XXX”:定于元素颜色、是否居中、粗细、边界等

title=“XXX”：鼠标悬停时提示信息

Alt=“XXX”:图片加载错误提示信息

HTML常用标签：

<h1 align=“center”>文字内容</h1>:标题居中显示

<p style="font-size:10px“>文字内容</p>：段落显示

<a href=“https://www.baidu.com/” title=“这是链接“>百度</a>：链接标签

<img src=“./picture.jpg” alt="图片加载错误"/>:图片显示标签

一些独立标签：

<br/>:换行

<hr/>:创建水平线

<!– 注释内容-->：注释

&nbsp;显示空格（一种HTML实体符号）

<div>此处可嵌套其他标签</div>：块级元素，他的内容会另起一行开始。

<span>此处可嵌套其他标签</span>:内联元素，不换行

无序列表：

<ul>

<li>第一项</li>

<li>第二项</li>

</ul>

有序列表：

<ol>

<li>第一项</li>

<li>第二项</li>

</ol>

表格：

<table border="1">

<tr>

<td rowspan="2">跨行</td>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

运行样式如下：

表格的一些属性：

表单：

表单是一个包含表单元素的区域，表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素

<form>表单元素</form>：表单标签

<textarea></textarea>:文本域，可输入文字

<input type=“text” name=“firstname” />:输入框元素

<input type=“radio” name=“sex”/>:单选按钮元素

<input type=“checkbox” name=“car” />：复选按钮

<select name=“cars”>：下拉列表

<option value="volvo">Volvo</option>

<option value="fiat" selected="selected">Fiat</option>

</select>

<button type=“button”>Click Me!</button>：按钮

<input type=“submit” value=“Submit” />：提交按钮

HTML一些高级特性：

<frameset cols="25%,75%">

<frame src="./frame_a.htm">

<frame src="./frame_b.htm">

</frameset>  框架，将屏幕分为两半，分别填充两个页面

<iframe src=“https://www.baidu.com/”></iframe>：内联框架，将一个页面内联

<link rel=“stylesheet” type=“text/css” href=“theme.css” />:外部文件引入，放在head标签内

<title></title>:定义文档的标题，位于head内

<meta></meta>:定义关键字、文档描述，位于文档head之内

<base href=“https://www.baidu.com/” />：定义整篇文档的默认链接指向

<script></script>：插入script语句

HTML完整例子如下：

<html>

<head>

	<link rel="stylesheet" type="text/css" href="theme.css" />

	<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

	<meta name="keywords" content="HTML, CSS, XML" />

	<base href="https://www.baidu.com/" />

	<base target="_blank" />

</head>

	<body>

	<h1 align="center">标题1</h1>

	<p style="font-size:10px" >黄色段落</p>

	<a href="https://www.baidu.com/" title="这是链接">百度</a>

	<img src="./picture.jpg" alt="图片加载错误"/>

	 <div class="news">

	  <h2>News headline 1</h2>

	  <p>some text. some text. some text...</p>

	  ...

	 </div>

	<span>提示：</span>

	<table border="1">

	<tr>

	<td rowspan="2">跨行</td>

	<td>row 1, cell 1</td>

	<td>row 1, cell 2</td>

	</tr>

	<tr>

	<td>row 2, cell 1</td>

	<td>row 2, cell 2</td>

	</tr>

	</table>

	<ul>

	<li>第一项</li>

	<li>第二项</li>

	</ul>

	<ol>

	<li>第一项</li>

	<li>第二项</li>

	</ol>

	<form name="input" action="html_form_action.asp" method="get">

		<textarea rows="10" cols="5">文本域</textarea>

		姓名：<input type="text" name="firstname"/>

		<input type="radio" name="sex"/>男性

		<input type="checkbox" name="car" />我有汽车

		<button type="button">Click Me!</button>

		<select name="cars">

		<option value="volvo">Volvo</option>

		<option value="saab">Saab</option>

		<option value="fiat" selected="selected">Fiat</option>

		<option value="audi">Audi</option>

		</select>

		<input type="submit" value="Submit" />

	</form>

	<frameset cols="75%,25%">

   <frame src="./frame_a.htm">

   <frame src="./frame_b.htm">

	</frameset>

	<iframe src="https://www.baidu.com/"></iframe>

	</body>

</html>

　　

随机推荐

  1. C#学习笔记-封装

    前言 说起来惭愧,学了大半年的C#,其实最开始就接触到了封装的部分,但是一直模模糊糊的弄不清楚,也觉得没什么影响就没怎么在意,现在才开始认真的看这部分内容,看懂了过后好多东西清晰了不少,才发现封装这个 ...

  2. 再次推荐一款逼真的HTML5下雪效果

    再次推荐一款逼真的下雪效果 效果图: 效果描述:之前推荐过一款下雪的jQuery插件之前的那款下降速度比较缓慢,今天推荐的这个下降速度比较快,大雪哇 使用方法:1.将index.html中的样式复制到 ...

  3. Tomcat指定的服务已存在

    解压Tomcat8.0后,运行service.bat install,结果安装未成功,进入logs文件夹,查看错误日志,提示: 指定的服务已存在. Failed to install service ...

  4. adb查询log命令

    http://blog.csdn.net/fulinwsuafcie/article/details/8028572

  5. JMeter专题系列（四）参数化

    JMeter也有像LR中的参数化,本篇就来介绍下JMeter的参数化如何去实现. 参数化:录制脚本中有登录操作,需要输入用户名和密码,假如系统不允许相同的用户名和密码同时登录,或者想更好的模拟多个用户 ...

  6. 理解 OpenStack 高可用（HA）（5）：RabbitMQ HA

    本系列会分析OpenStack 的高可用性(HA)概念和解决方案: (1)OpenStack 高可用方案概述 (2)Neutron L3 Agent HA - VRRP (虚拟路由冗余协议) (3)N ...

  7. 新手SSH基础框架搭建

    SSH 为 struts+spring+hibernate的一个集成框架,是目前较流行的一种Web应用程序开源框架. 首先我们先了解SSH的框架所需的包和基本概念: 一.下面我们先来了解一下strut ...

  8. HBase数据库集群配置

    0,HBase简介 HBase是Apache Hadoop中的一个子项目,是一个HBase是一个开源的.分布式的.多版本的.面向列的.非关系(NoSQL)的.可伸缩性分布式数据存储模型,Hbase依托 ...

  9. 【grunt整合版】30分钟学会使用grunt打包前端代码

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

  10. 前端弹出对话框 js实现 ajax交互

    原本计划实现这样一个需求: 前台点击触发某业务动作,需要用户补充信息,不做跳转页面,弹窗的形式进行补充信息. 折腾出来了,但是最终没有用到. 代码还有些毛躁,提供大概实现逻辑. 实现思路: 在窗口铺上 ...