JavaWeb 2.5 HTML CSS

 01-HTML介绍&快速入门
 

 <html>
	<head>
		<title>html 快速入门</title>
	</head>
	<body>
		<font color="red"> 乾坤未定,你我皆是黑马~ </font>
	</body>
 </html>

 02-基础标签

    html 表示颜色：
        1. 英文单词：red,pink,blue...
        2. rgb(值1,值2,值3)：值的取值范围：0~255  rgb(255,0,0)  红绿蓝三颜色配比
        3. #值1值2值3：值的范围：00~FF(16进制)  最推荐!

<!DOCTYPE html>  <!--html5 标识-->
<html lang="en">
<head>
    <meta charset="UTF-8">   <!--页面字符集-->
    <title>Title</title>
</head>
<body>

<h1>我是标题 h1</h1>
<h2>我是标题 h2</h2>
<h3>我是标题 h3</h3>
<h4>我是标题 h4</h4>
<h5>我是标题 h5</h5>
<h6>我是标题 h6</h6>

<hr>
<font face="楷体" size="5" color="#ff0000">传智教育</font>
<hr>
刚察草原绿草如茵，沙柳河水流淌入湖。藏族牧民索南才让家中，茶几上摆着馓子<br><!--换行符号-->
6月8日下午，察县沙柳河镇果洛藏贡麻村，
<hr>
<p>
    刚察草原绿草如茵，沙柳河水流淌入湖。藏族牧民索南才让家中，茶几上摆着馓子
</p>
<p>
    6月8日下午，刚察县沙柳河镇果洛藏贡麻村，
</p>
<hr>
沙柳河水流淌<br>

<b>沙柳河水流淌</b><br>
<i>沙柳河水流淌</i><br>
<u>沙柳河水流淌</u><br>

<hr>
<center>
    <b>沙柳河水流淌</b>
</center>
</body>
</html>

 03-图片音频视频标签

资源路径：
    1. 绝对路径：完整路径
    2. 相对路径：相对位置关系
 (1)xxx/html/02-图片音频视频.html  当前html路径
        xxx/html/a.jpg  访问资源路径

        ./a.jpg  or  a.jpg  (./可省)
(2)xxx/html/02-图片音频视频.html
        xxx/html/img/a.jpg

        ./img/a.jpg
 (3)xxx/html/02-图片音频视频.html
        xxx/img/a.jpg

        ../img/a.jpg    (../表示向上退一级)
 资源尺寸单位：
    1. px：像素
    2. 百分比： 代表整个窗体的百分比

04-超链接标签&列表标签
  type属性更改序号 但一般都直接用css不用这个

05-表格标签&布局标签

<div>:块级标签  沾满整行                         <span>:行内标签  只占内容空间

06-表单标签

    action:指定表单数据提交的URL
        * 表单项数据要想被提交，则必须指定其name属性
    method：指定表单提交的方式
        1. get：默认值
            * 请求参数会拼接在 URL地址局域栏 后边
            * url的长度有限制 4KB
        2. post：
            * 请求参数会在 http请求协议的请求体 中
            * 请求参数大小无限制

07-表单项标签

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

<form action="#" method="post">
    <input type="hidden" name="id" value="123">

    <label for="username">用户名：</label>
    <input type="text" name="username" id="username"><hr>
    <label>标签关联实现 点击"用户名:" = 点击"username"文本框 的效果</label> <br>

    <label for="password">密码：</label>
    <input type="password" name="password" id="password"><br>

    性别：
    <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
    <input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
    <hr>name属性值一样 实现互斥效果 value:将value对应的值提交到服务端 <br>

    爱好：
    <input type="checkbox" name="hobby" value="1"> 旅游
    <input type="checkbox" name="hobby" value="2"> 电影
    <input type="checkbox" name="hobby" value="3"> 游戏
    <br>

    头像：
    <input type="file"><br>

    城市:
    <select name="city">
        <option>北京</option>
        <option value="shanghai">上海</option>
        <option>广州</option>
    </select>
    <br>

    个人描述：
    <textarea cols="20" rows="5" name="desc"></textarea>
    <br> <br>
    <input type="submit" value="免费注册">
    <input type="reset" value="重置">
    <input type="button" value="一个可点击按钮">
</form>

</body>    </html>

01-CSS简介

 02-css导入方式(css和html结合方式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{ color: green; }
    </style>

    <link rel="stylesheet" href="../CSS/demo.css">
    rel="stylesheet" :告诉浏览器外部文件是css文件
</head>
<body>
    <div style="color: red">Hello CSS 内联用的非常少</div>

    <span>Hello CSS 内部</span>

    <div>Hello CSS 外部</div>
</body>
</html>

03-css选择器&属性

CSS 参考手册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }/*选择所有div标签*/
        #name{
            color: blue;
        }
        .cls{
            color: pink;
        }
    </style>
</head>
<body>

<div>元素选择器</div>
<div id="name">id选择器(唯一) 选择范围更小的生效</div>
<div class="cls">类选择器 可选择多个元素 </div>

<span class="cls">span</span>

</body>
</html>
posted @ 2022-10-15 19:55  软工菜鸡  阅读(2)  评论(0)  编辑  收藏  举报  来源