HTML和CSS

发表于 2021-01-12| 更新于 2023-10-03|JavaWeb

字数总计:4.7k|阅读时长: 21 分钟

|阅读量:|评论数:

HTML和CSS

从Java Web开始，笔记就从有道云转到markdown了。本笔记根据尚硅谷教学视频完成。

1.B/S软件结构

JavaSE：C/S Client Server

JavaWeb：B/S Browser Server

2.HTML

HTML，Hyper Text Markup Language 超文本标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

创建html页面

html的helloworld程序及相关说明如下：

<!DOCTYPE html>     <!--约束说明-->
<!--html标签表示html的开始 lang="en"表示英文(lang="zh_CN"表示中文) html标签中一般分为两部分：head和body-->
<html lang="en">   

<head>  <!--表示头部信息，一般包含三个部分内容，tittle标签，css样式，js代码-->
    <meta charset="UTF-8">  <!--charset="UTF-8"表示当前页面使用UTF-8字符集-->
    <title>MyHello</title>  <!--表示标题名称-->
</head>

<body>  <!--body标签是整个html页面显示的主体内容-->
hello,world
</body>
</html>

html文件不需要编译，直接由浏览器解析执行。

html标签

html标签大全

标签的格式：<标签>封装的数据</标签名>
标签名大小写不敏感
标签拥有自己的属性
- 基本属性如：bgcolor="#00ffff" 表示背景颜色
- 事件属性如：onclick="alert(‘hello!!’) 可以直接设置事件响应后的代码
  
  如：
  1
  2
  3
  4
  5
  6
  <body bgcolor="#00ffff"> 
  hello，world
  <button onclick="alert('hello!!')">
  点击此处
  </button>
  </body>
标签又分为单标签和双标签
- 单标签格式：<标签名/> 如 <br/> 表示换行 <hr/> 表示分割线
- 双标签格式：<标签名>封装的数据</标签名> 如<p></p>

标签的语法

标签不能交叉嵌套
标签必须正确的闭合（要有结束标签）
属性必须有值，属性值必须加引号""
注释不能嵌套

常用标签

font标签

<font></font>font标签是字体标签，可以用来修改字体颜色（color）、字体（face）和大小（size）通过修改标签属性来修改。如：

1
2
3

<body>  <!--body标签是整个html页面显示的主体内容-->
<font color="#dc143c" face="宋体" size="4">hello，world</font>
</body>

特殊字符

常用特殊字符：

< &lt
> &gt
空格 &nbsp

标题标签

<h1></h1>-<h6></h6> 如：

<body>  <!--body标签是整个html页面显示的主体内容-->
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>

标题标签属性之：align 对齐属性

left 左对齐（默认）
center 居中
right 右对齐

效果如下：

超链接

<a><a/>标签

<body>  <!--body标签是整个html页面显示的主体内容-->
<a href="https://www.baidu.com" target="_self">百度</a>
<br/>
<a href="https://www.baidu.com" target="_blank">百度（跳转）</a>
</body>

<a>标签属性：

href属性设置超链接地址
target 属性设置哪个目标进行跳转
- _self 表示当前页面（默认）
- _blank 新窗口打开页面

列表标签

<ul></ul>无序列表、<ol></ol>有序列表

<body>  <!--body标签是整个html页面显示的主体内容-->
<ul>
    <li>jay</li>
    <li>jj</li>
    <li>rick</li>
</ul>
<ol>
    <li>jay</li>
    <li>jj</li>
    <li>rick</li>
</ol>
</body>

img标签

<img src=""/>

在Web中路径分为相对路径和绝对路径两种

相对路径：

. 表示当前文件所在目录
… 表示当前文件所在目录的上一级目录
文件名表示当前文件所在目录的文件

绝对路径：http://ip:port/工程名/资源路径

1
2
3

<body>  <!--body标签是整个html页面显示的主体内容-->
<img src="https://gitee.com/qingyu1011/blog_img/raw/master/img/20201219222822.jpg" width="255" height="255">
</body>

img标签相关属性

table标签

<table></table>，相关文档，相关讲解

