JavaWeb中用到的HTML的重要知识点

JavaWeb中用到的HTML的重要知识点

1.网页的构成

1.1现在全歼开发的整体架构主要分为	B/S架构和C/S架构:
	* b/s: 浏览器/服务器(Java用的较多)
	* c/s:客户端/服务器

客户端:需要安装在系统丽,才可以使用(耗内存)
浏览器:浏览网页,读取HTML并显示
服务器:处理浏览器的请求
1.2 B/S和C/S优劣
*b/s只要能上网就能使用,因为基本每台电脑都会由浏览器,维护方便。
*c/s必须安装在系统中,安装成功才可以使用,在新的系统中没有安装不能使用,便捷性差,维护成本高。
1.3网页
浏览器中的显示内容,浏览器是网页的展示器。编写好的网页,放在浏览器中既可以运行,编写网页我们使用的就是HTML语言。
1.4网页的构成:
在这里插入图片描述

2.HTML简介

  • HTML 是用来描述网页的一种语言。
    - HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • 超文本就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)(不需要运行)
  • 标记语言是一套标记标签 (markup tag),由一组<>包围的关键字
  • HTML网页的后缀名一般为.html
  • HTML 使用标记标签来描述网页
  • 在这里插入图片描述HTML文件的结构:
    • 为HTML页面中的根标签,所有的HTML网页中的标签都在中。
  • 这里标签用于定义文档的头部,它是所有头部元素的容器。头部元素有

- 3.HTML语法:

标签的语法

  • 标签由英文尖括号 < 和 > 括起来,如:
  • html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多一个 / ,;还有一些是自结束标签,如:
  • 标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:
    里嵌套

    ,那么

    必须放在
    的前面。如:

  • 注释是不可以嵌套的,如:<!-- -->
  • HTML标签不区分大小写,

    是一样的,但万维网联盟(W3C)建议小写
    元素模型
    在这里插入图片描述

4.HTML常用的标签

4.1标题标签

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>  
//h1-h6标签大小是递减的

-默认占用浏览器的一整行,并且前后要空一行

4.2 段落标签

<p>两个黄鹂鸣翠柳</p>
<p>是否还没女朋友</p>
  • 段落标签也会独占浏览器的一行,而且前后还会空出一行。
  • 使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br />标签代替它!

- 4.3 换行标签
<br />:是个自结束标签

<br />

4.4 加粗标签

<b>天王盖地虎</b>

4.5 无序列表

<ul type="square">
    <!-- 定义导航栏 -->
    <li>网页</li>
	<li>新闻</li>
	<li>视频</li>
	<li>贴吧</li>
</ul>

4.6 有序列表

<ol>
	<li>单身久了,坐地铁女孩蹭下肩膀,你连你们的孩子叫什么名字都想好了</li>
    <li>太久没接吻,吃个鸭舌都能感到温柔</li>
    <li>太久没牵手,拿着泡椒凤爪心都会颤抖</li>
</ol>

4.7 图片标签

<img alt="“ src="" title=""/>
  • alt:图片无法显示时显示的描述性文字
  • src:图片的地址(或路径)。这里分为相对路径和绝对路径。
  • width和height:设置图片的宽度和高度
  • (了解) title:鼠标放在图片上时显示的描述性文字
    - 使用相对路径查找目标资源心得
  • 目标文件与当前文件在同一目录下,直接查找使用。---->. ./
  • 目标文件与当前文件不在同一目录下,先找目标文件父包,再找目标文件 ----> …/…/
    • 如:父包也不与当前文件在同包下,将父包当成目标文件,继续找父包的父包。以此类推,找到WebContent根目录为止。
    • 在这里插入图片描述4.8超链接
<a href="http://www.baidu.com" target="_blank"></a>
  • href:指向一个链接地址
  • target:定义被链接的文档在何处显示。
    • 值为”_self”时在向当前窗口打开新的网页(默认)
    • 值为”_blank”时在新的窗口打开

4.9 转义字符

  • 当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。即,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
  • 在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
  • 如果想表示多个空格,需要使用如下的转义字符。
  • 在这里插入图片描述说明1:如需显示小于号,我们必须这样写:< 或

