阶段三：JavaWeb01_<input type="checkbox" name="hobby" checked="check-程序员宅基地

技术标签： css web html

一、目录
1、什么是JavaWeb?
2、HTML
3、CSS

一、什么是JavaWeb？

了解JavaWeb之前先了解一下什么是web？

web（World Wide Web）即全球广域网，也称为万维网，它是一种在Internet上将各类数据进行信息交互的系统，常见的表现形式是html。

w3c(World Wide Web Consortium)万维网联盟：全世界最有权威和影响力的中立性技术标准机构。w3c制定了很多标准，包括结构化语言：HTML、XML等；表现语言：CSS；行为标准DOM等

JavaWeb就是用java语言来解决Web互联网的问题，Web通常分为两大类，服务端和客户端，但java在服务端比客户端的应用更为丰富和广泛，例如在服务端的js，servlet等。
我们学习Web就要了解web前端的知识，比如静态资源开发技术：HTML，CSS；动态资源开发技术：javaScript，Servlet等。

二、学习HTML

HTML（Hyper Text Markup Language），超文本标记语言，该语言中有很多标签，可以通过特殊的格式和标签将文字、照片、音频、视频等资源嵌入到一个Web页面中。

通过超链接可以使资源变为逻辑上的整体，更方便的使用网络资源。
目前主流的浏览器厂商都在使用HTML5，而且HTML具有跨平台性，也很符合市场的需求，因此学习它很重要。

简单的HTML标签：

<!DOCTYPE html>
<!-- 单行注释 -->
<!-- !DOCTYPE 页面的注释，表示页面使用的格式 -->

<!-- html：总标签  -->

<html lang="en">

<!-- head头标签，里面包含初始化信息 
     meta：元素标签 
        charset ：表示字符集
     title：页面名称标签   
-->

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<!-- body页面体标签，内部包含页面中可视化的信息和格式 -->
<body>

</body>
</html>

1、标签的语法规范

①标签不能交叉嵌套

<!--正确使用-->
<div><span> xiongmaodada </span></div>

<!--错误使用-->
<div><span> xiongmaodada </div></span>

②标签必须正确闭合

<!-- 双标签要有头有尾，单标签后要加/ -->
<div> 熊猫大大 </div>
<br/>

③属性必须有值，属性必须加引号

	正确：<font color="blue">你好，熊猫大大</font>
	错误：<font color=blue>你好，熊猫大大</font>
	错误：<font color>你好，熊猫大大</font>

④注释不能嵌套

正确：<!-- 注释内容 --> 
错误：<!-- 注释内容 <!-- 注释内容 -->-->

2、font标签

字体标签，可以修改文字的字体、大小、颜色等。

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

3、特殊字符

在使用标记型语言中有一些特殊字符别用来作为特殊用法，但有时候需要用到原本的用途，这时就需要特殊处理。特殊字符很多，这里举几个常用到的例子。

<!--

<    ==>   &lt;   
>    ==>    &gt;
空格  ==>    &nbsp;
....

-->

4、标题标签

标题标签用来便捷的设定标题的大小，标签为：<h1>标题</h1> 数字从1到7，越来越小。

align 属性用来对齐标签：

left ：左对齐

center ：居中

right ：右对齐

<h1 align="left"> h1为标签的的标题 </h1>
<h2 align="right"> h1为标签的的标题 </h2>
<h3 align="center"> h1为标签的的标题 </h3>
<h4> h1为标签的的标题 </h4>
<h5> h1为标签的的标题 </h5>
<h6> h1为标签的的标题 </h6>

5、超链接

超链接用来跳转到其他的资源中，标签为 a

href属性设置连接的地址

target属性设置跳转方式

_self 当前页面（默认）打开链接

_blank 新的页面打开链接

_parent 在父框架中打开链接

_top 在整个窗口打开链接

<a href="http://www.baidu.com" target="_self">百度官网</a>
<a href="https://blog.csdn.net/Xiong_M_DD" target="_blank">熊猫大大博客驿站</a>
<a href="https://blog.csdn.net/Xiong_M_DD" target="_parent">熊猫大大博客驿站</a>
<a href="https://blog.csdn.net/Xiong_M_DD" target="_top">熊猫大大博客驿站</a>

6、img标签

img标签用来显示图片。

src属性：设置图片路径

相对路径：以工程名为根路径 '.' 文件当前目录； '..' 文件上一级目录；文件名当前文件当前目录

绝对路径：盘符：/目录/文件名

width属性：设置图片的宽度

height属性：设置图片的高度

border属性：设置图片边框

alt属性：当找不到资源时代替显示的文本信息

 <img src="1.jpg" width="200" height="200" border="2" alt="图片加载失败！"/>

7、表格标签

