首页 > 代码库 > JavaWeb_01_html基本学习

JavaWeb_01_html基本学习

<style>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 }</style>

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="http://www.mamicode.com/图片的路径" width="" height="" />
  • alt:浏览器的兼容性很差

路径(相对路径)

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

超链接标签

<a href="http://www.mamicode.com/路径">显示在页面上的内容</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="http://www.mamicode.com/0">请选择</option>
            <option value="http://www.mamicode.com/1991">1991</option>
            <option value="http://www.mamicode.com/1991">1992</option>
            <option value="http://www.mamicode.com/1991">1993</option>
            <option value="http://www.mamicode.com/1991">1994</option>
        </select>
        
      • 文本域
        <textarea cols="10" rows=""></textarea>
      • 隐藏项(不会显示在页面上,但是存在于html代码里面)
        <input type="hidden"/>
      • 提交按钮
        <input type="submit"/>
        <input type="submit" value="http://www.mamicode.com/注册"/>
      • 使用图片提交
        <input type="image" src="http://www.mamicode.com/a.jpg"/>

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

  • b –加粗
  • s –删除线
  • u –下划线
  • i –斜体
  • pre –原样输出
  • subsup –下标和上标
  • 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="http://www.mamicode.com/b.html">

后记

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

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

JavaWeb_01_html基本学习