几个知识点:  

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. 跨平台运行ASP.NET Core 1.0

    前言 首先提一下微软更名后的叫法: ASP.NET 5 更名为 ASP.NET Core 1.0 .NET Core 更名为 .NET Core 1.0 Entity Framework 7 更名为  ...

  2. node.js 的事件驱动

    events 模块只提供了一个对象: events.EventEmitter. EventEmitter 的核心就是事件发射与事件监听器功能的封装.EventEmitter 的每个事件由一个事件名和若 ...

  3. Debian 7 安装配置总结

    最近几天折腾了一下Debian 7 (gnome桌面DVD版,KDE桌面CD版最后会提到),总的来说收获还是挺大的,对比以前使用ubuntu,debian 7给我的感觉像是一个新生婴儿,不带多余的花俏 ...

  4. laravel5 数据库配置(MySQL)

    laravel5 数据库配置(MySQL) 首先有一个安装完成可以运行的laravel框架. 配置database.php 进入laravel根目录. 在config目录下找到database.php ...

  5. python基础之运算符

    算术运算符 运算符 描述 实例 + 加 - 两个对象相加 a + b 输出结果 31 - 减 - 得到负数或是一个数减去另一个数 a - b 输出结果 -11 * 乘 - 两个数相乘或是返回一个被重复 ...

  6. 十二种获取Spring的上下文环境ApplicationContext的方法

    转载:https://my.oschina.net/u/2391658/blog/729414

  7. (原) 2.3 Curator使用

    本文为原创文章,转载请注明出处,谢谢 Curator使用 1.jar包引入,演示版本为2.6.0,非maven项目,可以下载jar包导入到项目中 <dependency> <grou ...

  8. Entity Framework Code First 中使用 Fluent API 笔记。

    在做MVC+EF CodeFirst 的Demo时,碰到的问题, 在组册用户时,要让用户输入确认密码,但是数据库中又不需要保存这个字段,解决方案很多了,这里我列出通过EF Code First的解决方 ...

  9. javascript 函数初探 (二)--- 那些年的预定义函数

    javascript的预定义函数: javascript引擎中有一组可以随时调用的内建函数. 这些内建函数包括: 1. parseInt() 2. parseFloat() 3. isNaN() 4. ...

  10. Activity详解四 activity四种加载模式

    先看效果图: 1概述 Activity启动方式有四种,分别是: standard singleTop singleTask singleInstance 可以根据实际的需求为Activity设置对应的 ...