说明2:使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。

4.10 div标签

<div>...</div>
  • div是html中最灵活最重要的元素,div就像一个容器,里面可以装很多内容。本身没有特殊的语义。
  • 它是块级元素,会占用网页的一行。
  • Div的主要作用:可以通过调整自己的样式来完成网页的复杂布局

4.11 内联框架(了解)

<iframe src="1.html" name=""></iframe>
  • src:一个网页的地址
  • name: iframe的名字,当标签的target属性值为iframe的name时,超链接的目标页面会在iframe中打开

4.12 其它标签

标签
-标签是是内联元素,没有语义的,它的作用就是为了设置单独的样式用的

<span>标签是是**内联元素**,没有语义的,它的作用就是为了设置单独的样式用的

标签

<font face="宋体" color="red" size="7" >我是字体标签</font>

分割线标签


标签在 HTML 页面中创建水平分割线。

补充说明:

**块级元素:**各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。width、height、padding、margin有效。

**内联元素:**在一条直线上排列,都是同一行的,水平方向排列。设置width、height、padding、margin无效。

5.HTML中的表格(重点标签)

语法:

<table border="1" width="60%" height="300px" align="center">
    <tr>
        <th>表头</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
<!--    第一行-->
    <tr align="center">
        <!--第一行第1列-->
        <td>11</td>
        <!--第一行第2列-->
        <td>12</td>
        <!--第一行第3列-->
        <td>13</td>
    </tr>
<!--    第二行-->
    <tr align="center">
        <td>21</td>
        <td>22</td>
        <td>23</td>
    </tr>
</table>

属性:
- rowspan跨行
- colspan:跨列
- border:设置表格边框
- width:设置表格宽
- height:设置表格高
- align:center或left或right:设置表格水平对齐方式

注意:使用跨行或跨列时,需要将被包含的单元格删除掉

<table border="1" width="60%" height="300px" align="center">
    <tr>
        <th>表头</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
<!--    第一行-->
    <tr align="center">
        <!--第一行第1列-->
        <td colspan="2">1112</td>
        <!--第一行第2列-->
<!--        <td>12</td>-->
        <!--第一行第3列-->
        <td>13</td>
    </tr>
<!--    第二行-->
    <tr align="center">
        <td rowspan="2">2131</td>
        <td>22</td>
        <td>23</td>
    </tr>
    <tr align="center">
<!--        <td>31</td>-->
        <td rowspan="2" colspan="2">32423343</td>
<!--        <td>33</td>-->
    </tr>
    <tr align="center">
        <td>41</td>
<!--        <td>42</td>-->
<!--        <td>43</td>-->
    </tr>
</table>

6.表单(也是重点标签)

语法:

<form action="#" method="get">
    用户名:<input type="text" name="username"><br>&emsp;码:<input type="password" name="pwd"><br>
    <input type="submit" value="登录">
</form>

属性:
- action:表单提交路径
- method:表单提交方式,get|post
表单项(子标签):

<input type="text" name="username">
属性:
		type:设置表单项类型
			- text:文本框
			- password:密码框
			- radio:单选框
注意:
			使用单选框时,必须将name属性值设置一致(相当于一组单选框),才可以实现单选的效果。
			单选框必须提供value属性值。
- checkbox:复选框,注意事项与单选框注意事项一致。
- reset:重置按钮
- submit:提交按钮,单击submit按钮,默认触发表单提交事件。
- button:普通按钮(了解)
- image:图片按钮(了解)
- file:文件域,文件上传时使用当前表单项
- hidden:隐藏域(提交表单时需要指定数据,但不希望这个数据显示浏览器
- - name:设置表单项名称,如需要提交表单项数据时,必须指定name属性值。
- value:设置表单项值,如当前表单项为按钮类型,此时value设置按钮的文本值。
- checked:设置单选框&复选框默认选中。只要有checked属性,就会默认选中状态。

<option>文本</option></select>:下拉列表(下拉框)
注意:option中如不指定value属性值时,会默认将文本作为value。

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页