欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JavaWeb学习笔记(1)__HTML篇

程序员文章站 2022-06-11 15:46:40
...

JavaWeb自学笔记

目录结构

1.HTML篇

第一章 HTML概述

1.基本标记

<!DOCTYPE html> 文档类型说明
<meta> 提供页面的元信息
<meta charset="utf-8" > 字符集
<meta name="keywords" content="关键字,keywords" /> 搜索引擎的关键字（现被部分搜索引擎忽略）
<meta name="decription" content="网页的介绍"> 页面描述（搜索引擎结果页显示的一段文字片段）
<meta http-equiv="refresh" content="秒 ;[url =网址]" /> 页面定时跳转
<!--注释-->

2.文本显示

1.常用的特殊符号

JavaWeb学习笔记(1)__HTML篇

注：文字与文字之间的空格超过一个，多余的会被忽略，可以使用全角空格，尽量避免使用多个“&nbsp”表示多个空格，因为不同浏览器对空格的实现距离是不一样的。

  1. 文本的特殊样式
<b> </b> 粗体
<em> </em> 强调方式显示
<strong> </strong>加强调方式显示
<i> </i> 斜体
<sup> </sup> 上标 2²
<sub> </sub> 下标 log以2为底
<br/> 换行
<p> </p> 段落
<h1> </h6> 标题
  1. 列表
<!--无序列表的嵌套-->
<ul>  <!--无序列表-->
    <li>第一章</li> <!--无序列表项-->
    <li>第二章
        <ul>
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
    <li>第三章
    	<ul>
            <li>3.1</li>
        </ul>
    </li>
</ul>

效果演示：

  • 第一章
  • 第二章
    • 2.1
    • 2.2
  • 第三章
    • 3.1
<!--有序列表-->
<ol>
    <li>1</li>
    <li>2</li>
</ol>

**注：**一般情况下，段落间距离！=段落内行间距 （用CSS设置）

3.图像显示

支持：GIF，JPEG，PNG，BMP，TIFF 等

绝对路径

相对路径："…" 上一级目录，“…/…” 上上级目录

“ \ ” 本地分隔符 ; “ / ” 网路分隔符

<img src="233.jpg" width="200" height="300" alt="这是图片">
1.只设置图片宽度/高度的一个属性时，相当于对图片进行等比例缩放
2.宽度/高度，用数值代表绝对尺寸，用百分比代表相对尺寸
3.alt:当鼠标放在图片上时，显示文字提示

4.URL基础

URL：统一资源定位符 = 协议 + 主机名 + 文件夹名 + 文件名

绝对URL：访问非同一台服务器上的资源

相对URL：访问同一台服务器上的资源

  1. 超链接标记
<!--单击文字跳转-->
<a href="#">单击文字跳转</a>

<!--单击图片跳转-->
<a href="#">
    <img src="#">
</a> 

<!--发送邮件-->
<a href="matio:aaa@qq.com">邮箱</a> <!--matio:文件读写库？-->

<!--打开方式-->
<a href="#" target="_black"></a> 在新的窗口打开页面
<a href="#" target="_self"></a> 在当前窗口打开页面（默认）

注：在IE浏览器中,图片超链接会增加边框，而火狐浏览器并不会

  1. 创建热点区域

JavaWeb学习笔记(1)__HTML篇

注：1.必须先插入图片，必须增加 usemap 属性，属性值必须以 # 开头

​ 2.map只有一个属性 id ,必须与 usemap对应

JavaWeb学习笔记(1)__HTML篇

5.浮动框架

在HTML中已经不支持 frameset 框架，但依然支持 iframe 框架，浮动框架就是在 一个网页的任意一个位置中在插入一个窗口，默认新插入的窗口 为 220X120 像素，用CSS修改

<iframe src="http://www.baidu.com"></iframe>

第二章 表格表单

1.使用表格

表格一般用于显示数据，不建议用于布局

在HTML5中，不在支持<table>的任何属性

只有 <td> 具有 colspan ,rowspan 属性

<table>
    <tr> <!--第一行-->
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr> <!--第二行-->
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

合并单元格

1.左右合并 colspan

2.上下合并 rowspan

<table>
    <tr> <!--合并行-->
    	<td colspan="2">12</td>
        <td>3</td>
    </tr>
    <tr> <!--合并列-->
        <td rowspan="2">47</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>8</td>
        <td>9</td>
    </tr>
</table>
12 3
47 5 6
8 9 
<table>
   <tr> <!--同时合并行和列-->
   	<td colspan="2" rowspan="2">1245</td>
       <td>3</td>
   </tr>
   <tr>
       <td>6</td>
   </tr>
   <tr>
       <td>7</td>
       <td>8</td>
       <td>9</td>
   </tr>
</table>
1245 3
6
7 8 9

**注：**对于合并单元格的实质就是把某些单元格丢掉，例如上下合并，那么下面那个被合并的单元格不必再写

完整的表格标记

表头\，主体\，脚注\

可以使用 <th> 定义表格内的表头单元格

表的标题<caption>

<table>
	<caption>学生成绩单</caption> <!--标题-->
    <thread> <!--表头-->
        <tr>
            <th>姓名</th><th>学号</th><th>成绩</th>
        </tr>
    </thread>
    <tfoot> <!--脚注-->
        <tr>这是一个脚注</tr>
    </tfoot>
    <tbody> <!--主体-->
    	<tr>
            <td>张三</td><td>001</td><td>100</td>
        </tr>
        <tr>
            <td>李四</td><td>002</td><td>95</td>
        </tr>
        <tr>
            <td>王五</td><td>003</td><td>99</td>
        </tr>
    </tbody>
