HTML/CSS常用基础标签及属性使用-2019.01.16

学习HTML/CSS基本标签及属性的使用方法：

HTML

一、标题与段落

实例

<div>
    <!-- 标题标签共有6级: h1 ~ h6, 大多只用到h1~h3 -->
    <h1>我的博客</h1>
    <h2>我的博客</h2>
    <h3>我的博客</h3>
    <p>内容丰富</p>
    <!-- 段落可以有多个 -->
    <p>学习使我快乐</p>
</div>

二、文本修饰

实例

<div>
    <!-- 一个段落中我只关注部分内容 -->
    <!-- strong: 文本加粗 -->
   <p>努力<strong style="background: black;color:white">锻炼</strong>, 增强<span style="color:blue">体魄</span></p>
   <!-- em: 文本斜体 -->
   <p>说好一起当<em style="color:red">锻炼</em>,你却偷偷溜了</p>
</div>

三、列表

实例

<div>
    <!-- 无序列表: 每个列表项之间无特定顺序,默认前面有一个小圆点,可嵌套 -->
    <h3>购物清单</h3>
    <ul>
        <li>1. 买了个西瓜</li>
        <li>2. 买了个橘子</li>
        <li>3. 买了个苹果</li>
    </ul>

    <!-- 其实这个购物清单更适合有序列表,列表项前自动添加数值序号(从1开始) -->
    <ol>
        <li>买了个西瓜</li>
        <li>买了个橘子</li>
        <li>买了个苹果</li>
    </ol>

    <!-- 定义列表,类似于名称解释,常用用来做友情链接 -->
    <dl>
        <dt>水果店</dt>
        <dd>卖水果的商店</dd>
        <dt>手机</dt>
        <dd>通话工具</dd>
    </dl>
 </div>

四、表格

实例

<table border="1" cellpadding="0" cellspacing="0" width="500" height="150">
    <caption>购物车</caption>
    <!-- 表头 -->
    <thead>
        <tr bgcolor="lightblue">
            <th>序号</th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>用途</th>
        </tr>
    </thead>
    
    <tr>
        <td align="center">1</td>
        <td align="center">西瓜</td>
        <td align="center">10</td>
        <td align="center">1</td>
        <td align="center" rowspan="3">吃</td>
    </tr>
    <!-- align="center"可以用到tr上再加方便 -->
    <tr  align="center">
        <td>2</td>
        <td>橘子</td>
        <td>8</td>
        <td>20</td>
       
    </tr>
    <tr  align="center">
        <td>3</td>
        <td>苹果</td>
        <td>6</td>
        <td>10</td>
       
    </tr>
</table>

五、 表单

实例

