HTML总结
几个知识点：
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/>:创建水平线
<!– 注释内容-->：注释
显示空格（一种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>
随机推荐
- C#正则表达式验证
public class VerifyUtil { /// <summary> /// 判断输入的字符串只包含汉字 /// </summary> /// <param n ...
- 背水一战 Windows 10 (34) - 控件（进度类）: RangeBase, Slider, ProgressBar, ProgressRing
[源码下载] 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing 作者:webabcd 介绍背水一 ...
- jqgrid（转载）
一.主要API接口getGridParam.setGridParam: getGridParam方法: getGridParam("url"): 获取当前的AJAX的URL get ...
- java代码实现栈
这几天在老家有点事,现在弄完了,继续研究一下数据结构,这次的栈并没有对多线程进行优化,如果有想优化的童鞋可以参考我上一篇文章对队列进行的优化,话不多说,上代码: package com.voole.c ...
- 对于SSH框架的选择
选择框架:SSH 对于Web开发来说,SSH框架可以提高开发效率,还可以方便需求的变更以及对后期维护方面更容易操作.SSH也是目前稍微流行的Web开发框架. 选择框架描述: 首先说明一下SSH并不是一 ...
- web项目知识整理
一.div居中 1.margin:auto 2.left:50%:margin-left:div宽度的一半 二.一般处理程序操作session 引using System.Web.SessionSta ...
- Nodejs与ES6系列3:generator对象
3.generator对象 Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同.Generator的中文翻译是生成器,它是ECMAScript6(代号harmory) ...
- 转载 CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解
目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果
- [deviceone开发]-一个简单的表单示例
一.简介 这个例子我们用do_ScrollView+do_LinearLayout来实现,当没有输入相关的值而去保存的时候,则把隐藏的几个提示Label显示出来,然后调用do_LinearLayout ...
- GitHub学习心得之 简单操作
作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 前言 本文对Github的基本操作进行了总结, 主要基于以下文章: http://gitre ...