</table>
这是一个脚注
学生成绩单
姓名 学号 成绩
张三 001 100
李四 002 95
王五 003 99

2.使用表单

<form action="url" method="get|post" enctype="mine">
    action:指定处理表单的格式，可以是URL或电子邮件地址
    method:指明提交表单的HTTP方法
    enctype:指明用来把表单提交给服务器时的互联网媒体形式
</form>

<form>
	
    <!--密码框-->
    <input type="submit" value="登录"> <!--提交按钮-->
</form>

<!--文本框-->
<input type="text" name="..." size="..." maxlength="..." value="...">

name属性定义名称，必须独一无二以保证数据的准确采集
size属性定义文本框的宽度，单位：单个字符宽度
maxlength属性定义最多输入的字符数
value属性定义文本框的初始值

<!--文本域-->
<textarea " name="..." rows="..." cols="..." wrap="..." > 默认值</textarea>
textarea不使用input控件
cols属性定义宽度
rows属性定义高度
wrap属性定义输入内容大于文本域时显示的方式  
                                                       
<!--密码框-->
<input type="password" name="..." size="..." maxlength="...">
密码框的文字不能以明文显示

<!--单选按钮-->
<input type="radio" name="..." value="...">
单选按钮是以组为单位使用的，同一个name为同一组

<!--多选框-->
<input type="checkbox" name="..." value="...">
单选按钮也是以组为单位使用的，同一个name为同一组

<input type="radio" name="sex" value="a1">男性
<input type="radio" name="sex" value="a2">女性
<input type="radio" name="sex" value="a3">保密
<input type="checkbox" name="book" value="b1">网络编程<br>
<input type="checkbox" name="book" value="b2">设计软件<br>
<input type="checkbox" name="book" value="b3">黑客攻防<br>

<!--下拉列表-->
<select name="..." size="..." multiple>
<option value="..." selected>男性
<option value="...">女性
</select>

size属性定义当前面下拉列表显示的行数，一般size="1"
multiple属性表示可以多选（按住ctrl多选）如果不设置则只能单选，一般不设置
value属性定义选择项的值
selected属性表示默认已选本选项

JavaWeb学习笔记(1)__HTML篇

<!--普通按钮-->普通按钮用来控制其他定义了脚本的处理工作
<input type="button" name="..." value="..." onclick="...">
name属性定义按钮的名称
value属性定义按钮上显示的文字
onclick属性表示单击行为，也可以通过指定脚本函数来定义按钮的行为
一般用JS设置按钮的单击行为

<!--提交按钮-->提交按钮用来将输入的信息提交到服务器
<input type="submit" name="..." value="...">

<!--重置按钮-->重置按钮用来清空表单中输入的信息
<input type="reset" name="..." value="...">

表单高级元素的使用

HTML5中还具有一些高级属性，包括url,email,time,range,search等

<!--URL属性-->
<input type="url" name="..."/>
可是使用：
max属性设置其最大值
min属性设置其最小值
step属性设置合法的数字间隔
value属性设置默认值

<!--email属性-->
<input type="email" name="..."/>
添加提交按钮后，如果输入的邮箱地址不合法，点击提交按钮后出现提示信息

<!--date属性-->
<input type="date" name="..."/>
date属性可选日月年，也可设置为month,week等，具体见表6-1

<!--number属性-->
<input type="number" name=".."/>
用户可以直接输入数字，或调整旁边的微调框调整数字的大小
建议使用max和min属性规定可输入的最大值，最小值

<!--range控件-->
<input type="range" name="" min="" max=""/>
range属性可以显示为一个滚动的控件,可用min,max,step设置控件范围
默认标记在中间，如果min>max,那么可使用反向滚动轴，但部分浏览器不支持

<!--required属性-->
<input type="text" name="user" required="required">
required="required"表示为此区域为必填信息，不填写提交时会显示错误信息
不写required则默认为可以不填写

<!--上传文件-->
<input type="file" name="..." size="..." maxlength="...">
type="file"定义为文件上传框
name属性为文件上传框的名称
上传文件后并不在当前页面显示，具体内容用到CSS和JS

<!--一个案例-->
<form>
		你的姓名&nbsp<input type="text" name="username" required="required"><br>
		你的博客&nbsp<input type="url" name="userurl"/><br>
		你的邮箱&nbsp<input type="email" name="useremail"/><br>
		你的生日&nbsp<input type="date" name="userdata"/><br>
		你的年龄&nbsp<input type="number" name="shuzi" min="0" max="150"><br>
		提交附件&nbsp<input type="file" name="userfile" size="20" value="上传头像"><br>
		滚动控件&nbsp<input type="range" name="ran" min="1" max="100"><br>
		<input type="button" name="..." value="百度一下" onclick=""><br>
		<input type="submit" value="提交"><br>
		<input type="reset" name="reset" value="重置"><br>
</form>

JavaWeb学习笔记(1)__HTML篇

其他：
JavaWeb学习笔记(1)__HTML篇

相关标签： JavaWeb学习笔记

上一篇： （fast-reid）多GPU训练出现RuntimeError: Address already in use解决

下一篇： request对象

推荐阅读