*:first-child {
margin-top: 0 !important;
}

.markdown-body>*:last-child {
margin-bottom: 0 !important;
}

.markdown-body .headeranchor-link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
padding-right: 6px;
padding-left: 30px;
margin-left: -30px;
}

.markdown-body .headeranchor-link:focus {
outline: none;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
position: relative;
margin-top: 1em;
margin-bottom: 16px;
font-weight: bold;
line-height: 1.4;
}

.markdown-body h1 .headeranchor,
.markdown-body h2 .headeranchor,
.markdown-body h3 .headeranchor,
.markdown-body h4 .headeranchor,
.markdown-body h5 .headeranchor,
.markdown-body h6 .headeranchor {
display: none;
color: #000;
vertical-align: middle;
}

.markdown-body h1:hover .headeranchor-link,
.markdown-body h2:hover .headeranchor-link,
.markdown-body h3:hover .headeranchor-link,
.markdown-body h4:hover .headeranchor-link,
.markdown-body h5:hover .headeranchor-link,
.markdown-body h6:hover .headeranchor-link {
height: 1em;
padding-left: 8px;
margin-left: -30px;
line-height: 1;
text-decoration: none;
}

.markdown-body h1:hover .headeranchor-link .headeranchor,
.markdown-body h2:hover .headeranchor-link .headeranchor,
.markdown-body h3:hover .headeranchor-link .headeranchor,
.markdown-body h4:hover .headeranchor-link .headeranchor,
.markdown-body h5:hover .headeranchor-link .headeranchor,
.markdown-body h6:hover .headeranchor-link .headeranchor {
display: inline-block;
}

.markdown-body h1 {
padding-bottom: 0.3em;
font-size: 2.25em;
line-height: 1.2;
border-bottom: 1px solid #eee;
}

.markdown-body h2 {
padding-bottom: 0.3em;
font-size: 1.75em;
line-height: 1.225;
border-bottom: 1px solid #eee;
}

.markdown-body h3 {
font-size: 1.5em;
line-height: 1.43;
}

.markdown-body h4 {
font-size: 1.25em;
}

.markdown-body h5 {
font-size: 1em;
}

.markdown-body h6 {
font-size: 1em;
color: #777;
}

.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body pre,
.markdown-body .admonition {
margin-top: 0;
margin-bottom: 16px;
}

.markdown-body hr {
height: 4px;
padding: 0;
margin: 16px 0;
background-color: #e7e7e7;
border: 0 none;
}

.markdown-body ul,
.markdown-body ol {
padding-left: 2em;
}

.markdown-body ul ul,
.markdown-body ul ol,
.markdown-body ol ol,
.markdown-body ol ul {
margin-top: 0;
margin-bottom: 0;
}

.markdown-body li>p {
margin-top: 16px;
}

.markdown-body dl {
padding: 0;
}

.markdown-body dl dt {
padding: 0;
margin-top: 16px;
font-size: 1em;
font-style: italic;
font-weight: bold;
}

.markdown-body dl dd {
padding: 0 16px;
margin-bottom: 16px;
}

.markdown-body blockquote {
padding: 0 15px;
color: #777;
border-left: 4px solid #ddd;
}

.markdown-body blockquote>:first-child {
margin-top: 0;
}

.markdown-body blockquote>:last-child {
margin-bottom: 0;
}

.markdown-body table {
display: block;
width: 100%;
overflow: auto;
word-break: normal;
word-break: keep-all;
}

.markdown-body table th {
font-weight: bold;
}

.markdown-body table th,
.markdown-body table td {
padding: 6px 13px;
border: 1px solid #ddd;
}

.markdown-body table tr {
background-color: #fff;
border-top: 1px solid #ccc;
}

.markdown-body table tr:nth-child(2n) {
background-color: #f8f8f8;
}

