html和css基础

html模板介绍

常用标签

• html标题

    <!-- h1 到h6 字体设置大小不一样-->
    <h1>h1标题</h1>
    <h2>h2标题</h2>
    <h6>h6标题</h6>

• html段落

 <p>段落</p>

• div布局标签

<div>布局常用标签，里面可以放任何内容标签</div>

• span标签

<span>不换行，存放特殊效果文字和小图片</span>

• 特殊效果标签

    <u>文字加下划线</u>
    <i>文字倾斜</i>
    <b>文字加粗</b>
    <s>删除线</s>

• img标签

 <img src="C:Users27795DesktopV.png" alt="图片无法显示的时候显示的文字" title="提示文本">

• 超链接

<a href="https://wangzi.uk/">百度</a>

点击图片跳转

 <a href="https://wangzi.uk/"><img src="C:Users27795DesktopV.png" alt="xxxx"></a>

以新窗口打开跳转

<a href="https://wangzi.uk/" target="_blank"><img src="C:Users27795DesktopV.png" alt="xxxx"></a>

html使用css方式

div css基础属性

        div{
             1000;
            height: 1000;
            background-color: tomato;
        }

类选择器

id选择器

层级选择器

组选择器

伪类选择器

列表

列表的显示一般把前面的去掉因为兼容性不好，无序的已经被我删除了

表格

<!-- table 嵌套tr tr嵌套td tr是行 td是单元格-->
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
        </tr>
    </table> 

表单

    <!--placeholder是html5.0才有的 以下的是用value 使用value的时候默认值不会消失  -->
    <form action="提交地址" method="POST">
        <!-- radio单选一组的name必须一样 为了实现radio文字也能点击效果 使用lable   checked是默认选中-->
        注册:<input type="text" placeholder="name">
        <br>
        密码:<input type="password">
        <br>
        单选框:<input type="radio" name="sex" id="man"> <label for="man">男</label> <input type="radio"name="sex" id="woman" checked="checked"><label for="woman">女</label>
        <br> <br>
        复选框:<input type="checkbox">读书 <input type="checkbox">跑步 <input type="checkbox">旅游
        <br> <br>
        上传文件: <input type="file">
        下拉菜单:
        <select name="" id="">
            <option value="" selected="selected">中国</option>
            <option value="">日本</option>
        </select>
        <br> <br>
        文本域
        <textarea name="te" id="" cols="30" rows="10"></textarea>
        <!-- 封装好了的按钮 -->
        <input type="submit" value="注册">
        <!-- 普通按钮 -->
        <input type="button" value="注册">
        <!-- 重置按钮 -->
        <input type="reset">
        <button>普通按钮</button>

盒子模型

  <style>
        div{
             300px;
            height: 200px;
            background: slategrey;
            /* 外面的线 */
            border: tomato 1px solid;
            /* 内边距 */
            padding: 20px;
            /* 盒子的大小是 width/height+padding+2*border
            用下面的box-sizing自动调整到width和height指定长宽
            */
            box-sizing: border-box;
            /* 外边距和其他盒子产生距离 */
            margin: 20px;
        }
    </style>

div{
             1000px;
            height: 1000px;
            /* 可以指定哪个方向单独画线 */
            border-top: solid 1px;
            border-bottom: solid 1px;

            /*上 左右 下 */
            padding: 10px 20px 30px;
            /* 居中 */
            margin: 0 auto;
        }

隐藏标签

 /* 下面两种都是隐藏 display不占位 visibility占位 */
            display: none;
            visibility: hidden;

溢出处理

 /* 内容溢出的时候加滑动条 */
            overflow: auto;
            overflow: scroll;

顶对齐

 /* 浮动*/
float: left;

定位

            /* 相对定位 占位 定位参照物自己*/
         position: relative;
         /* 不具备换行 不占位 父级定位则以父级为参照物否则以浏览器*/
         position: absolute;
        /* 固定定位 不具备换行 不占位 以浏览器为参照物*/
         position: fixed;

iframe(框架)

    <a href="https://bbs.pediy.com/thread-260110.htm" target="baidu">百度</a>
    <iframe src="https://www.baidu.com/" name="baidu"></iframe>