table标签时表格标签

border 设置表格标签边框

width 设置表格宽度

height 设置表格高度

align 设置对齐方式

cellspacing 设置单元间距

colspan 设置跨列

rowspan 设置跨行

tr：行标签

th:表头标签

td:单元标签

b:加粗标签

简单的表格：

<table align="center" border="1" width="200" height="200" cellspacing="1">
    <tr>
        <th>1.1</th>
        <th>1.2</th>
        <th>1.3</th>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

跨行跨列时：

<table width="500" height="500" cellspacing="0" border="1">
			<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 colspan="2" rowspan="2">4.4</td>
			</tr>
			<tr>
				<td>5.1</td>
				<td>5.2</td>
				<td>5.3</td>
			</tr>
		</table>

8、iframe标签

iframe标签可以在页面中开辟一个小区域，里面可以存放一个小页面。

可以通过iframe中name标签设定名称，在其他地方通过name属性来进行跳转到该区域中。

例，用a标签跳转到iframe中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<iframe width="1000" height="1000" src="https://www.baidu.com" name="bdf"></iframe>
<br/>
其他网站列表：
<ul>
    <li>
        <a href="https://www.bilibili.com" target="bdf">哔哩哔哩官网</a>
    </li>
    <li>
        <a href="https://blog.csdn.net/Xiong_M_DD" target="bdf">熊猫大大的博客</a>
    </li>
</ul>
</body>
</html>

9、列表标签

列表标签可以通过无序或有序的方式表来制作列表

ul 是无序列表

type属性可修改列表项前面的符号。例如："none"

li 列表项

 <ul type="none">
        <li>java</li>
        <li>python</li>
        <li>go</li>
        <li>c++</li>
    </ul>

10、表单(重点)

form标签用来表示用户进行输入创建的表单。

action属性：设置提交服务器地址

method属性：设置提交的方式GET（默认）/ POST

input type=text 文本输入框

value属性设置默认内容

input type=password 密码输入框

input type=radio 单选框

name：进行分组

checked="checked" ：默认选中

input type=checkbox 复选框

input type=reset 重置按钮

input type=submit 提交按钮

input type=button 按钮

input type=file 文件上传域

input type=hidden 隐藏域

select标签表示下拉列表框

option标签是下拉列表框中的选项

textarea 多行文本输入框

rows 属性设置显示几行的高度

cols 属性设置每行显示几个字符的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>

<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" value="名称" name="username"/>
            </td>
        </tr>
        <tr>
            <td>
                密码：
            </td>
            <td>
                <input type="password" value="123456" name="password"/>
            </td>

        </tr>
        <tr>
            <td>
                确认密码：
            </td>
            <td>
                <input type="password" value="123456" name="repassword"/>
            </td>
        </tr>

        <tr>
            <td>
                性别：
            </td>
            <td>
                <input type="radio" checked="checked" name="gender"/>男
                <input type="radio" name="gender"/>女
            </td>
        </tr>
        <tr>
            <td>
                兴趣爱好：
            </td>
            <td>
                <input type="checkbox" name="hobby" checked="checked"/>Java
                <input type="checkbox" name="hobby"/>JavaScript
                <input type="checkbox" name="hobby"/>Servlet
            </td>
        </tr>
        <tr>
            <td>
                国籍：
            </td>
            <td>
                <select name="country">
                    <option>--请选择国籍--</option>
                    <option selected="selected">中国</option>
                    <option>美国</option>
                    <option>俄罗斯</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                自我评价：
            </td>
            <td>
                <textarea name="desc" rows="10" cols="20">默认值不是value哦
                </textarea>
            </td>
        </tr>

        <tr>

            <td>
                <input type="submit">
            </td>
            <td>
                <input type="reset">
            </td>
        </tr>
    </table>

</form>

</body>
</html>

11、其他标签

div标签 : 默认独占一行

span 标签：封装数据长度的数据，可以在任何文字中穿插span标签

p标签：段落标签，默认上方和下方空出一行

三、学习CSS

CSS是用来描述HTML样式的语言，表示如何将HTML的元素进行显示，同一个html页面可以由各种各样的样式来分别呈现！

在.css文件或者style标签中声明css样式。

1、css语法

css由选择器和声明块组成。

选择器{ 属性：值；属性：值； }

例：

div{
     border: 1px solid blue;
 }
span{
    border: 1px solid red;
}

2、css选择器

我们可以将 CSS 选择器分为五类：

简单选择器（根据名称、id、类来选取元素）

组合选择器（根据它们之间的特定关系来选取元素）

伪类选择器（根据特定状态选取元素）

伪元素选择器（选取元素的一部分并设置其样式）

属性选择器（根据属性或属性值来选取元素）

①元素选择器