<form action="" method="GET">
    <div>
        <!-- 
            (1)控件的提示文本应该放在独立的label标签中,label的for属性与控件的id绑定
            (2)一旦绑定成功, 点击标签文本,焦点会自动落到对应的控件上
        -->
        <!-- 用户名: -->
        <label for="username">用户名:</label>
        <!-- name和value属性应该成对出现,将用户数据以名值对的形式提交到服务器上指定脚本处理 -->
        <!-- placeholder: 用户于设置文本框的提示文本 -->
        <input type="text" id="username" name="username" value="" placeholder="不少于6位">
    </div>

    <div>
        <!-- 再介绍一种语法,可以少写二个属性for,id,将控件元素写在label标签内 -->
       <label>
           <!-- password类型,输入的内容以*号占位符代替 -->
            密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30">
       </label>
    </div>
    <div>
        <label>
            确认密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30">
        </label>
    </div>

    <div>
        <!-- 单选按钮,每一组的name属性值必须相同,才会只返回唯一值,并自动设置它的checked属性 -->
        <!-- 可以事先用checked属性设置默认选中值, 标签文本与value值不必相同,value才是提交到后端的数据 -->
       <input type="radio" name="gender" id="male" value="male" checked><label for="male">男</label>
       <input type="radio" name="gender" id="female" value="female"><label for="female">女</label>
    </div>

    <div>
        <!-- 复选框 -->
        <!-- 将提示文本全部放在label标签中,确保点击标签文本,也可以选中对应的复选框 -->
        <!-- 一组复选框的name属性必须是相同的, 应该使用数组的语法,因为可以同时选择多个 -->
        <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">打游戏</label>
        <input type="checkbox" name="hobby[]" value="smoke" id="smoke"><label for="smoke">抽烟</label>
        <!-- 同样也是使用checked设置默认值,可同时设置多个 -->
        <input type="checkbox" name="hobby[]" value="programme" id="programme" checked><label for="programme">撸代码</label>
    </div>

    <div>
        <!-- 下拉列表,name固定,但value是动态的,select中的value根据内部的option选中状态变化 -->
        <label for="edu">您的学历:</label> 
        <select name="" id="edu" value="">
            <option value="1">幼儿园算吗?</option>
            <!-- selected设置默认项 -->
            <option value="2" selected>小学没毕业</option>
            <option value="3">不好意思,博士后</option>
        </select>
    </div>

    <!-- 文本域,其实就是多行文本框 -->
    <div>
        <label for="common">请留言:</label>
        <textarea name="" id="common" cols="30" rows="10" placeholder="不超过100字" value=""></textarea>
    </div>
    
    <!-- 按钮 -->
    <input type="submit" value="提交">

    <!-- 重置功能极少用到,推荐不要再使用,而是通过其它方式 -->
    <input type="reset" value="重置">

    <!-- 推荐使用语义化的button标签 -->
    <!-- button默认类型为提交submit,通常是修改为button类型,最后通过ajax异步提交表单 -->
    <button type="button">注册</button>
</form>

六、图片与媒

实例

<div>
	<!-- img外部引用图片，alt标签描述图片名称对于SEO优化收录比较好 -->
	<img src="images/logo.png" width="200" height="300" alt="logo">
	</div>
	<div>
	<!-- video标签controls控制显示播放 -->
	<video src="images/demo.mp4" controls></video>
</div>

CSS

七、CSS常用选择器及优先级

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用选择器与优先级(selector)</title>
    <style>
        /* 标签选择器 */
        p {
            background-color:lightgreen; 
            color: red;
        }

        /* class类选择器 */
        .box {
            background-color: skyblue;
        }

        /* id选择器 */
        #box1 {
            background-color: yellow;
        }

    </style>
</head>
<body>
     <!-- 选择器优先级:标签 < 类class < id <行内样式 -->
<div class="box" id="box1">
	<p style="background-color:#ccc;">css样式规则 = 选择器 + 样式声明 </p>
</div>
</body>
</html>

八、盒模型布局

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型布局</title>
    <!-- 引用外部CSS文件 -->
    <link rel="stylesheet" href="static/css/style.css">
    <style type="text/css">
        /**选择所有元素*/
        *{margin:0px;padding: 0px;}
    
        .box1{
            width: 200px;
            height: 200px;
            background-color: lightblue;
            border:1px solid #ccc;
            padding: 20px 30px 10px;
            margin: 20px 30px;
        }
        .box2{
            height: inherit;
            background-color: wheat;
    
    
        }
        </style>
</head>
<body>
    <!-- 
        1. 盒模型是布局的基础,页面上的一切可见元素皆可看做盒子
        2. 盒子默认都是块级元素: 独占一行,支持宽度设置
        (根据盒子模型示意图分析)
        3. 盒子模型分为三个层级:
            1. 内容级: 宽高和背景三个属性
                (1): width
                (2): height
                (3): background-color (默认透明)
            2. 元素级(可视范围)
                (1): 包括内容级(width + height + background)
                (2): 内边距: padding
                (3): 边框: border
            3. 位置级:margin, 决定当前盒子与其它盒子之间的位置与关系
     -->

     <div class="box1">
         <div class="box2"></div>
     </div>
     

</body>
</html>