java学习笔记 - web基础一（html）

本文是对于html标签以及css使用记录

网页组成部分

内容

  • 在页面中可以看到的数据，一般使用html实现

表现

  • 内容在页面上的展现形式，如颜色、布局、大小等，一般使用css实现

行为

  • 页面中元素与输入设备交互的响应，一般使用javaScript实现

Html 简介

  • Hyper Text Markup Language（超文本标记语言） 简写：HTML
  • HTML 通过标签来标记要显示的网页中的各个部分
  • 网页文件本身是一种文本文件， 通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画 面如何安排，图片如何显示等)

Html 书写规范

1
2
3
4
5
6
7
8
9
10
<html>                       <!--表示整个 html 页面的开始--> 
    <head>                   <!--头信息--> 
    	<title>标题</title>   <!--标题--> 
    </head> 
    <body> 
    	                      <!--body 是页面的主体内容 页面主体内容--> 
    </body> 
</html>                       <!--表示整个 html 页面的结束-->

<!--Html 的代码注释  这是 html 注释，可以在页面右键查看源代码中看到 -->

Html 标签

标签的格式

  • 标签名大小写不敏感
  • 标签示例

单标签

  • 自结束标签
1
<标签名 />
1
2
3
4
<!-- 换行 -->
<br /> 
<!-- 水平线 -->
<hr />

双标签

1
2
<!-- 第一个标签为开始标签 后面的为结束标签 -->
<标签名 > 封装的数据 <标签名>
1
2
3
<div>
    这里是数据
</div>

标签的属性

基本属性

1
2
<!-- 可以修改简单的样式效果 -->
bgcolor="red"

事件属性

1
2
<!-- 可以直接设置事件响应后的代码 -->
onclick="alert("你好！");"

常用标签

font字体标签

1
2
3
4
5
6
7
8
9
10
<body>
    <!-- 字体标签
    需求 1：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。
    font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
    color 属性修改颜色
    face 属性修改字体
    size 属性修改文本大小
    -->
<font color="red" face="宋体" size="7">我是字体标签</font>
</body>

特殊字符

常用的字符实体

分号（;）为英文输入法下的;

显示结果 描述 实体名称 实体编号
空格 &nbsp； &#160；
< 小于号 &lt； &#60；
> 大于号 &gt； &#62；
& 和号 &amp； &#38；
“ 引号 &quot； &#34；
‘ 撇号 &apos；(IE不支持) &#39； 
1
2
3
4
5
6
7
8
9
10
11
12
<body>	
	<!-- 特殊字符
	需求：把<br/> 换行标签 变成文本 转换成字符显示在页面上
	连续输入空格或者回车 浏览器只会保存第一个
	常用的特殊字符：
		<    &lt;
		>    &gt;
		空格  &nbsp;
	-->
	我是&lt;br&gt;换行标签<br/>
	你好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;执笔	
</body>

标题标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<!-- 标题标签
需求 1：演示标题 1 到 标题 6 的
h1 - h6 都是标题标签
h1 最大
h6 最小
align 属性是对齐属性
left 左对齐(默认)
center 剧中
right 右对齐
-->
<h1 align="left">标题 1</h1>
<h2 align="center">标题 2</h2>
<h3 align="right">标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6>
<h7>标题 7</h7>
</body>

超链接

  • 在网页中所有点击之后可以跳转的内容都是超连接
1
2
3
4
5
6
7
8
9
10
11
12
<body>
	<!-- 超链接
	a标签 超链接
		href 属性设置连接的地址
		target属性设置是新开窗口还是本窗口
			_self 表示当前窗口打开（默认）
			_blank 表示新建一个空白窗口打开
	-->
	<a href="http://www.baidu.com">百度</a><br/>
	<a href="http://www.baidu.com" target="_self">百度_self</a><br/>
	<a href="http://www.baidu.com" target="_blank">百度_blank</a>
</body>

列表标签

