在反复学习javaweb的过程中,我越来越迷失方向。所以决定在这里写个博客,记录一下自己在看传智播客有关javaweb的视频中的想法或总结。我将在此针对每天他所录制的视频整理一下自己的思路。
html简介
html,即超文本标记语言(HyperText Marking Language)。所谓超文本,就是超出文本的范畴。例如在记事本程序中,你可能很难去改变某一个字的颜色或字体,但利用html可以方便的改变文本内容的样式。
html的操作思想
这是一个很重要的概念,听了老师的演讲,才恍然大悟。html通过标签(tag)将数据包装(封装)起来,通过改变标签的属性来改变数据的样式。那么那些标签就相当于是一个容器,改变容器属性,使其内容改变。
文字标签和注释标签
- 文字标签
<font>
:
<font size="1" color="blue">文字标签</font>
size属性可以改变字体的大小,范围为1-7。
color属性可以改变字体的颜色,可以用颜色表示(但不推荐),还可以用#xxxxxx(十六进制数)表示颜色。
- 注释标签
<!-- -->
:
<!-- 注释标签 -->
注释标签内的内容不会被浏览器所解释,但是在浏览器中打开源文件可以看到注释内容。
标题标签和水平线标签和特殊字符
- 标题标签
<h1>........<h6>
:
<h1>标签便签</h1>
标题标签表示标题,从<h1>
到<h6>
,大小依次变小,特点:加粗换行。
- 水平线标签
<hr/>
:
<hr color="blue" size="5"/>
效果显示:
跟字体一样都可以改变颜色和大小(ps: 好像在此编译器中没改变到水平线的大小)
- 特殊字符(转义字符):
所谓转义字符,就是在浏览器中无法显示字符,例如<,>,©等一系列的特殊字符,需要转义才可以在浏览器中显示。
<h3><html></h3>
效果显示:
<html>
通过使用转义字符就可以显示特殊字符了。
列表标签
列表标签有三种,分别以标签形式表现:
- 定义列表
<dl>
<dt>
公司
</dt>
<dd>
人事部
</dd>
<dd>
财务部
</dd>
</dl>
效果显示:
-
公司
- 人事部
- 财务部
可以看到,定义列表用缩进作为列表的显示方式。
- 有序列表
<ol>
<li>
人事部
</li>
<li>
财务部
</li>
</ol>
效果显示:
- 人事部
- 财务部
有序列表,通过序号来表示列表的形式。
- 无序列表
<ul>
<li>
人事部
</li>
<li>
财务部
</li>
</ul>
效果显示:
- 人事部
- 财务部
无序列表的显示,像一颗颗子弹头。
图像标签
<img src="xxx.jpg" width="200" height="300" alt="这是一个图片"/>
讲到图像,就要讲到路径的问题了,但是我想将路径带到下一主题来说。
src
:表示图像的所在路径;
width
和height
表示图像的宽度和高度;
alt
是指图像的概述,如果把鼠标移到图像片刻,便会有相应提示,还有如果当无法显示图像时,alt就能给我们相应的提示。
路径的介绍
- 绝对路径
绝对路径,就是指资源所在的完整路径。例如:
C:\Users\User\AppData\Local\xxx.jpg
相对路径
而相对路径,就是指当前目录下相对于该资源的路径。找出路径相同的部分,通过比较得出相对路径。
将此路径
C:\Users\User\AppData\Local\
作为当前目录。
1.资源就在当前目录下
xxx.jpg
2.资源在目录的下级
a/xxx.jpg
3.资源在目录的上级
../xxx.jpg
超链接标签
- 链接资源
<a href="链接到资源的路径">显示在页面上的内容</a>
正常的超链接表示方法。
<a href="#">空链接</a>
用占位符(#)表示空的链接,若写成<a href="">空链接</a>
会打开本地的资源目录。所以在不用时写上#
。
- 定位资源
<a name="top"> </a>
<a href="#top"> </a>
使用这种方式可以定位到当前资源的某个位置,如回到顶部功能。
表格标签
<table>
<tr>
<th colspan="2">table heading1</th>
<td rowspan="3">table data1</td>
</tr>
<tr>
<th>table heading2</th>
<td>table data2</td>
</tr>
<tr>
<th>table heading3</th>
<td>table data3</td>
</tr>
</table>
table heading1 | table data1 | |
---|---|---|
table heading2 | table data2 | |
table heading3 | table data3 |
我想编译器应该是不能显示html的一些特性了。<table>
有border
,cellspacing
等属性,border
用于显示每个单元格和外部表格的边界的大小,cellspacing
用于显示每个单元格之间的间隙。<th>
标签默认居中加粗,我认为<th>
更适用于表格中的标题而不是内容。
表单标签
<form action="提交到的地址" method="get">
</form>
get与post的区别:
get:表单内的数据将会显示到action地址后,不安全,传输量小。
post:表单内的数据将添加到消息体内,安全,理论上传输无限制。
这。。关于表单的输入项有点多啊
首先先总结一下,每个表单标签都应有一个name属性用以传递数据到服务器。
- 输入标签
文本框:
<input type="text" name="xxx"/>
以下的输入标签格式大体一致,只列出type属性:password
,radio
,checkbox
,reset
,button
,submit
,image
,file
,hidden
。
radio
和checkbox
:需要指出value
值,可以用checked="checked"
来选中默认选项。
reset
:重置表单数据但不会改变默认选项。
image
:一样有src
属性,但用于提交表单。
file
:用于上传文件。
- 下拉框
<select name="xxx">
<option value="xxx" selected="selected"></option>
<option value="xxx"></option>
<select
- 文本域
<textarea rows="3" cols="4"></textarea>
<div>
和<span>
<div>
标签换行,<span>
不换行。用于css的样式。
这一次的总结,我以为可以总结得很快、很全。但是写下来发现,没有我想像的全面,而且也耗费了不少时间。从效果看来,总结显得有些急促,总结时还是没有太到位,如一些基本知识没有提及,该深入的也没有深入。在看视频时,我应边看边做笔记,这样可以有效的提取关键知识点,在总结时可以做到巩固基础,同时节省时间。万事开头难,希望可以坚持下去。