您的位置: 首页  >  文章  >  web基础学习（二）HTML、CSS

web基础学习（二）HTML、CSS

分类: 文章 • 2022-10-09 19:08:53
HTML

上一节：HTML基础——————下一节：CSS 盒子模型、浮动、定位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
<!--用线框包裹整个表单内容-->
<fieldset>
    <!--线框标题-->
    <legend>用户注册</legend>
    <!--action="login.php":提交数据地址  , method="get":使用传输方式post(密文http传输协议传输)、get(明文地址栏URL传输)-->
    <form action="login.php" method="get">
        <!--label ：加强用户体验,点击正内容都可以选中input , for="username"：对应input的id值-->
        <label for="username">用户名：</label>
        <!--type="text" :input 类型 ,name="username":数据接收使用的名称 ,value:输入框内容username接收的值,disabled:禁用属性-->
        <input disabled size="8" maxlength="8" type="text" name="username" id="username" value="admin"/>
        <br>
        <label for="pwd">密码框：</label>
        <!--type="password":密码框-->
        <input type="password" name="pwd" id="pwd"/>
        <br>
        <label>
            <!-- type="radio":单选框,name="sex"：要定义一样的内容-->
            <input type="radio" value="男" name="sex"/>男
        </label>
        <label>
            <!-- type="radio":单选框,name="sex"：要定义一样的内容-->
            <input checked type="radio" value="女" name="sex"/>女
        </label>
        <br>
        <label>
            <!-- type="checkbox":多选框,name="xq":要定义一样的内容-->
            <input type="checkbox" value="打篮球" name="xq"/>打篮球
        </label>
        <label>
            <!-- type="checkbox":多选框,name="xq"：要定义一样的内容-->
            <input checked type="checkbox" value="游泳" name="xq"/>游泳
        </label>
        <label>
            <!-- type="checkbox":多选框,name="xq"：要定义一样的内容-->
            <input type="checkbox" value="摄影" name="xq"/>摄影
        </label>
        <label>
            <!-- type="checkbox":多选框,name="xq"：要定义一样的内容-->
            <input type="checkbox" value="玩" name="xq"/>玩
        </label>
        <br>
        <label for="file">上传文件</label>
        <!--type="file":文件上传input,name="file"：和上面一样文件接收的名字-->
        <input type="file" name="file" id="file"/>
        <br>
        <!--type="hidden"：隐藏域可以隐藏上传一些数据,不被客户看见-->
        <input type="hidden" value="666" id="one"/>
        <br>
        <!--type="submit": 提交数据按钮  -->
        <input type="submit" value="登录"/>
        <br>
        <!--type="image":也具备提交功能    -->
        <input type="image" src=""/>
        <br>
        <!--type="reset":恢复到默认值-->
        <input type="reset" value="重置"/>
        <br>
        <!--type="button":普通按钮-->
        <input type="button" value="普通按钮"/>
        <br>
        <button>按钮</button>
        <br>
    </form>
    <!--下拉选框,selected:默认选中属性-->
    <select name="" id="" size="4">
        <!--下拉内容-->
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">广州</option>
        <option value="">深圳</option>
        <option selected value="">南京</option>
    </select>
    <br>
    <!--文本域,readonly：只读,上面还有禁用的使用-->
    <textarea readonly name="" id="" cols="30" rows="5">dsfsaf sfsasd fsdf as fsd asf afaaf sad fsfs fs dfsfsa dsfsaf sfsasd fsdf as fsd asf afaaf sad fsfs fs dfsfsadsfsaf sfsasd fsdf as fsd asf afaaf sad fsfs fs dfsfsadsfsaf sfsasd fsdf as fsd asf afaaf sad fsfs fs dfsfsadsfsaf sfsasd fsdf as fsd asf afaaf sad fsfs fs dfsfsa</textarea>
    </form>
</fieldset>
</body>
</html>
  • 页面效果展示：web基础学习（二）HTML、CSS