无序列表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <!-- 列表
    需求：无序列表显示 西游记 红楼梦 三国演义 水浒传
        ul 是无序列表
            type 属性可以修改列表前面的符号
        li 是列表项
        ol 是有序列表
     -->
    <ul type="none">
        <li>西游记</li>
        <li>红楼梦</li>
        <li>三国演义</li>
        <li>水浒传</li>
    </ul>
</body>
有序列表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <!-- 列表
    需求：无序列表显示 西游记 红楼梦 三国演义 水浒传
        ul 是无序列表
            type 属性可以修改列表前面的符号
        li 是列表项
        ol 是有序列表
     -->
    <ol type="none">
        <li>西游记</li>
        <li>红楼梦</li>
        <li>三国演义</li>
        <li>水浒传</li>
    </ol>
</body>

img标签

  • img 标签可以在 html 页面上显示图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
    <!-- 图片标签

    img标签用来显示图片
    src属性可以设置图片的路径
    width设置宽度
    height设置高度
    border设置边框粗细
    alt设置在图片没找到时显示使用文本代替

    JavaSe中 
        相对路径：从工程名开始算
        绝对路径：盘符/目录/文件名
        
    web中
        相对路径：
            .        表示当前文件夹所在的目录
            ..       表示当前文件夹所在的上一级目录
            文件名    表示当前文件所在目录的文件，相当于./文件名   ./可以省略    
    -->   
    <img src="../imgs/1.jpg" width="100" height="150" border="1" alt="图片没有找到"/>
    <img src="../imgs/2.jpg" width="100" height="150" border="1" />
</body>

表格标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
<!--
        table 表格标签
            border 设置边框粗细
            width 设置表格宽度
            height 设置表格高度
            aline 设置表格相对于页面的对齐方式

        tr 行标签
        th 表头标签
        td 单元格标签
            b 设置字体加粗
            aline 设置表格中文本对齐方式
-->
<table align="center" border="1" width="300" height="300" cellspacing="0">
    <tr>
        <td align="center"><b>1.1</b></td>
        <th>1.2</th>
        <th>1.3</th>
    </tr>
</table>
</body>

跨行列表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<body>
<!--
	需求1:
		新建一个五行，五列的表格，
		第一行，第一列的单元格要跨两列，
		第二行第一列的单元格跨两行，
		第四行第四列的单元格跨两行两列。
		colspan 属性设置跨列
		rowspan 属性设置跨行
	生成多行多列快捷方式 如5行5列
		table>tr*5>td*5 tab键
-->
<table width="500" height="500" border="1" cellspacing="0">
	<tr>
		<td colspan="2">1.1</td>
		<td>1.3</td>
		<td>1.4</td>
		<td>1.5</td>
	</tr>
	<tr>
		<td rowspan="2">2.1</td>
		<td>2.2</td>
		<td>2.3</td>
		<td>2.4</td>
		<td>2.5</td>
	</tr>
	<tr>
		<td>3.2</td>
		<td>3.3</td>
		<td>3.4</td>
		<td>3.5</td>
	</tr>
	<tr>
		<td>4.1</td>
		<td>4.2</td>
		<td>4.3</td>
		<td rowspan="2" colspan="2">4.4</td>
	</tr>
	<tr>
		<td>5.1</td>
		<td>5.2</td>
		<td>5.3</td>
	</tr>
</table>		
</body>

iframe框架标签（内嵌窗口）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
<!--
    iframe 可以在页面上单独开辟一个小区域显示一个单独页面
        iframe标签和a标签组合使用步骤：
            1. 在iframe中使用name属性定义一个名字
            2. 在a标签中的target属性值上设置iframe的name的属性值
-->
    我是一个单独的页面<br/>
    <iframe src="3.标题标签.html" width="300" height="300" name="单独页面"></iframe>
    <br/>
    <ul>
        <li><a href="0-标签语法.html" target="单独页面">0-标签语法</a></li>
        <li><a href="1.font标签.html" target="单独页面">1.font标签</a></li>
        <li><a href="2.特殊字符.html" target="单独页面">2.特殊字符</a></li>
    </ul>
</body>

表单标签

  • 表单就是 html 页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<body>
