首页 > 代码库 > 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
–原样输出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, *">
- rows:按照行进行划分
<frame>
标签- 具体显示的页面
<frame name="lower_left" src="http://www.mamicode.com/b.html">
- 具体显示的页面
后记
以上内容只是个人学习的记录,其他未涉及的内容都可以在网络上或手册上查找的到。
另:此笔记是由markdown编写,用sublime编译成的html文档
JavaWeb_01_html基本学习
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。