我的传智播客之javaweb_day01学习总结

在反复学习javaweb的过程中,我越来越迷失方向。所以决定在这里写个博客,记录一下自己在看传智播客有关javaweb的视频中的想法或总结。我将在此针对每天他所录制的视频整理一下自己的思路。


html简介

html,即超文本标记语言(HyperText Marking Language)。所谓超文本,就是超出文本的范畴。例如在记事本程序中,你可能很难去改变某一个字的颜色或字体,但利用html可以方便的改变文本内容的样式。

html的操作思想

这是一个很重要的概念,听了老师的演讲,才恍然大悟。html通过标签(tag)将数据包装(封装)起来,通过改变标签的属性来改变数据的样式。那么那些标签就相当于是一个容器,改变容器属性,使其内容改变。

文字标签和注释标签

  • 文字标签
<font size="1" color="blue">文字标签font>

size属性可以改变字体的大小,范围为1-7。
color属性可以改变字体的颜色,可以用颜色表示(但不推荐),还可以用#xxxxxx(十六进制数)表示颜色。

  • 注释标签

注释标签内的内容不会被浏览器所解释,但是在浏览器中打开源文件可以看到注释内容。

标题标签和水平线标签和特殊字符

  • 标题标签

    ........

<h1>标签便签h1>

标题标签表示标题,从

,大小依次变小,特点:加粗换行。

  • 水平线标签

color="blue" size="5"/>

效果显示:


跟字体一样都可以改变颜色和大小(ps: 好像在此编译器中没改变到水平线的大小)

  • 特殊字符(转义字符):
    所谓转义字符,就是在浏览器中无法显示字符,例如<,>,©等一系列的特殊字符,需要转义才可以在浏览器中显示。
<h3><html>h3>

效果显示:

通过使用转义字符就可以显示特殊字符了。

列表标签

列表标签有三种,分别以标签形式表现:

  • 定义列表
<dl>
    <dt>
        公司
    dt>
    <dd>
        人事部
    dd>
    <dd>
        财务部
    dd>
dl>

效果显示:

公司
人事部
财务部

可以看到,定义列表用缩进作为列表的显示方式。

  • 有序列表
<ol>
    <li>
        人事部
    li>
    <li>
        财务部
    li>
ol>

效果显示:

  1. 人事部
  2. 财务部

有序列表,通过序号来表示列表的形式。

  • 无序列表
<ul>
    <li>
        人事部
    li>
    <li>
        财务部
    li>
ul>

效果显示:

  • 人事部
  • 财务部

无序列表的显示,像一颗颗子弹头。

图像标签

<img src="xxx.jpg" width="200" height="300" alt="这是一个图片"/>

讲到图像,就要讲到路径的问题了,但是我想将路径带到下一主题来说。
src:表示图像的所在路径;
widthheight表示图像的宽度和高度;
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 name="top"> a>
<a href="#top"> a>

使用这种方式可以定位到当前资源的某个位置,如回到顶部功能。

表格标签

<table>
    <tr>
        <th colspan="2">table heading1th>
        <td rowspan="3">table data1td>
    tr>
    <tr>
        <th>table heading2th>
        <td>table data2td>
    tr>
    <tr>
        <th>table heading3th>
        <td>table data3td>
    tr>
table>
table heading1 table data1
table heading2 table data2
table heading3 table data3



我想编译器应该是不能显示html的一些特性了。

bordercellspacing等属性,border用于显示每个单元格和外部表格的边界的大小,cellspacing用于显示每个单元格之间的间隙。
标签默认居中加粗,我认为更适用于表格中的标题而不是内容。

表单标签

<form action="提交到的地址" method="get">
form>

get与post的区别:
get:表单内的数据将会显示到action地址后,不安全,传输量小。
post:表单内的数据将添加到消息体内,安全,理论上传输无限制。


这。。关于表单的输入项有点多啊

首先先总结一下,每个表单标签都应有一个name属性用以传递数据到服务器。

  • 输入标签

文本框:

type="text" name="xxx"/>

以下的输入标签格式大体一致,只列出type属性:passwordradiocheckboxresetbuttonsubmitimagefilehidden


radiocheckbox:需要指出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>

标签换行,不换行。用于css的样式。



这一次的总结,我以为可以总结得很快、很全。但是写下来发现,没有我想像的全面,而且也耗费了不少时间。从效果看来,总结显得有些急促,总结时还是没有太到位,如一些基本知识没有提及,该深入的也没有深入。在看视频时,我应边看边做笔记,这样可以有效的提取关键知识点,在总结时可以做到巩固基础,同时节省时间。万事开头难,希望可以坚持下去。

你可能感兴趣的:(html,传智播客,视频)