day_1_8 JavaWeb系列学习总结之HTML&CSS

最新推荐文章于 2020-10-24 10:37:04 发布

梦蓝樱飞

最新推荐文章于 2020-10-24 10:37:04 发布

阅读量1.5k

点赞数 1

分类专栏： JavaWeb JavaWeb基础系列学习总结

本文链接：https://blog.csdn.net/menglanyingfei/article/details/79081638

版权

JavaWeb 同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

JavaWeb基础系列学习总结

8 篇文章 1 订阅

订阅专栏

这里列举了几点我认为比较重要的HTML&CSS的基本用法, 直接见示例如下:

1. 表单的控件

文本框:<input type="text"/>
密码框:<input type="password" />
单选框:<input type="radio" name="sex" value=""/>女
a) 一定要有value值
b) 多个单选框的name属性值一定要一致
c) checked 默认选择
复选框:<input type="checkbox" name="hobby" value="">荣耀
下拉框:
多行文本域:
按钮:

    <form action="提交的路径" method="提交的方式"></form>
  表单  表示将数据提交给后台

<!DOCTYPE html>
<html>
  <head>
    <title>09.html</title>

    <meta charset="UTF-8">

    <style type="text/css">
        #div_id {
            width:800px;
            height:600px;
            border-style:solid;
            background-color: red;
        }
    </style>

  </head>

  <body>

    <div id="div_id">
        <form action="路径"  method="post">
            用户名:<input type="text" name="username" value="请输入用户名！" onfocus="abc()"/>
            <br/>
            密码:<input type="password" name="password"/>
            <br/>
            性别:<input type="radio" name="sex" value="female"  />女
            <input type="radio" name="sex" value="male" checked="checked"/>男
            <br/>
            爱好:
            <input type="checkbox" name="hobby" value="rongyao">荣耀
            <input type="checkbox" name="hobby" value="chiji">吃鸡
            <input type="checkbox" name="hobby" value="lol">lol
            <input type="checkbox" name="hobby" value="daota2">刀塔2
            <input type="checkbox" name="hobby" value="taobao">淘宝
            <input type="checkbox" name="hobby" value="qiaodaima" checked>敲代码

            <br/>

            地址:
            <select name="province">
                <option value="">湖北</option>
                <option value="">湖南</option>
                <option value="">广东</option>
            </select>
            <select name="city">
                <option value="">武汉</option>
                <option value="">长沙</option>
                <option value="">广州</option>
            </select>

            <br/>
          自我介绍:
          <textarea rows="5" cols="50">
          </textarea>
          <br/>
          <input type="submit" value="注册"/>
          <input type="button" value="注册"/>
          <button onclick="submit()">注册</button>

      </form>
    </div>

    <script type="text/javascript">

        function submit(){
            // 暂时不写
        }
        function abc(){
            document.getElementsByTagName("input")[0].value="";
        }
    </script>
  </body>
</html>

2. CSS盒子模型

<!DOCTYPE html>
<html>
  <head>
    <title>CSS盒子模型.html</title>

    <meta charset="UTF-8">
    <style type="text/css">
        /* CSS盒子模型 */
        div{
            width:500px;/* 设置盒子的宽度 */
            height:500px;/* 设置盒子的高度 */
            border-style: groove;/* 设置边框的类型 */
            border-width: 20px;/* 设置边框的宽度 */

            /*margin-top: 50px; 设置上边距*/
            /*margin-left:50px; 设置左边距*/
            /*margin:auto;  自动居中 */

            /* margin:100px 200px 300px 500px;  设置上右下左 */
            /*margin: 100px 200px 300px;  设置 上 左 下*/
             margin:100px 200px; /*设置  上 左(下 左) */
            padding: 3em;   /* 设置填充的距离 */
            border-color: red;
            background-image: url("../image/topfocusb_bg1.gif");
        }
    </style>
  </head>
    <div>
        这是一个div，你能看到什么
    </div>
  <body>
  </body>
</html>

3. CSS类选择器

当标签选择器，类选择器，id选择器同时存在的时候, 若同时存在相同的属性名, 属性值的
优先级的顺序是
id选择器 > 类选择器 > 标签选择器

<!DOCTYPE html>
<html>
  <head>
    <title>11.html</title>

  <meta charset="UTF-8">

    <!-- CSS的语法:
        选择器 {
            属性名:属性值
        }
    -->
    <style type="text/css">
        /* 在这个中间编写CSS样式 */
        /*标签选择器*/
        p{
            font-family: "宋体";
            text-align: center;
            font-size: 4em;
        }

        /*id选择器
            id属性值在页面是唯一的
        */
        #id1{
            font-size:2em;/*字体大小*/
            color:red;/*字体颜色*/
            background-color:yellow;/*背景颜色*/
            font-style: italic;/*字体倾斜*/
            text-decoration: line-through;/*文本上的线条*/
        }

        /*类选择器
            .类名{
            }
        */
        .pstyle{
            background-image: url("../image/topfocusb_bg1.gif");/* 设置背景图片 */
            height:40px;/* 设置高度 */
            background-repeat: repeat-x;/* 水平方向重复 */
        }

    </style>
  </head>

  <body>

    <p id="id1" class="pstyle">窗前明月光</p>
    <p class="pstyle">疑是地上霜</p>
    <p class="pstyle">举头望明月</p>
    <p class="pstyle">低头思故乡</p>
  </body>
</html>

完整代码见:
https://github.com/menglanyingfei/Java/tree/master/JavaWebTrain

梦蓝樱飞

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
day_1_8 JavaWeb系列学习总结之HTML&CSS

这里列举了几点我认为比较重要的HTML&CSS的基本用法, 直接见示例如下:1. 表单的控件文本框: 密码框: 单选框:女 a) 一定要有value值 b) 多个单选框的name属性值一定要一致 c) checked 默认选择复选框:荣
复制链接

扫一扫