CSS

  1. css选择器

    HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
    class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

  2. CSS Text(文本)

  3. CSS Fonts(字体)

  4. CSS Backgrounds(背景)

  5. CSS 列表样式(ul)

  6. CSS display 属性 、 display:flex 属性

  7. CSS overflow 属性

  • 本部分实战css.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <!--css外部引入样式 -->
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <!--css 样式优先级

        行内样式                           1000
        ID选择器                           100
        class选择器/属性选择符/伪类选择符     10
        标签选择器 /伪元素选择符              1

    -->
    <style type="text/css">
        /*文字的css代码 标签选择器*/
        p {
            /*字体样式,常用字体	*/
            font-family: "微软雅黑", "宋体", "arial";
            /*字体大小*/
            font-size: 13px;
            /*字体风格 斜体还有oblique*/
            font-style: italic;
            /*字体宽度 	100-900 lighter  bold bolder*/
            font-weight: bolder;
            /*综合写法 可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"*/
            font: italic bolder 12px "微软雅黑";
            display: block;
        }

        /*文本的css代码 并集选择器*/
        p,.one {
            /*文本颜色*/
            color: #000;
            /*文本对齐 还有 left right*/
            text-align: center;
            /*文本缩进*/
            text-indent: 2em;
        }
        /*背景的css代码 class选择器*/
        .background {
            /*background-color:背景颜色;*/
            background-color: antiquewhite;
            /*background-image 背景图片*/
            background-image:url("123.jpg");
            /*背景图像 - 水平或垂直平铺 repeat-x ,repeat-y,repeat*/
            background-repeat: no-repeat;
            /*背景图像是否固定或者随着页面的其余部分滚动。scroll	背景图片随页面的其余部分滚动。这是默认,fixed	背景图像是固定的,inherit	指定background-attachment的设置应该从父元素继承*/
            background-attachment:fixed;
            /*背景图像- 设置定位 20% 30 %*/
            background-position:right top;
            /*综合用法 background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;*/
            background: #00ff00 url('smiley.gif') no-repeat fixed center
        }
        /*初始颜色*/
        a:link {
            color: #333;
        }
        /*鼠标点击后颜色*/
        a:visited {
            color: #ccc;
        }
        /*鼠标记过颜色*/
        a:hover {
            color: blue;
        }
        /*鼠标按下颜色*/
        a:active {
            color: yellow;
        }

        .one {
            /*宽度*/
            width: 200px;
            /*高度*/
            height: 200px;
            background-color: lightpink;
            /*cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状*/
            cursor: crosshair; /* pointer wait help text*/
        }
        /*css列表样式代码 id选择器*/
        #list li {
            /*list-style-type属性指定列表项标记的类型  circle  square  upper-roman  lower-alpha*/
            list-style-type: decimal-leading-zero;
            /*将图象设置为列表项标志*/
            list-style-image: url('images/dot.jpg');
            /*设置列表中列表项标志的位置*/
            list-style-position: outside;
            /*简写属性。用于把所有用于列表的属性设置于一个声明中*/
            list-style: disc url('') inside;
        }
		/*修剪属性overflow代码*/
        .one {
            /*hidden scroll*/
            /*默认值。内容不会被修剪，会呈现在元素框之外*/
            overflow: visible;
            /*如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容*/
            overflow: auto;
            /*内容会被修剪，并且其余内容是不可见的*/
            overflow: hidden;
            /*内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容*/
            overflow: scroll;
            /*规定应该从父元素继承 overflow 属性的值。*/
            overflow: inherit;
        }

        /*
        h1-h6 p ul ol dl div
        块标签：垂直排列 宽度
        strong b i em a img span
        内联元素：（行级元素）水平排列 没有宽度和高度
        */
        /*display样式代码 子代选择器注意要有空格 选择 .one 元素内的所有 <span> 元素*/
        .one span {
            /*默认。此元素会被显示为内联元素，元素前后没有换行符*/
            display: inline;
            /*此元素将显示为块级元素，此元素前后会带有换行符。*/
            display: block;
            /*行内块元素。（CSS2.1 新增的值）*/
            display: inline-block;
            /*Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性 css3*/
            display: flex;
            /*此元素不会被显示*/
            display: none;
        }

        span {
            display: inline-block;
        }
    </style>
</head>
<body>

<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com.cn">新浪</a>
<a href="http://www.sohu.com">搜狐</a>
<a href="http://www.qq.com">腾讯</a>
<div class="one">
    <span>
        我是span标签
    </span>
</div>
<ul id="list">
    <li>这是一个列表项1</li>
    <li>这是一个列表项2</li>
    <li>这是一个列表项3</li>
    <li>这是一个列表项4</li>
    <li>这是一个列表项5</li>
    <li>这是一个列表项6</li>
    <li>这是一个列表项7</li>
    <li>这是一个列表项8</li>
</ul>
<p>这是一篇文章内容</p>
<div class="background">
    这里描述背景样式
</div>
</body>
</html>
  • 页面效果展示web基础学习（二）HTML、CSS

相关推荐