JavaWeb学习笔记(1)__HTML篇

最新推荐文章于 2020-04-14 17:40:42 发布

耿鬼不会笑

最新推荐文章于 2020-04-14 17:40:42 发布

阅读量269

点赞数

分类专栏： # JavaWeb开发基础文章标签： html html5 web

本文链接：https://blog.csdn.net/A233666/article/details/104844086

版权

JavaWeb开发基础专栏收录该内容

23 篇文章 2 订阅

订阅专栏

JavaWeb自学笔记

目录结构

JavaWeb自学笔记
- 1.HTML篇

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.常用的特殊符号

2131

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

文本的特殊样式

<b> </b> 粗体
<em> </em> 强调方式显示
<strong> </strong>加强调方式显示
<i> </i> 斜体
<sup> </sup> 上标 2²
<sub> </sub> 下标 log以2为底
<br/> 换行
<p> </p> 段落
<h1> </h6> 标题

列表

<!--无序列表的嵌套-->
<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：访问同一台服务器上的资源

超链接标记

<!--单击文字跳转-->
<a href="#">单击文字跳转</a>

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

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

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

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

创建热点区域

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

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

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
47	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
1245		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>

<!--文本框-->
<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属性表示默认已选本选项

在这里插入图片描述

<!--普通按钮-->普通按钮用来控制其他定义了脚本的处理工作
<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>

在这里插入图片描述

其他：

耿鬼不会笑

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb学习笔记(1)__HTML篇

JavaWeb自学笔记目录结构JavaWeb自学笔记1.HTML篇第一章 HTML概述1.基本标记2.文本显示3.图像显示4.URL基础5.浮动框架第二章表格表单1.使用表格2.使用表单1.HTML篇第一章 HTML概述1.基本标记<!DOCTYPE html> 文档类型说明<meta> 提供页面的元信息<meta charset="utf-8" &g...
复制链接

扫一扫