JavaWeb_HTML和CSS

最新推荐文章于 2024-06-10 20:53:57 发布

退堂鼓十级演奏家

最新推荐文章于 2024-06-10 20:53:57 发布

阅读量261

点赞数

分类专栏： JavaWeb笔记文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_50796684/article/details/122524396

版权

JavaWeb笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一.HTML书写规范

<!DOCTYPE html> <!-- 约束，声明 -->
<html lang="zh_CN"> <!-- html标签表示html开始 -->
<head>  <!-- 头部信息，title标题，css样式，js代码 -->
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
    hello
</body>
</html>

二.标签

<标签名>封装的数据</标签名>
标签名对大小写不敏感
属性：
i.基本属性<body bgcolor="#e6e6fa">
ii.事件属性：可以直接设置事件响应后的代码
分类：
i.单标签 <br/>  <hr/> 
ii.双标签

1.标签的语法

标签不可交叉嵌套
必须正确关闭
属性必须要有值，属性值必须加引号
注释不能嵌套

2.font标签

<!DOCTYPE html>
<html lang="zh_CN"> 
<head>  
    <meta charset="UTF-8">
    <title>font标签</title>
</head>
<body>
    <font color="red" face="宋体" size="7">我是字体标签</font>
<!-- font是字体标签，可以用来修改文本的字体、颜色、大小 -->
</body>
</html>

3.特殊字符

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>特殊字符</title>
</head>
<body>
    我是&lt;br&gt;标签
    <!-- HTML裁掉多余的空格-->
    hello &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; world
</body>
</html>

3.标题标签

<body>
    <h1 align="center">标题1</h1>
    <h2 align="center">标题2</h2>
    <h3 align="center">标题3</h3>
    <h4 align="center">标题4</h4>
    <h5 align="center">标题5</h5>
    <h6 align="center">标题6</h6>
</body>

4.超链接

