JavaWeb_01_html基本学习

body .markdown-body { padding: 30px }
.markdown-body { color: #333333; overflow: hidden; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; font-size: 16px; line-height: 1.6 }
.markdown-body a { background: transparent }
.markdown-body a:active,.markdown-body a:hover { outline: 0 }
.markdown-body b,.markdown-body strong { font-weight: bold }
.markdown-body mark { background: #ff0; color: #000; font-style: italic; font-weight: bold }
.markdown-body sub,.markdown-body sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }
.markdown-body sup { top: -0.5em }
.markdown-body sub { bottom: -0.25em }
.markdown-body h1 { font-size: 2em; margin: 0.67em 0 }
.markdown-body img { border: 0 }
.markdown-body hr { height: 0 }
.markdown-body pre { overflow: auto }
.markdown-body code,.markdown-body kbd,.markdown-body pre,.markdown-body samp { font-family: monospace, monospace; font-size: 1em }
.markdown-body input { color: inherit; font: inherit; margin: 0 }
.markdown-body html input[disabled] { cursor: default }
.markdown-body input { line-height: normal }
.markdown-body input[type="checkbox"] { padding: 0 }
.markdown-body table { border-collapse: collapse; border-spacing: 0 }
.markdown-body td,.markdown-body th { padding: 0 }
.markdown-body .codehilitetable { border: 0; border-spacing: 0 }
.markdown-body .codehilitetable tr { border: 0 }
.markdown-body .codehilitetable pre,.markdown-body .codehilitetable div.codehilite { margin: 0 }
.markdown-body .linenos,.markdown-body .code,.markdown-body .codehilitetable td { border: 0; padding: 0 }
.markdown-body td:not(.linenos) .linenodiv { padding: 0 !important }
.markdown-body .code { width: 100% }
.markdown-body .linenos div pre,.markdown-body .linenodiv pre,.markdown-body .linenodiv { border: 0 }
.markdown-body .code div pre,.markdown-body .code div { border: 0 }
.markdown-body * { }
.markdown-body input { font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.4 }
.markdown-body a { color: #4183c4; text-decoration: none }
.markdown-body a:hover,.markdown-body a:focus,.markdown-body a:active { text-decoration: underline }
.markdown-body hr { height: 0; margin: 15px 0; overflow: hidden; background: transparent; border: 0; border-bottom: 1px solid #ddd }
.markdown-body hr::before,.markdown-body hr::after { display: table; content: " " }
.markdown-body hr::after { clear: both }
.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6 { margin-top: 15px; margin-bottom: 15px; line-height: 1.1 }
.markdown-body h1 { font-size: 30px }
.markdown-body h2 { font-size: 21px }
.markdown-body h3 { font-size: 16px }
.markdown-body h4 { font-size: 14px }
.markdown-body h5 { font-size: 12px }
.markdown-body h6 { font-size: 11px }
.markdown-body blockquote { margin: 0 }
.markdown-body ul,.markdown-body ol { padding: 0; margin-top: 0; margin-bottom: 0 }
.markdown-body ol ol,.markdown-body ul ol { list-style-type: lower-roman }
.markdown-body ul ul ol,.markdown-body ul ol ol,.markdown-body ol ul ol,.markdown-body ol ol ol { list-style-type: lower-alpha }
.markdown-body dd { margin-left: 0 }
.markdown-body code,.markdown-body pre,.markdown-body samp { font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px }
.markdown-body pre { margin-top: 0; margin-bottom: 0 }
.markdown-body kbd { background-color: #e7e7e7; background-image: linear-gradient(#fefefe, #e7e7e7); background-repeat: repeat-x; border: 1px solid #cfcfcf; color: #000; padding: 3px 5px; line-height: 10px; font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace; display: inline-block }
.markdown-body>*: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 }
.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% }
.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) }
.markdown-body code::before,.markdown-body code::after { letter-spacing: -0.2em; content: "?" }
.markdown-body pre>code { padding: 0; margin: 0; font-size: 100%; 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 }
.markdown-body .codehilite pre { margin-bottom: 0 }
.markdown-body pre { }
.markdown-body pre code { display: inline; max-width: initial; padding: 0; margin: 0; overflow: initial; line-height: inherit; background-color: transparent; border: 0 }
.markdown-body pre code::before,.markdown-body pre code::after { content: normal }
.markdown-body .admonition { position: relative; 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; line-height: 1.5; color: #333; position: absolute; left: 0; top: 0; padding-top: 10px; padding-left: 10px }
.markdown-body .admonition::before { content: "??"; color: 333 }
.markdown-body .attention::before { content: "??"; color: #a6d796 }
.markdown-body .caution::before { content: "??"; color: #d7a796 }
.markdown-body .hint::before { content: "??"; color: #96c6d7 }
.markdown-body .danger::before { content: "??"; color: #c25f77 }
.markdown-body .question::before { content: "??"; color: #96a6d7 }
.markdown-body .note::before { content: "??"; 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 }
.markdown-body .progress { display: block; width: 300px; margin: 10px 0; height: 24px; background-color: #ededed; position: relative }
.markdown-body .progress-label { position: absolute; text-align: center; font-weight: bold; width: 100%; margin: 0; line-height: 24px; color: #333; white-space: nowrap; overflow: hidden }
.markdown-body .progress-bar { height: 24px; float: left; background-color: #96c6d7; 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 { }
.markdown-body .gloss .progress-bar { }
.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 }
.headeranchor::before { content: "?" }
.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 }

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:浏览器的兼容性很差

路径（相对路径）

• 在同一级目录：直接写
• 在下一层目录：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文档