tr 元素定义表格行
th 元素定义表头
td 元素定义表格单元

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>7.表格的跨行跨列</title>
</head>
<body>
<!--	需求1：
			新建一个五行，五列的表格，
			第一行，第一列的单元格要跨两列，
			第二行第一列的单元格跨两行，
			第四行第四列的单元格跨两行两列。

			colspan 属性设置跨列
			rowspan 属性设置跨行
			-->

<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>
</body>
</html>

效果如下：

form标签

注意一下<form> 标签,相关讲解链接

<form></form>标签就是表单

例子：

<body>
    <form>
        用户名：<input type="text" value="请输入用户名"><br/>
        密码：<input type="password"><br/>
        确认密码：<input type="password"><br/>
        性别：<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女<br/>
        兴趣爱好：<input type="checkbox">Java<input type="checkbox">Python<input type="checkbox">c++
    </form>

</body>

更多实例，可以从此网站学习：

文本域(Text fields)

本例演示如何在HTML页面创建文本域。用户可以在文本域写入文本。
密码域

本例演示如何创建HTML的密码域。
复选框

本例演示如何在HTML页中创建文本框。用户可以选中或取消选取复选框。
单选按钮

本例演示如何在HTML中创建单选按钮。
简单的下拉列表

本例演示如何在HTML页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
另一个下拉列表

本例演示如何创建一个简单的带有预选值的下拉列表。（注：预选值指预先指定的首选项。）
文本域(Textarea)

本例演示如何创建一个文本域（多行文本输入控制）。用户可以在文本域中写入文本。在文本域中，可写入的字符字数不受限制。
创建按钮

本例演示如何创建按钮。你可以对按钮上的文字进行自定义。
围绕数据的Fieldset

本例演示如何在数据周围绘制一个带标题的框。
带有输入框和确认按钮的表单

本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。
带有复选框的表单

此表单包含两个复选框和一个确认按钮。
带有单选按钮的表单

此表单包含两个单选框和一个确认按钮。
从表单发送电子邮件

此例演示如何从表单发送电子邮件。

<input> 标签的 type 属性，如button，submit，text等。

表单格式化（对齐）

可以结合<table>标签使用，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的显示</title>
</head>
<body>
<!--需求1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。
隐藏域，自我评价（多行文本域）。重置，提交。-->

<!--
    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     是文件上传域
        input type=hidden   是隐藏域    当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）

        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" value="abc"/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" value="abc"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex"/>男
                <input type="radio" name="sex" checked="checked"  />女
            </td>
        </tr>
        <tr>
            <td> 兴趣爱好：</td>
            <td>
                <input type="checkbox" checked="checked" />Java
                <input type="checkbox" />JavaScript
                <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="10" cols="20">我才是默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset" /></td>
            <td align="center"><input type="submit"/></td>
        </tr>
    </table>
</form>
</body>
</html>

表单提交

form标签有两个重要的属性：action和method

action属性设置提交的服务器地址
method属性设置提交的方式（GET（默认）或POST）

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的显示</title>
</head>
<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" value="abc"/></td>
            </tr>
             <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="sex" value="boy"/>男
                    <input type="radio" name="sex" checked="checked" value="girl" />女
                </td>
            </tr>
             <tr>
                <td> 兴趣爱好：</td>
                <td>
                    <input name="hobby" type="checkbox" checked="checked" value="java"/>Java
                    <input name="hobby" type="checkbox" value="js"/>JavaScript
                    <input name="hobby" type="checkbox" value="cpp"/>C++
                </td>
            </tr>
             <tr>
                <td>国籍：</td>
                <td>
                    <select name="country">
                        <option value="none">--请选择国籍--</option>
                        <option value="cn" selected="selected">中国</option>
                        <option value="usa">美国</option>
                        <option value="jp">小日本</option>
                    </select>
                </td>
            </tr>
             <tr>
                <td>自我评价：</td>
                <td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea></td>
            </tr>
             <tr>
                <td><input type="reset" /></td>
                <td align="center"><input type="submit"/></td>
            </tr>
        </table>
    </form>
</body>
</html>

其他标签

html相关标签就到这里。之后需要用到可以直接去相关网站查看。

3.CSS

CSS，Cascading Style Sheets，层叠样式表。是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS语法