.markdown-body img {
max-width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.markdown-body code,
.markdown-body samp {
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
background-color: rgba(0,0,0,0.04);
border-radius: 3px;
}

.markdown-body code:before,
.markdown-body code:after {
letter-spacing: -0.2em;
content: "\00a0";
}

.markdown-body pre>code {
padding: 0;
margin: 0;
font-size: 100%;
word-break: normal;
white-space: pre;
background: transparent;
border: 0;
}

.markdown-body .codehilite {
margin-bottom: 16px;
}

.markdown-body .codehilite pre,
.markdown-body pre {
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: #f7f7f7;
border-radius: 3px;
}

.markdown-body .codehilite pre {
margin-bottom: 0;
word-break: normal;
}

.markdown-body pre {
word-wrap: normal;
}

.markdown-body pre code {
display: inline;
max-width: initial;
padding: 0;
margin: 0;
overflow: initial;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0;
}

.markdown-body pre code:before,
.markdown-body pre code:after {
content: normal;
}

/* Admonition */
.markdown-body .admonition {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
position: relative;
border-radius: 3px;
border: 1px solid #e0e0e0;
border-left: 6px solid #333;
padding: 10px 10px 10px 30px;
}

.markdown-body .admonition table {
color: #333;
}

.markdown-body .admonition p {
padding: 0;
}

.markdown-body .admonition-title {
font-weight: bold;
margin: 0;
}

.markdown-body .admonition>.admonition-title {
color: #333;
}

.markdown-body .attention>.admonition-title {
color: #a6d796;
}

.markdown-body .caution>.admonition-title {
color: #d7a796;
}

.markdown-body .hint>.admonition-title {
color: #96c6d7;
}

.markdown-body .danger>.admonition-title {
color: #c25f77;
}

.markdown-body .question>.admonition-title {
color: #96a6d7;
}

.markdown-body .note>.admonition-title {
color: #d7c896;
}

.markdown-body .admonition:before,
.markdown-body .attention:before,
.markdown-body .caution:before,
.markdown-body .hint:before,
.markdown-body .danger:before,
.markdown-body .question:before,
.markdown-body .note:before {
font: normal normal 16px fontawesome-mini;
-moz-osx-font-smoothing: grayscale;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 1.5;
color: #333;
position: absolute;
left: 0;
top: 0;
padding-top: 10px;
padding-left: 10px;
}

.markdown-body .admonition:before {
content: "\f056\00a0";
color: 333;
}

.markdown-body .attention:before {
content: "\f058\00a0";
color: #a6d796;
}

.markdown-body .caution:before {
content: "\f06a\00a0";
color: #d7a796;
}

.markdown-body .hint:before {
content: "\f05a\00a0";
color: #96c6d7;
}

.markdown-body .danger:before {
content: "\f057\00a0";
color: #c25f77;
}

.markdown-body .question:before {
content: "\f059\00a0";
color: #96a6d7;
}

.markdown-body .note:before {
content: "\f040\00a0";
color: #d7c896;
}

.markdown-body .admonition::after {
content: normal;
}

.markdown-body .attention {
border-left: 6px solid #a6d796;
}

.markdown-body .caution {
border-left: 6px solid #d7a796;
}

.markdown-body .hint {
border-left: 6px solid #96c6d7;
}

.markdown-body .danger {
border-left: 6px solid #c25f77;
}

.markdown-body .question {
border-left: 6px solid #96a6d7;
}

.markdown-body .note {
border-left: 6px solid #d7c896;
}

.markdown-body .admonition>*:first-child {
margin-top: 0 !important;
}

.markdown-body .admonition>*:last-child {
margin-bottom: 0 !important;
}

/* progress bar*/
.markdown-body .progress {
display: block;
width: 300px;
margin: 10px 0;
height: 24px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #ededed;
position: relative;
box-shadow: inset -1px 1px 3px rgba(0, 0, 0, .1);
}

.markdown-body .progress-label {
position: absolute;
text-align: center;
font-weight: bold;
width: 100%; margin: 0;
line-height: 24px;
color: #333;
text-shadow: 1px 1px 0 #fefefe, -1px -1px 0 #fefefe, -1px 1px 0 #fefefe, 1px -1px 0 #fefefe, 0 1px 0 #fefefe, 0 -1px 0 #fefefe, 1px 0 0 #fefefe, -1px 0 0 #fefefe, 1px 1px 2px #000;
-webkit-font-smoothing: antialiased !important;
white-space: nowrap;
overflow: hidden;
}

.markdown-body .progress-bar {
height: 24px;
float: left;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #96c6d7;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .1);
background-size: 30px 30px;
background-image: -webkit-linear-gradient(
135deg, rgba(255, 255, 255, .4) 27%,
transparent 27%,
transparent 52%, rgba(255, 255, 255, .4) 52%,
rgba(255, 255, 255, .4) 77%,
transparent 77%, transparent
);
background-image: -moz-linear-gradient(
135deg,
rgba(255, 255, 255, .4) 27%, transparent 27%,
transparent 52%, rgba(255, 255, 255, .4) 52%,
rgba(255, 255, 255, .4) 77%, transparent 77%,
transparent
);
background-image: -ms-linear-gradient(
135deg,
rgba(255, 255, 255, .4) 27%, transparent 27%,
transparent 52%, rgba(255, 255, 255, .4) 52%,
rgba(255, 255, 255, .4) 77%, transparent 77%,
transparent
);
background-image: -o-linear-gradient(
135deg,
rgba(255, 255, 255, .4) 27%, transparent 27%,
transparent 52%, rgba(255, 255, 255, .4) 52%,
rgba(255, 255, 255, .4) 77%, transparent 77%,
transparent
);
background-image: linear-gradient(
135deg,
rgba(255, 255, 255, .4) 27%, transparent 27%,
transparent 52%, rgba(255, 255, 255, .4) 52%,
rgba(255, 255, 255, .4) 77%, transparent 77%,
transparent
);
}

.markdown-body .progress-100plus .progress-bar {
background-color: #a6d796;
}

.markdown-body .progress-80plus .progress-bar {
background-color: #c6d796;
}

.markdown-body .progress-60plus .progress-bar {
background-color: #d7c896;
}

.markdown-body .progress-40plus .progress-bar {
background-color: #d7a796;
}

.markdown-body .progress-20plus .progress-bar {
background-color: #d796a6;
}

.markdown-body .progress-0plus .progress-bar {
background-color: #c25f77;
}

.markdown-body .candystripe-animate .progress-bar{
-webkit-animation: animate-stripes 3s linear infinite;
-moz-animation: animate-stripes 3s linear infinite;
animation: animate-stripes 3s linear infinite;
}

@-webkit-keyframes animate-stripes {
0% {
background-position: 0 0;
}

100% {
background-position: 60px 0;
}
}

@-moz-keyframes animate-stripes {
0% {
background-position: 0 0;
}

100% {
background-position: 60px 0;
}
}

@keyframes animate-stripes {
0% {
background-position: 0 0;
}

100% {
background-position: 60px 0;
}
}

.markdown-body .gloss .progress-bar {
box-shadow:
inset 0 4px 12px rgba(255, 255, 255, .7),
inset 0 -12px 0 rgba(0, 0, 0, .05);
}

/* Multimarkdown Critic Blocks */
.markdown-body .critic_mark {
background: #ff0;
}

.markdown-body .critic_delete {
color: #c82829;
text-decoration: line-through;
}

.markdown-body .critic_insert {
color: #718c00 ;
text-decoration: underline;
}

.markdown-body .critic_comment {
color: #8e908c;
font-style: italic;
}

.markdown-body .headeranchor {
font: normal normal 16px octicons-anchor;
line-height: 1;
display: inline-block;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.headeranchor:before {
content: '\f05c';
}

.markdown-body .task-list-item {
list-style-type: none;
}

.markdown-body .task-list-item+.task-list-item {
margin-top: 3px;
}

.markdown-body .task-list-item input {
margin: 0 4px 0.25em -20px;
vertical-align: middle;
}

/* Media */
@media only screen and (min-width: 480px) {
.markdown-body {
font-size:14px;
}
}

@media only screen and (min-width: 768px) {
.markdown-body {
font-size:16px;
}
}

@media print {
.markdown-body * {
background: transparent !important;
color: black !important;
filter:none !important;
-ms-filter: none !important;
}

.markdown-body {
font-size:12pt;
max-width:100%;
outline:none;
border: 0;
}

.markdown-body a,
.markdown-body a:visited {
text-decoration: underline;
}

.markdown-body .headeranchor-link {
display: none;
}

.markdown-body a[href]:after {
content: " (" attr(href) ")";
}

.markdown-body abbr[title]:after {
content: " (" attr(title) ")";
}

.markdown-body .ir a:after,
.markdown-body a[href^="javascript:"]:after,
.markdown-body a[href^="#"]:after {
content: "";
}

.markdown-body pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}

.markdown-body pre,
.markdown-body blockquote {
border: 1px solid #999;
padding-right: 1em;
page-break-inside: avoid;
}

.markdown-body .progress,
.markdown-body .progress-bar {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

.markdown-body .progress {
border: 1px solid #ddd;
}

.markdown-body .progress-bar {
height: 22px;
border-right: 1px solid #ddd;
}

.markdown-body tr,
.markdown-body img {
page-break-inside: avoid;
}

.markdown-body img {
max-width: 100% !important;
}

.markdown-body p,
.markdown-body h2,
.markdown-body h3 {
orphans: 3;
widows: 3;
}

.markdown-body h2,
.markdown-body h3 {
page-break-after: avoid;
}
}
-->

JavaWeb01_html basic

html操作思想

  • 使用标签把要操作的数据包起来，通过修改标签的属性值，来实现标签内数据样式的变化

font标签

  • 属性：size取值范围1-7 color：英文单词，十六进制数 #ffffff

标题标签 <h1> </h1> ... <h6> </h6>

  • 从h1到h6越来越小，自动换行

注释

  • <!-- html的注释 -->

列表标签

  • <dl> <dt></dt> <dd></dd> </dl>
  • 有序
  • 无序

图像标签

  • <img src="图片的路径" width="" height="" alt="" />
  • alt:浏览器的兼容性很差

路径（相对路径）

  • 在同一级目录：直接写
  • 在下一层目录：images/1.jpg
  • 在上层目录： ../

超链接标签

<a href="路径">显示在页面上的内容</a>

  • 打开方式 target=”_self _blank”
  • 默认是在当前页面打开

表格标签

<table>

    <tr>

        <td></td>

        <th></th>   <!--加粗和居中-->

    </tr>

</table>

html的五个规范

  • 一个html文件开始标签和结束的标签<html>和</html>
  • html包含两部分内容
    • <head>设置相关信息</head>
    • <body>显示在页面上的内容都写在body里面</body>
  • html的标签是成对的
  • html的代码不区分大小写
  • 有些标签，在标签内结束。比如换行:<br /> 分割线:<hr />

表单标签

  • 可以提交数据到服务器，这个过程可以用表单标签实现
  • <form>和</form>
    • action:提交到地址，默认提交到当前页面
    • method:表单的提交方式
      • 常用的有两种 get和post get默认就是get请求
    • enctype: 一般请求下不需要这个属性，做文件上传时候需要设置这个属性
    • 面试题目：get和post区别
      • get请求地址栏会携带提交的数据，post不会携带
      • get请求安全级别较低，post较高
      • get请求数据大小的限制，post没有限制
  • 输入项：可以输入内容过选择内容的部分
    • 大部分的输入项使用 <input type="输入项的类型"/>

      • 普通输入项：<input type="text"/>
      • 密码输入项：<input type="password"/>
      • 单选输入项：<input type="radio"/>
        -> 在里面需要属性name
        -> name的属性值必须要相同
        -> 必须有一个value值
      • 复选输入项：<input type="checkbox"/>
        -> 在里面需要属性name
        -> name的属性值必须要相同
        -> 必须有一个value值
      • 文件输入项（在后面上传时侯用到）
        -> <input type="file"/>
      • 下拉输入项（不是在input标签里面的） 
        <select name="birth">
        
    <option value="0">请选择</option>
        
    <option value="1991">1991</option>
        
    <option value="1991">1992</option>
        
    <option value="1991">1993</option>
        
    <option value="1991">1994</option>
        
</select>
      • 文本域
        <textarea cols="10" rows=""></textarea>
      • 隐藏项（不会显示在页面上，但是存在于html代码里面）
        <input type="hidden"/>
      • 提交按钮
        <input type="submit"/>
        <input type="submit" value="注册"/>
      • 使用图片提交
        <input type="image" src="a.jpg"/>

html中其它的常用标签的使用

  • b –加粗
  • s –删除线
  • u –下划线
  • i –斜体
  • pre –原样输出
  • sub和sup –下标和上标
  • div –自动换行
  • span –在一行显示

html头标签的使用

  • html两部分组成 head和body

    • 在head里面的标签就是头标签
    • title标签：表示在标签上显示的内容
    • <meta>标签：设置页面的一些相关的内容
      • <meta name="keywords" content="学习,熊出没"> –以前的搜索引擎检索方式
      • <meta http-equiv="refresh" content="3; url=https://baidu.com"/> –三秒跳转
    • base标签：设置超链接的基本设置
      • 可以统一设置超链接的打开方式<base target="_blank" /> –设置全文超链接以新窗口打开
    • link标签：引入外部文件
      • 可以使用link标签引入css文件

框架标签的使用

使用框架标签的时候，不能写在body里面，使用了框架标签，需要把body去掉

  • <frameset>标签

    • rows:按照行进行划分 <frameset rows="80, *">
    • cols:按照列进行划分 <frameset cols="80, *">
  • <frame>标签
    • 具体显示的页面

      • <frame name="lower_left" src="b.html">

后记

以上内容只是个人学习的记录，其他未涉及的内容都可以在网络上或手册上查找的到。

另：此笔记是由markdown编写，用sublime编译成的html文档

JavaWeb_01_html基本学习的更多相关文章

  1. 从直播编程到直播教育：LiveEdu.tv开启多元化的在线学习直播时代

    2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...

  2. Angular2学习笔记（1）

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  3. ABP入门系列（1）——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  4. 消息队列——RabbitMQ学习笔记

    消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...

  5. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  6. Unity3d学习 制作地形

    这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...

  7. 《Django By Example》第四章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...

  8. 菜鸟Python学习笔记第一天：关于一些函数库的使用

    2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...

  9. 多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁，Atomic原子类)

    前言:刚学习了一段机器学习,最近需要重构一个java项目,又赶过来看java.大多是线程代码,没办法,那时候总觉得多线程是个很难的部分很少用到,所以一直没下决定去啃,那些年留下的坑,总是得自己跳进去填 ...

随机推荐

  1. 关于在VS 2013 Reshaper 中不能使用Alt+Enter 的解决

    新装Vs 2013 ,感觉还是不错,但是很恶心的是居然,Resharper 万能的快捷键不能用,让洒家真是恶心极了.   通过Google 在StackOverflow 上发现了解决方法,但好像看他的 ...

  2. 将utc时间格式化的代码

    /** * 对Date的扩展,将 Date 转化为指定格式的String * 月(M).日(d).12小时(h).24小时(H).分(m).秒(s).周(E).季度(q) 可以用 1-2 个占位符 * ...

  3. STM32F0 中 ADC 多通道转换结果相同的问题

    前言 前段时间调试 STM32F030 的 ADC,在多通道转换时遇到了奇怪的问题,使用官方的例程和库函数连续转换多个 ADC 通道,得到的几个通道的结果是一样的,解决办法参考了 关于STM32F0系 ...

  4. 关于：“无法序列化会话状态。在“StateServer”或“SQLServer”模式下，...的问题

    关于:“无法序列化会话状态.在“StateServer”或“SQLServer”模式下,...的问题 错误描述: 无法序列化会话状态.在“StateServer”或“SQLServer”模式下,ASP ...

  5. 选择排序 Selection Sort

    选择排序 Selection Sort 1)在数组中找最小的数与第一个位置上的数交换: 2)找第二小的数与第二个位置上的数交换: 3)以此类推 template<typename T> / ...

  6. vim(二) 代码查看

    ctags,cscope 查看代码 生成cscope脚本文件 #!/bin/bash if [ -f "*.cscope" ]; then rm -fr *.cscope fi i ...

  7. pyquery的简单操作

    一.初始化 1.html初始化 html = ''' <div> <ul> <li class="item-0">first item</ ...

  8. JavaScript学习笔记1_基础与常识

    1.六种数据类型 5种基础的:Undefined,Null,Boolean,Number,String(其中Undefined派生自Null) 1种复杂的:Object(本质是一组无序键值对) 2.字 ...

  9. 抽象工厂方法模式（Abstract Factory Pattern）

    Provide an interface for creating families of related or dependent objects without specifying their ...

  10. MyISAM的前缀压缩索引在索引块中的组织方式

    纯粹自己的理解,哪位大佬看到了还请指正. 首先贴一张<高性能MySQL>中的一段话: 这句话的意思是说,MyISAM使用b+树组织索引.也就是说无论索引压缩与否,组织方式一定是B+树. 下 ...