HTML复习 2019-2-11
HTML复习 2019-2-11
<!doctype html>
<html>
<!--
常见问题答疑
Question 1：HTML标签可以大写吗？
大小写都可以，比如<P> 和 <p> 都一样，但是推荐小写，XHTML强制小写（小写肯定对，大写……看情况）
Question 2：有<h7>、<h8>、<h9>……吗？
没有。<h1>最大，<h6>最小.
Question 3：所有HTML标签都需要<></>吗？
不是。有特例，比如<img>是自闭合的，没有</img>;<br>是空元素，需要在开始标签闭合<br/>;<hr> <link> <base>不需要闭合，等等。
Question 4：标签里的属性有先后顺序吗？
没有。比如<img src="" alt="" width="" height="">和<img alt="" width="" height="" src="">效果是一样的。
-->
<head>
<!--
<meta>元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
!元数据也不显示在页面上，但会被浏览器解析。
-->
<meta charset="utf-8">
<!-- <title>标签定义HTML文档的标题 -->
<title>HTML复习 2019-2-3</title>
<!--
<base>定义了所有链接的URL（地址） URL->Uniform Resource Locator（全球资源定位器）
<base href="http://www.baidu.com/"> 所有链接都指向www.baidu.com
-->
<!--
<link>标签定义文档和外部资源的关系，链接到另一个文件，把另一个文件的东西拿过来用
通常引用 css文件 和 js文件
调用样式的优先级：<link>外部文件 < 文件内<style> < 标签内style属性
-->
<link rel="stylesheet" type="text/css" href="filename.css">
<link rel="stylesheet" type="text/javascript" href="filename.js">
<!--
<style>标签定义标签的样式 CSS -> Cascading Style Sheets（层叠样式表）
1.直接定义标签样式 标签名{ 属性1:值; 属性2:值; }
2.定义具有某一ID的标签样式 #id名{ 属性1:值; 属性2:值; }
3.定义某一类（class）的标签样式 .类名{ 属性1:值; 属性2:值; }
#多个元素用 , 隔开
-->
<style>
td,p{
text-align:center;
}
#top{
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
.show{
background-color: aqua;
}
</style>
<!-- <script>标签用于定义脚本文件（一般就是JavaScript） -->
<script>
alert("lycute!"); //弹出一个消息框
</script>
</head>
<body>
<!--
常用HTML属性：
class 定义一个或多个类名(classname)；相当于把不同的标签分到一个组，属于同一类
id 定义元素的唯一id；id是唯一的，不能两个标签用一个，相当于学号，不能重复
style 定义元素的行内样式(inline style)；只能修改该标签的样式（大小、颜色、位置等）
-->
<!-- <h1> ~ <h6> 标签定义了六个等级的标题 h->head/headline(标题) -->
<h1 id="top">This is a title level 1</h1>
<h2 class="show">This is a title level 2</h2>
<h3 class="show">This is a title level 3</h3>
<h4 class="show">This is a title level 4</h4>
<h5>This is a title level 5</h5>
<h6>This is a title level 6</h6>
<!--
<p>标签定义段落 p->paragragh（段落）
HTML文档中不能直接敲回车，需要使用 <br/> 标签 br->break(打断？……可能是这个吧)
HTML文档中不能直接打空格，需要使用 nbsp->Non-breaking Space(不间断空格)
！！上两条在<pre>标签内不受影响
<hr>标签用于创建水平线,用于分隔内容 hr->horizontal line(水平线)
<b>和<strong>都可以加粗文字
<i>和<em>都可以定义斜体文字
通常使用<strong>和<em>，因为它们有强调的含义
-->
<p>
This is a paragragh.<br/>
And this is the second line.
</p>
<hr>
<p>
This is another paragragh<br/>
<!--常用文本格式化属性：
<b> 定义粗体文本 b->bold(粗体)
<em> 定义着重文字 em->emphasize(强调)
<i> 定义斜体字 i->italic(斜体)
<small> 定义小号字
<strong>定义加重语气
<sub> 定义下标字 sub->subscript(下标)
<sup> 定义上标字 sup->superscript(上标)
<ins> 定义插入字 ins->insert(插入)
<del> 定义删除字 del->delete(删除)
-->
<strong>I am bold</strong><br/>
<em>I am italic</em><br/>
<small>I am small</small><br/>
<sub>I am subscript</sub>
<sup>I am superscript</sup><br/>
<ins>I am ins</ins><br/>
<del>I am del</del>
</p>
<!--
段落中“计算机”输出标签（一般不用，了解就行）
<code> 定义计算机代码
<kbd> 定义键盘码 kbd->keyboard(键盘)
<samp> 定义计算机代码样本 samp->sample(样例)
<var> 定义变量 var->variate(变量)
<pre> 定义预格式文本 pre->preposition(前置？……这个，应该吧)
-->
<p>
<pre>
<code>
#include"stdio.h"
int main()
{
printf("Hello World!");
}
</code>
</pre>
<kbd>Shift键 VK_SHIFT</kbd><br/>
<samp>system.out.print("hello world");</samp><br/>
</p>
<!--
HTML引文、引用和标签定义
<abbr> 定义缩写 abbr->abbreviation（缩写）
<address> 定义地址
<bdo> 定义文字方向 bdo->Bi-Directional Override
<blockquote> 定义长的引用
<q> 定义短的引用语 q->quote（引用）
<cite> 定义引用、引证
<dfn> 定义一个定义项目 dfn->definition（定义）
-->
<p>
<abbr title="abbreviation">abbr</abbr><br/>
<address>Hebei,Shijiazhuang</address><br/>
<bdo dir="rtl">text direction from right to left</bdo>
<bdo dir="ltr">text direction from left to right</bdo>
<blockqoute cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockqoute><br/>
<q>This is a short qoute</q><br/>
<cite>This is cite</cite><br/>
<dfn>This is dfn</dfn>
</p>
<!--
<a>标签定义链接 a->anchor(锚点)
href属性定义链接地址 href->hypertext reference（超文本引用）
target属性定义被链接的文档在何处显示
1.可以用来链接到外部地址实现页面跳转功能
2.可以链接到当前页面的某部分实现内部导航功能
3.链接不一定是文本，也可以是图片或者其他HTML元素
-->
<a href="#">This is a null link</a><br/>
<a href="#top">This is a link to h1.</a><br/>
<a href="http://www.baidu.com/" target="_blank">This is a link to baidu</a><br/>
<!--
<img>标签定义图像、图片 img->image(图像)
<img>是一个自闭合标签，不需要也不存在</img>.
src属性指向图像的地址 src->source(来源)
alt属性定义如果图片加载不出来时的替换文字 alt->alter(变更)
height、width属性分别定义图片的 高度 和 宽度,值可以是数字（单位px：像素）或者百分比（相对于源文件） px->pixel(像素)
-->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549172426662&di=caf7c53ab0af3935b20da042e72737d4&imgtype=0&src=http%3A%2F%2Fimages5.fanpop.com%2Fimage%2Fphotos%2F31600000%2FKirito-kirigaya-kazuto-kirito-31699071-1280-720.jpg" alt="kirito" height="50%" width="50%">
<!-- HTML 可以通过 <div> 和 <span> 将元素组合起来 -->
<div style="background:skyblue;">
<p>This is a paragragh in a div</p>
<a href="http://www.nelzh.cn/">www.nelzh.cn</a>
</div>
<p>
Ly <span style="background:pink;">cute</span>
</p>
<!--
HTML表格 <table> (table有表格的意思)
<th> 定义表格的标题栏 th -> table headline(我jiao着应该是……)
<tr> 定义表格的行 tr -> table row
<td> 定义表格的列 td -> table ???
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
-->
<table border="1">
<caption>LYCUTE</caption>
<colgroup>
<col span="2" style="background-color:skyblue;">
</colgroup>
<thead>
<tr>
<th>L</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>LY</td>
<td>CUTE</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>CUTE</td>
<td>LY</td>
</tr>
</tfoot>
</table>
<!--
有序列表<ol> & 无序列表<ul> & 自定义列表<dl>
ol -> ordered list
ul -> unordered list
dl -> ??? list
-->
<ol>
<li>lycute</li>
<li>lycute</li>
<li>lycute</li>
</ol>
<ul>
<li>lycute</li>
<li>lycute</li>
<li>lycute</li>
</ul>
<dl>
<dt>ly</dt>
<dd>-cute</dd>
<dt>cute</dt>
<dd>-ly</dd>
</dl>
<!-- HTML表单<form> 和 输入<input> -->
<form>
<!-- 文本域（Text Fields）-->
Username:<input type="text" name="username"><br/>
<!-- 密码（Password）-->
Password:<input type="password" name="pwd"><br/>
<!-- 多行输入（Textarea）-->
<textarea></textarea><br/>
<!--
下拉列表（select）
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
-->
<select>
<optgroup label="program">
<option value="c">C</option>
<option value="java">Java</option>
<option value="python">python</option>
</optgroup>
<optgroup label="cute or not">
<option value="cute">lycute</option>
<option value="verycute">lyverycute</option>
</optgroup>
</select><br/>
<!-- 单选按钮（Radio Buttons）-->
<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female<br/>
<!-- 复选框（Checkboxes）-->
<input type="checkbox" name="program" value="c">C<br/>
<input type="checkbox" name="program" value="java">Java<br/>
<input type="checkbox" name="program" value="python">python<br/>
<!-- 提交按钮（Submit Button）-->
<input type="submit" value="submit">
<!-- 按钮（Button）-->
<input type="button" value="找回密码">
</form>
<!-- <iframe> 标签规定一个内联框架 过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。-->
<center>
<iframe src="http://www.baidu.com/" width="1200" height="400"></iframe>
</center>
</body>
</html>
HTML复习 2019-2-11的更多相关文章
- 2019年11个javascript机器学习库
Credits: aijs.rocks 虽然python或r编程语言有一个相对容易的学习曲线,但是Web开发人员更喜欢在他们舒适的javascript区域内做事情.目前来看,node.js已经开始向每 ...
- tmux使用——2019年11月20日16:40:15
1.tmux 命令行的典型使用方式是,打开一个终端窗口(terminal window,以下简称"窗口"),在里面输入命令.用户与计算机的这种临时的交互,称为一次"会话& ...
- 打开随身U盘_办公专用盘 2019年11月29日
;;; ; 打开随身U盘_办公专用盘 2019年11月29日 ; https://www.autoahk.com/?p=16553; https://www.cnblogs.com/delphixx/ ...
- 'Rem EverythingAutoSetup.VBS 安装Everything的VBS脚本 2019年11月25日写
'Rem EverythingAutoSetup.VBS 安装Everything的VBS脚本 2019年11月25日写 'Rem Everything是voidtools开发的一款本地NTFS文件和 ...
- 键盘和鼠标闲置超时时关闭显示器并锁定电脑桌面的AutoHotkey脚本 2019年11月24日写
/* 键盘和鼠标闲置超时时关闭显示器并锁定电脑桌面的AutoHotkey脚本 2019年11月24日写 在电脑桌面锁定时移动鼠标就会显示登录界面,此时即使超过电源设置的时间电脑也不会关闭显示器使得屏幕 ...
- 《C++Primer》复习——with C++11 [4]
考虑到STL的掌握主要靠的是练习,所以对于STL这部分,我把书中的练习都做一遍,加深印象.这些练习是第9.10.11.17章的,分别是顺序容器.泛型算法和关联容器等. ——10月22日 /*----- ...
- 《C++Primer》复习——with C++11 [1]
1.头文件中不应包含using声明,因为头文件的内容会拷贝到所有引用到他的文件中去,如果头文件里有谋个using声明,那么每个使用了该头文件的文件就会有这个声明,由于不经意间包含了一些名字,反而可能产 ...
- 《C++Primer》复习——with C++11 [2]
1.数组引用形参,C++允许将变量定义成数组的引用,给予同样的道理,形参也可以是数组的引用,此时引用形参绑定到对应的实参上,也就是绑定到数组上 ]) { for (auto elem : arr) c ...
- 易初大数据 2019年11月14日 spss笔记 王庆超
“均匀分布”的随机数 需要打开本章的数据文件“sim.sav.”. 1.设置随机数种子 1选择[转换]--[随机数字生成器],勾选‘设置起点’,并在‘固定值’ 的下‘值’中输入一个用户给定的数值.该数 ...
- 易初大数据 2019年11月13日 Linux 王庆超
★安装Red Hat Enterprise Linux7.41 ◆1通过键盘的方向键选择“lnstall Red Hat Enterprise Linux7.4”选项来直接安装Linux 系统. ◆2 ...
随机推荐
- vue中几种常见技巧
1.校验延迟:点击进入页面不希望校验必填字段this.$nextTick(() => { this.$refs.formRules.clearValidate() })2.$on $emit $ ...
- jqgrid自定义列表开发=》实现高级查询
标题已指出本文要说的三件事,首先是主角jqgrid,将应用在自定义列表中,重点介绍如何实现高级查询. 使用jqgrid实现自定义列表分为两大步骤,首先是要根据业务完成jqgrid的对象定义,即列表的描 ...
- python变量存储
变量的存储 在高级语言中,变量是对内存及其地址的抽象. 对于python而言,python的一切变量都是对象,变量的存储,采用了引用语义的方式,存储的只是一个变量的值所在的内存地址,而不是这个变量的只 ...
- shiro三连斩之第三斩，整合 springboot
shiro爱springboot中使用 ,还有thymeleaf前端框架.主要是如何配置 pom.xml配置依赖 <?xml version="1.0" encoding=& ...
- 一个C++右值引用的问题
暂时先不更新前一篇文章了,感觉那个文章要写好久.累死. 今天说一说C++右值引用的一个问题. 这个问题的发现也是很偶然的. 来一段毫无意义但是能证明问题的代码: std::string &&a ...
- nodejs02-fs模块
文件操作模块:fs-filesystem(异步) //readFile(文件名,回调函数) fs.readFile(); fs.readFile("aaa.txt",functio ...
- 编写一个求和函数sum，使输入sum(2)(3)或输入sum(2,3)，输出结果都为5
昨天的笔试题,做的一塌糊涂,题目考的都很基础而且很细,手写代码对我来说是硬伤啊.其中有一道是这个,然而看到题目的时候,根本没有想到arguments:然后现在就恶补一下. arguments:用在函数 ...
- idea【快捷键】
ctrl+shift+a:全局搜索 IDEA 的操作和设置 shift+f6:重命名 ctrl+alt+m:提取方法 ctrl+alt+l:格式化代码 ctrl+alt+o:优化导入类和包 ctrl+ ...
- Eclipse is running in a JRE, but a JDK is required Some Maven plugins may not work when importing projects or updating source folders.
安装Maven后每次启动出现警告信息: Eclipse is running in a JRE, but a JDK is requiredSome Maven plugins may not wor ...
- 微信小程序前端开发踩坑（一）
之前由于不了解微信小程序的整个的运行开发机制,走了很多的弯路,脑子灵光的可能不会遇到,这个主题系列的帖子希望可以帮助到像我一样理解能力慢的孩子. 不论是开发微信小程序还是说学习任何一门编程语言,最重要 ...