选择器：浏览器根据选择器决定受CSS样式影响的HTML元素（标签）
属性：要修改的样式名。键值对形式。如：p{color:blue}>。如果有多个说明，则需要用分号;，如：

p{

color:red;

font_size:30px;

}

CSS注释：/** 注释内容 **/

CSS与HTML结合的方式

第一种

在标签style属性上设置key:value value，修改标签样式

例子：

<body>
    <div style="border: 1px solid #2cffe3;background: #ff0000;height: 100px;width: 100px">div1</div>
    <div>div2</div>
</body>

第二种

在head标签中，使用style标签来定义各种自己需要的css样式

格式：

1
2
3

xxx {
	key: value value;
}

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <!--定义一个style标签，专门用来定义css样式代码-->
    <style type="text/css">
        div{
            border: 1px solid #2cffe3;
            background: #ff0000;
            height: 100px;
            width: 100px
        }
        span{
            border: 1px solid #ff4c30;
            background: #64f3ff;
        }
    </style>

</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <span>span1</span>
    <span>span2</span>
</body>
</html>

第三种

把css样式写成一个单独的css文件，再通过link标签引入即可重复使用。

例子：先创建一个1css.css文件如下：

div{
    border: 1px solid #2cffe3;
    background: #ff0000;
    height: 100px;
    width: 100px
}
span{
    border: 1px solid #ff4c30;
    background: #64f3ff;
}

然后在html文件通过link标签引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <!--link标签专门用来引入css样式代码-->
    <link rel="stylesheet" type="text/css" href="1css.css">
</head>

<body>
    <div>div1</div>
    <div>div2</div>
    <span>span1</span>
    <span>span2</span>
</body>
</html>

CSS选择器

标签名选择器

格式：

1
2
3

标签名{
	属性: 值;
}

标签名选择器，可以决定哪些标签被动地使用这个样式。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style type="text/css">
        div{
            border: 1px solid #142eff;
            font-size: 16px;
            color: #2dff1d;
        }
        span{
            border: 1px dashed #ff212b;
            font-size: 16px;
            color: #37fff5;
        }
    </style>
</head>

<body>
    <div>div1</div>
    <div>div2</div>
    <span>span1</span>
    <span>span2</span>
</body>
</html>

即CSS与HTML结合的第二种方式。

id选择器

格式：

1
2
3

#id 属性值{
	属性: 值;
}

id选择器，可以让我们通过id属性选择性地去使用这个样式.

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        #id101{
            color: #2cffe3;
            font-size: 25px;
            border: 2px yellow solid;
        }
        #id102{
            color: #ff5e68;
            font-size: 25px;
            border: 2px #ff0dcb solid;
        }
    </style>
</head>

<body>
    <div id="id101">div1</div>
    <div id="id102">div2</div>
    <span>span1</span>
    <span>span2</span>
</body>
</html>

class选择器

格式：

1
2
3

.class属性值{
	属性: 值;
}

class类型选择器，可以通过class属性有效的选择性地去使用这个样式。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        .class01{
            color: red;
            border: solid 1px yellow;
        }
        .class02{
            color: #2cffe3;
            border: solid 1px #ff0000;
        }
    </style>
</head>

<body>
    <div class="class01">div1</div>
    <div class="class01">div2</div>
    <span class="class02">span1</span>
    <span class="class01">span2</span>
</body>
</html>

组合选择器

格式：

1
2
3

选择器1,选择器2,选择器n{
	属性: 值
}

组合选择器，可以让多个选择器共同用同一个css样式代码。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        #id101,.class001{
            color: #2cffe3;
            font-size: 25px;
            border: 2px yellow solid;
        }
    </style>
</head>

<body>
    <div id="id101">div1</div>
    <div class="class001">div2</div>
    <span>span1</span>
    <span>span2</span>
</body>
</html>

CSS常用样式

文章作者: qingbo

文章链接: http://www.qingbo1011.top/2021/01/12/HTML%E5%92%8CCSS/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Qing's Blog！

JavaWeb HTML CSS

相关推荐

Cookie&Session&JSP

Filter&Listener

评论

本地搜索

由 hexo-generator-search 提供支持