<body>
    <a href="http://www.baidu.com">百度</a></br>
    <a href="http://www.baidu.com" target="_self">百度</a></br>    <!-- 自身连接跳转(默认） -->
    <a href="http://www.baidu.com" target="_blank">百度</a></br>  <!-- 打开一个新的网页 -->
</body>

百度

5.列表标签

<body>
    <ul> <!-- 无序列表 -->
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>二狗子</li>
        <!-- 复制选中的行：Ctrl+D -->
    </ul>
    <ol> <!-- 有序列表 -->
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>二狗子</li>
        <!-- 复制选中的行：Ctrl+D -->
    </ol>
</body>

张三
李四
王五
二狗子

张三
李四
王五
二狗子

6.img标签

<body>
    <img src="图片路径" width="100" height="200" border="1" alt="异常显示"/>
</body>

7.table标签

<body>
    <table border="1" width="300" height="300" align="center" cellspacing="0"><!--cellspacing格间距-->
        <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>
</body>

<body>
    <table border="1" width="300" height="300" align="center" cellspacing="0"><!--cellspacing格间距-->
        <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><!--Ctrl+X删除一行-->
            <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>

1.1		1.3	1.4	1.5
2.1	2.2	2.3	2.4	2.5
2.1	3.2	3.3	3.4	3.5
4.1	4.2	4.3	4.4
5.1	5.2	5.3

8.iframe标签

<body>
<!--iframe标签可以在页面上开辟一个小区域显示一个单独的页面-->
<iframe src="新的页面路径" width="200" height="200" name="abc"></iframe>
<br/>
<ul>
    <li><a href="第一个页面的连接" target="abc">第一个页面</a></li>
    <li><a href="第二个页面的连接" target="abc">第二个页面</a></li>
    <li><a href="第三个页面的连接" target="abc">第三个页面</a></li>
</ul>
</body>

9.表单

<body>
<!--收集信息并发送给服务器-->
<form action="http://localhost:8080" method="get"><!--action提交的服务器地址 method设置提交的方式(默认get)-->
    <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="abc" name="password"><br></td>
        </tr>
        <tr>
            <td>性别：</td>
            <!--单选框 默认选中checked-->
            <td><input type="radio" name="sex" checked="checked" value="man">男
                <input type="radio" name="sex" value="woman">女</td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td><input type="checkbox" name="hobby" value="Java">Java
                <input type="checkbox" name="hobby" value="JavaScript">JavaScript
                <input type="checkbox" name="hobby" value="C++">C++</td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td><select name="country">
                <option>--请选择国籍--</option>
                <option selected="selected" value="Cn">中国</option><!--默认-->
                <option value="US">美国</option>
                <option value="En">英国</option>
            </select><!--下列列表框--></td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="10" cols="20" name="desc">默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset"><!--重置按钮--></td>
            <td align="center"><input type="submit"><br><!--提交按钮--></td>
        </tr>
    </table>

    <!--常用标签-->
    <!--
    <input type="button" value="按钮">
    <input type="file">&lt;!&ndash;文件上传域&ndash;&gt;
    <input type="hidden">&lt;!&ndash;隐藏域，发送某些信息，这些信息不需要用户参与&ndash;&gt;
    -->
</form>
</body>

GET请求：
浏览器地址栏中的地址是：action属性[URL+?+请求参数]
请求参数的格式:name=value
不安全，有数据长度的限制

http://localhost:8080/?action=login&username=zzz&password=123456&sex=woman&hobby=Java&hobby=JavaScript&country=US&desc=aaa

POST请求：
相对安全，地址中看不见
没有数据长度的限制

10.其他标签

<body>
<div>div标签1</div><!--默认独占一行-->
<div>div标签2</div>
<span>span标签1</span><!--长度是封装数据的长度-->
<span>span标签1</span>
<p>p标签1</p><!--默认在段落的上方或下方各空出一行，如果已经有则不再空-->
<p>p标签1</p>
</body>

div标签1

div标签2

span标签1 span标签1

p标签1

三.CSS

1.语法规则

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

2.HTML和CSS结合

方法一

<body>
<div style="border: 1px solid red;">div标签1</div><!--边框1个像素，实线，红色-->
</body>

方法二

<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style type="text/css">
        div{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div>div标签</div>
</body>

方式三：
把CSS样式写成一个单独的CSS文件，再通过link标签引入即可复用

<head>
    <meta charset="UTF-8">
    <title>css</title>
    <!--link标签专门用来引入CSS代码-->
    <link rel="stylesheet" type="text/css" href="css01.css">
</head>
<body>
<div>div标签</div>
</body>

css01.css

div{
    border: 1px solid red;
}

3.标签名选择器

<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style type="text/css">
        div{
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }
        span{
            border: 5px dashed blue;<!--虚线-->
            color: yellow;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div>div标签</div>
<span>span标签</span>
</body>

3.id选择器

<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style type="text/css">
        #id001{
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }
        #id002{
            border: 5px dotted blue;/*点线*/
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="id001">div标签</div>
<div id="id002">div标签</div>
</body>

4.class选择器

<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style type="text/css">
        .class01{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }
        .class02{
            color: green;
            font-size: 26px;
            border: 1px red solid;
        }
    </style>
</head>
<body>
<div class="class01">div标签class01</div>
<div class="class02">div标签</div>
<span class="class01">span标签class01</span>
</body>

5.组合选择器

<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style type="text/css">
        .class01,#id01{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }
    </style>
</head>
<body>
<div class="class01">div标签class01</div>
<span id="id01">span标签class01</span>
</body>

6.常用样式

    <style type="text/css">
        div{
            color: red;
            border: 1px yellow solid;
            width: 300px;
            height: 300px;
            background-color: green;
            font-size: 30px;
            margin-left: auto;/*标签居中*/
            margin-right: auto;
            text-align: center;/*字体居中*/
        }
        a{
            text-decoration: none;/*超连接去下划线*/
        }
        table{
            border: 1px red solid;/*表格边框*/
            border-collapse: collapse;/*边框合并*/
        }
        td{
            border: 1px red solid;/*单元格边框*/
        }
        ul{
            list-style: none/*列表去修饰*/
        }
    </style>