简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML常用标签和CSS选择器的使用方法及示例-2019.1.15 15:24
Blogger Information
Blog 5
fans 0
comment 0
visits 3203
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML常用标签和CSS选择器的使用方法及示例-2019.1.15 15:24
王jc的博客
Original
886 people have browsed it

一、标题与段落（div，h1~h6，p等）

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>标题与段落</title>
</head>
<body>
     <div>
         <!-- 标题: h1 ~ h6 -->
         <h1>标题1</h1>
         <h2>标题2</h2>
         <h3>标题3</h3>
         <!-- 水平线：hr -->
         <hr>
         <!-- 段落：p -->
         <p>段落1</p>
         <p>段落2</p>
     </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

二、列表（ul，li，ol，dt，dd）

实例

<div>
    <h3>列表</h3>
    <!-- 无序列表 -->
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>西瓜</li>
    </ul>

    <!-- 有序列表 -->
    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>西瓜</li>
    </ol>

    <!-- 定义列表 -->
    <dl>
        <dt>可能是</dt>
        <dd>蠢材</dd>
        <dt>也可能是</dt>
        <dd>天才</dd>
    </dl>
</div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

三、 表格（table,caption, thead,tbody,tfoot,tr,th,td）

实例

<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">30</td>
        <td align="center">1</td>
        <td align="center">学习</td>
    </tr>
    <!-- align="center"可以用到tr上再加方便 -->
    <tr  align="center">
        <td>2</td>
        <td>后端课程</td>
        <td>1000</td>
        <td>1</td>
        <td>学习</td>
    </tr>
    <tr  align="center">
        <td>3</td>
        <td>阿里云服务器</td>
        <td>30</td>
        <td>1</td>
        <td>提供服务</td>
    </tr>
</table>

运行实例 »

点击 "运行实例" 按钮查看在线实例

四、 表单（form,label,input,select,textarea,button）

 

实例

<!-- 下面以用户注册表单为例进行演示 -->
<h2>用户注册</h2>
<form action="" method="POST">
    <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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

五、图片与媒体（img，video）

 

实例

<!-- 图片标签是单标签,引入的是外部的资源
    src="图片地址", 支持本地和网络url地址
    alt="提示文本", 当图片不能显示或被用户禁用时显示它,seo优化也会用到它 -->
<img src="https://img.php.cn/upload/article/000/000/003/5c2d976cd70af991.jpg" alt="PHP程序员从布衣到大牛的必经之路全程直播实战边学边练边辅导线上***（第四期）" height="200">

<!-- 换行 -->
<br />

<!-- 播放视频:controls显示播放控件, 支持宽度设置 -->
<video src="http://www.w3school.com.cn/i/movie.ogg" controls width="400"></video>

运行实例 »

点击 "运行实例" 按钮查看在线实例

六、CSS

CSS：层叠样式表,  是用来定义页面上的html元素如何显示的一组规则或声明

基本语法: 选择器 {样式声明}

1. 选择器: 最基本的有标签,类class, id 。这三个常用选择器的优先级是: 标签 < 类class < id 

2. 样式声明: 包括属性和值二部分

3. 样式规则 = 选择器 + 样式声明 

CSS盒子模型

 1. 盒模型是布局的基础,页面上的一切可见元素皆可看做盒子

 2. 盒子默认都是块级元素: 独占一行,支持宽度设置

3. 盒子模型分为三个层级:

a. 内容级: 宽高和背景三个属性

                (1): width

                (2): height

                (3): background-color (默认透明)

b. 元素级(可视范围)

                (1): 包括内容级(width + height + background)

                (2): 内边距: padding

                (3): 边框: border

c. 位置级:margin, 决定当前盒子与其它盒子之间的位置与关系

 

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！