几个知识点：　　

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. sql常用语句（1）

    --排序 select Row_Number() over(order by a.UserName) as Num --区分性别 then '男' else '女' end SexName Sqlse ...

  2. C#中AppDomain.CurrentDomain.BaseDirectory及各种路径获取方法

    // 获取程序的基目录.System.AppDomain.CurrentDomain.BaseDirectory // 获取模块的完整路径,包含文件名System.Diagnostics.Proces ...

  3. jquery css属性练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Apache Shiro系列（1）

    Apache Shiro是啥呢,安全框架. 360百科是这么描述的:        Apache Shiro(日语"堡垒(Castle)"的意思)是一个强大易用的Java安全框架, ...

  5. iOS面试用到的一些知识点和技术

    1.APP的生命周期和viewcontroler的生命周期? 答:APP的生命周期:在APP的代理中分为七个阶段: 1.将要启动 2.已经启动 3.将要进入非活动状态 4.进入后台 5.从后台进入前台 ...

  6. Java动态代理全面分析

    代理模式 解说:给某一个对象提供一个代理,并由代理对象控制对原对象的引用: 代理模式需要以下几个角色: 1  主题:规定代理类和真实对象共同对外暴露的接口: 2  代理类:专门代理真实对象的类: 3 ...

  7. jQuery.my – 实时的复杂的双向数据绑定

    jQuery.my 这个插件用于实时双向数据绑定.它发生变异给出的数据源对象,反映了用户与用户界面之间的相互作用.jQuery.my 提供了全面的验证,条件格式,复杂的依赖关系,运行形式结构操作. 马 ...

  8. mvc view 中 js 不反应

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. webpack初体验

    本人菜鸟一枚,最近一直在研究webpack的使用,记录下自己的学习体会,由于网上关于webpack的资源(技术博客)太多,对于初学webpack的新手来说,看着五花八门的技术博客,真是头晕眼花(可能是 ...

  10. 在其他系统Iframe中显示SharePoint 页面

    前段时间在做一个项目,要求将SharePoint 的 OWA(Office Web Apps)中的文档显示页面嵌入到另外一个OA系统中,提供给用户可以通过浏览器查看SharePoint文档的能力. 嵌 ...