<!--
    form标签是表单标签
        action属性设置提交的服务器地址
        method属性值设置提交的方式：GET（默认值）或POST
    表单提交的时候，数据没有发送给服务器的三种情况
        1、表单项没有name属性值
        2、单选、复选（下拉列表中option标签）都需要添加value属性
        3、表单项不在提交的form标签中
    GET请求特点是：
        1、浏览器地址栏中的地址是：action属性+[？+请求参数]可以没有
            请求参数的格式：name=value&name=value
        2、不安全
        3、它有数据长度限制
    POST请求特点是：
        1、浏览器地址栏中只有action属性值
        2、相对GET更安全
        3、理论上没有长度限制
-->
    <form action="http://localhost:8080" method="post" />
        <input type="hidden" name="action" value="login" />
        <h1 align="center">用户注册</h1>
        <table align="center">
            <tr>
                <td>用户名称：</td>
                <td><input type="text" name="username" value="这是默认值"></td>
            </tr>
            <tr>
                <td>用户密码：</td>
                <td><input type="password" name="password" maxlength="6"></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password"  maxlength="6"></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="sex" checked="checked" value="boy">男
                    <input type="radio" name="sex" value="girl">女
                </td>
            </tr>
            <tr>
                <td>兴趣爱好：</td>
                <td>
                    <input type="checkbox" name="java" checked="checked">Java
                    <input type="checkbox" name="javaSe">JavaSe
                    <input type="checkbox" name="c++">c++
                </td>
            </tr>
            <tr>
                <td>国籍：</td>
                <td>
                    <select name="country">
                        <option>--请选择--</option>
                        <option selected="selected" value="cn">中国</option>
                        <option value="usa">美国</option>
                        <option value="jp">日本</option>

                    </select>
                </td>
            </tr>
            <tr>
                <td>自我评价：</td>
                <td><textarea rows="5" cols="20" name="desc">这里填入默认值</textarea></td>
            </tr>
            <tr>
                <td>
                    <input type="reset" value="清零" />
                </td>
                <td align="right">
                    <input type="submit" value="确认" />
                </td>
            </tr>
        </table>
    </form>
</body>

表单细节

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!--
    form 表单标签
        input type="text"       是字符输入框 value设置默认显示内容
        input type="password"   是密码输入框 value设置默认显示内容
        input type="radio"      是单选框 name属性值可以对其进行分组 checked="checked" 默认选中
        input type="checkbox"   是复选框 checked="checked" 默认选中
        input type="reset"      是重置按钮 value属性修改按钮上的文本
        input type="submit"     是提交按钮 value属性修改按钮上的文本
        input type="button"     是按钮    value属性修改按钮上的文本
        input type="file"       是文件上传域
        select 标签是下拉复选框
            option 标签是下拉列表框中的选项 selected="selected" 设置默认选中

        textarea 标签是 多行文本输入框 （起始标签和结束标签中的内容是默认值）
            rows 属性设置可以显示的几行高度
            cols 属性设置每行可以显示几个字符宽度
-->
<form>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称：</td>
            <td><input type="text" value="这是默认值"></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" maxlength="6"></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" maxlength="6"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" checked="checked">男
                <input type="radio" name="sex">女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input type="checkbox" checked="checked">Java
                <input type="checkbox">JavaSe
                <input type="checkbox">c++
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select>
                    <option>--请选择--</option>
                    <option selected="selected">中国</option>
                    <option>美国</option>
                    <option>德国</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="5" cols="20">这里填入默认值</textarea></td>
        </tr>
        <tr>
            <td>
                <input type="reset" value="清零" />
            </td>
            <td align="right">
                <input type="submit" value="确认" />
            </td>
        </tr>
    </table>
</form>

其他标签

span标签
1
2
<!--span标签  它的长度是封装数据的长度-->
<span>标签1</span>
div标签
1
2
<!--div标签   默认独占一行-->
<div>标签1</div>
p标签
1
2
<!--p段落标签  默认会在段落的上方或下方个空出一行（如果有就不再空出）-->
<p>p段落标签1</p>