HTML 回顾整理
<html>标签:定义HTML文档
<body>标签:定义文档主体
<h1> - <h6> 标签:定义HTML标题
<hr> 标签:创建水平线
<!-- 这是一个注释 --> 注释
<p> 标签:段落
<br />标签:换行
HTML 链接
<a> 标签:链接
默认情况下,链接将以以下形式出现在浏览器中:
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时,链接显示为红色并带有下划线。
(1)href属性:来描述链接的地址
<a href="url">链接文本</a>
(2)target 属性:定义被链接的文档在何处显示
例:target="_blank": 链接将在新窗口打开
(3)id属性:在一个HTML文档书签标记
例:插入ID <a id="tips">文字</a>
文档中创建一个链接到ID部分 <a href="#tips">文字</a>
创建一个链接到其它文档ID部分<a href="http://www.baidu.com/html-links.html#tips">文字</a>
注释: 请始终将正斜杠添加到子文件夹。
例:href="http://www.baidu.com/html/
HTML <head> 元素
头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>
<title> 标签:定义了不同文档的标题
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时,显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
<base> 标签:描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:
<base href="http://www.baidu.com/images/" target="_blank">
<link> 标签:链接到样式表(CSS)
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style> 元素:直接添加CSS样式来渲染 HTML 文档
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
<meta> 标签:提供了元数据不显示在页面上,但会被浏览器解析。
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒中刷新当前页面:
<meta http-equiv="refresh" content="30">
<script>标签:用于加载脚本文件,如: JavaScript
HTML 图像- 图像标签( <img>)和源属性(Src)
<img> 是空标签,只包含属性,没有闭合标签。
<img src="url" alt="some_text">
(1)src 属性: "source"源属性的值是图像的 URL 地址
(2)alt 属性:用来为图像定义一串预备的可替换的文本。
(3)height(高度) 与 width(宽度)属性:用于设置图像的高度与宽度。
HTML 表格
<table> 标签:表格
<tr> 标签:行
<th> 标签:表头
<td> 标签:单元格
colspan="2":链接行的两个段元格
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<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>
HTML 列表
<ul> 标签:无序列表
<ol> 标签:有序列表
<li> 标签:每个列表项的开始
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul> <ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<dl>标签:自定义例表
<dl>
<dt>自定义列表项</dt>
<dd>自定义列表项的定义<dd>
<dt>自定义列表项</dt>
<dd>自定义列表项的定义<dd>
</dl>
HTML 区块
<div> 元素:块级元素,可用于组合其他 HTML 元素的容器。
<span> 元素:内联元素,可用作文本的容器。
<table> 元素:作用是显示表格化的数据。
块级元素(block-level):在浏览器显示时,通常会以新行来开始(和结束)。例: <h1>, <p>, <ul>, <table>
内联元素(inline):在显示时通常不会以新行开始。例: <b>, <td>, <a>, <img>
HTML 布局
<div>块级元素或是<table>表格化的数据
HTML 表单和输入
<form>标签:表单
<input>标签:输入
文本域(Text Fields):缺省宽度是20个字符
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
密码字段:<input type="password">——密码不会显示,以星号或圆点替代
<form>
Password: <input type="password" name="pwd">
</form>
单选按钮:<input type="radio">
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
复选框:<input type="checkbox">
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
提交按钮:<input type="submit">
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
HTML 框架
<iframe>框架:在同一个浏览器窗口中显示不止一个页面。
iframe语法:<iframe src="URL"></iframe>
height 和 width 属性:用来定义iframe标签的高度与宽度。——属性默认以像素为单位,
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
frameborder 属性:是否显示边框——属性值为 "0" 移除iframe的边框
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
例:点击链接,链接地址页面显示在iframe框架中
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.baidu.com" target="iframe_a">baidu.com</a></p>
注:name和target名字相同。
HTML 回顾整理的更多相关文章
- logback日志回顾整理--2018年8月8日
几年前使用过logback作为项目的日志框架. 当时觉得这个框架比log4j更加好用. 所以系统的学习了一遍. 后来换了公司, 不再使用logback. 如今, 又有机会使用logback了, 所以, ...
- Java知识系统回顾整理01基础02面向对象01类和对象
一.面向对象实例--设计英雄这个类 LOL有很多英雄,比如盲僧,团战可以输,提莫必须死,盖伦,琴女 所有这些英雄,都有一些共同的状态 比如,他们都有名字,hp,护甲,移动速度等等 这样我们就可以设计一 ...
- Java知识系统回顾整理01基础05控制流程07结束外部循环
一.break是结束当前循环 二.结束当前循环实例 break; 只能结束当前循环 public class HelloWorld { public static void main(String[] ...
- Java知识系统回顾整理01基础05控制流程06break
一.break break:结束循环 二.练习--直接结束当前for循环 public class HelloWorld { public static void main(String[] args ...
- Java知识系统回顾整理01基础05控制流程04 for
一.for 比较for和while public class HelloWorld { public static void main(String[] args) { //使用while打印0到4 ...
- Java知识系统回顾整理01基础05控制流程01if
一.if if(表达式1){ 表达式2: } 如果表达式1的值是true, 就执行表达式2 public class HelloWorld { public static void main(Stri ...
- Java知识系统回顾整理01基础04操作符06三元运算符
一.三元运算符 表达式?值1:值2 如果表达式为真 返回值1 如果表达式为假 返回值2 if语句学习链接:if语句 public class HelloWorld { public static vo ...
- Java知识系统回顾整理01基础04操作符02关系操作符
一.关系操作符 关系操作符:比较两个变量之间的关系 > 大于 >= 大于或等于 < 小于 <= 小于或等于 == 是否相等 != 是否不等 public class Hell ...
- Java知识系统回顾整理01基础04操作符01算术操作符
一.算数操作符类别 基本的有: + - * / % 自增 自减: ++ -- 二.基本算数操作符 + - * / 基本的加 减 乘 除 public class HelloWorld { public ...
- Java知识系统回顾整理01基础03变量07final关键字
一.final赋值 final 修饰一个变量,有很多种说法,比如不能改变等等 准确的描述是 当一个变量被final修饰的时候,该变量只有一次赋值的机会 二.在声明的时候赋值 i已经被赋值为5,所以这里 ...
随机推荐
- zabbix http服务监控实例
1在被监控主机安装http服务 ,监听80端口 systemctl start httpd.service 启动服务 80端口已经启动 设定,监控80端口,当服务不当时先自动重启服务 2 ...
- Python学习(十八)—— 数据库(三)
转载自http://www.cnblogs.com/linhaifeng/articles/7356064.html 一.数据操作 1.插入数据INSERT 1. 插入完整数据(顺序插入) 语法一: ...
- Windows 如何备份恢复Ubuntu系统文件
之前安装的Win10 + Ubuntu18.04双系统,Ubuntu由于特殊原因崩了,所以打算重装系统 但是进不去Ubuntu系统,Ubuntu中的文件无法备份 试了win10的优盘启动工具中的DG, ...
- 实现Java简单继承
面向对象练习-简单继承 一.完成教师类的创建 说明: id 代表身份证号 name 表示姓名 birth 表示出生日期 title 表示职称(讲师,副教授,教授等) 二.完成学生类的创建 说明: ma ...
- snmp 里面oid对应的信息 MIB
系统参数(1.3.6.1.2.1.1) OID 描述 备注 请求方式 .1.3.6.1.2.1.1.1.0 获取系统基本信息 SysDesc GET .1.3.6.1.2.1.1.3.0 监控时间 s ...
- [ 严重 ] my网SQL注入
RANK 80 金币 100 数据包 POST maoyan.com/sendapp HTTP/1.1Host: xxx.maoyan.comUser-Agent: Mozilla/5.0 ( ...
- Vagrant 管理部署 VirtualBox (推荐使用)
学习一段时间的大数据和容器技术,使用虚拟机搭建实验环境还是挺耗时耗力的. 一旦虚拟机坏掉了,还要重新开始. 最近发现了Vagrant, 简直好用上天,方便快捷,易用. 下面介绍如何在Windows中安 ...
- RabbitMQ实战经验分享
前言 最近在忙一个高考项目,看着系统顺利完成了这次高考,终于可以松口气了.看到那些即将参加高考的学生,也想起当年高三的自己. 下面分享下RabbitMQ实战经验,希望对大家有所帮助: 一.生产消息 关 ...
- css布局方式总结
### 居中布局 ### 一.水平居中 * 要求:子元素于父元素水平居中且其(子元素与父元素)宽度均可变. ```` javacript <div class="parent" ...
- python数据结构之冒泡排序
冒泡排序是一种基础排序算法,在python中,我们利用列表的的方式来完成,它对列表中的元素进行重复的遍历,在遍历的同时进行比较,如果两个数没有按照我们规定的顺序进行排列,就按照我们预先设定好的是顺序或 ...