根据元素名称选择

p {
  text-align: center;
  color: red;
}

②id选择器

根据id=“part1”来选择

#part1 {
  text-align: center;
  color: red;
}

③类选择器

定只有部分被选中的HTML元素会受到影响

p.center {
  text-align: center;
  color: red;
}

④通用选择器

会影响到所有的HTML元素

* {
  text-align: center;
  color: blue;
}

⑤分组选择器

将相同样式的选择器放到一起来简化代码

h1, h2, p {
  text-align: center;
  color: red;
}

3、CSS内常用的样式

div{ div行样式

color: 颜色

border: 边界宽度（可加颜色、线宽等）

width: 宽度

height: 高度

background-color: 背景颜色

font-size: 字体大小

margin-left: 左外边距的宽度

margin-right: 右外边框的宽度

text-align: 文本对齐

}

table{} 表样式

td{} 行中列样式

a{} 超链接样式

ul{} 列表样式

4、CSS注释

在一对style标签中使用/* */来表示注释，既可以表示单行注释也可以表示多行注释，就看怎么写。

/* 这是一条单行注释 */
/* 这是一条
多行
注释 */

CSS中还有很多很多好玩的高级操作，但我不精通前端css中的中级高级用法，有兴趣的小伙伴可以通过一下方式进行学习哦！

W3School : https://www.w3school.com.cn/css/index.asp
菜鸟教程：https://www.runoob.com/css/css-tutorial.html
W3CSchool:https://www.w3cschool.cn/css/

本文链接：https://blog.csdn.net/Xiong_M_DD/article/details/115468965

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

miui系统精简工具（免root删除内置软件）-程序员宅基地

文章浏览阅读4.3w次，点赞16次，收藏47次。想知道该如何卸载小米手机中内置的软件吗？可以使用miui系统精简工具来进行，这是一款可以免root权限直接删除小米内置软件的电脑工具，并是由吾爱破解的大神进行制作分享的。同时通过该工具，用户只需要先准备好小米手机、win电脑、数据线，接着手机接入开发者模式，再连接电脑，然后只需要运行小编提供的该工具即可随意的帮助用户将小米自带的影音、悬浮球、小米钱包、内容服务、用户反馈、生活黄页、小米互传、智能生活等各种小米自带的系统软件进行卸载亲测，并就是是小爱同学都可以全面的进行卸载哦，十分强大，从而可以很好的满足不同_miui系统精简工具

centos6.x_centos7.x差异改进明细-程序员宅基地

文章浏览阅读106次。CentOS6.5与CentOS7.3差异和改进对比明细对比内容centos6.5centos7.3说明系统发行版本CentOS release 6.5 (Final)CentOS Linux release 7.3.1611 (Core) 内核版本2.6.32-431.el6.x86_643.10.0-514.el7.x86_64支持大的crashkernel大小；以..._centos7 比centos6 性能提升项

PyQt5标准对话框-程序员宅基地

文章浏览阅读67次。很全的Qt的标准对话框，包含QInputDialog、QColorDialog、QFontDialog、QMessageBox、QOpenFileDialog...全部是由官网的C++版本，转换成PyQt5版本。有些细节忽略了，因为实在不知怎么转换过来。捣鼓了一晚上，总算完成了，好累啊，不过很开心！效果图：完整代码： 1 # -*- ..._pyqt5 标准对话

大数据学习目录-程序员宅基地

文章浏览阅读125次。推荐1、gitbook 这里可以找到优秀的文章及书籍2、about云大数据论坛，网站上很多大数据资料 hadoop博文：1、Hadoop2.x集群安装配置笔记初学搭建hadoop2、搭建hadoop2.6.0 HDFS HA及YARN HA 启动hadoopHA容灾机制3、Cloudera Manager(centos)安装详细介绍使用CM搭建CHD版...

Visual Studio Code中设置HTML/HTML5模板_vscode设置html/html5模板csdn-程序员宅基地

文章浏览阅读8.4k次，点赞11次，收藏30次。找到左下角的设置 >> 用户代码片段或者左上角文件 >> 首选项 >> 用户代码在出现的搜索框中输入：html.json模板设置如下：{ // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is use_vscode设置html/html5模板csdn

嵌入式系统实验室的自由软件项目建立了-程序员宅基地

文章浏览阅读49次。rickleaf是一个热爱自由软件的大牛，呵呵，他正在搞一个"嵌入式系统实验室的自由软件项目"，有幸入他法眼，让我加入该项目做一些rtems的工程代码。这个项目主要是为了没有硬件的朋友们可以在软件上仿真他们的嵌入式代码。详情请阅读： http://blog.csdn.net/rickleaf/archive/2011/03/19/6260866.aspx ..._嵌入式lambdaedu目标机