博客列表 >HTML与css初体验-2019年1月14日 20:00

HTML与css初体验-2019年1月14日 20:00

小淇的博客
小淇的博客原创
2019年01月21日 09:50:42520浏览

HTML文档结构

    1.人与人之间交流时通过双方都能听懂的语言
    2.浏览器只能解析html语言(超文本标记语言)
    3.所以用户与浏览器之间必须使用html语言
    4.人类语言是通过语法将文字组织成能够读写交流的语言
    5.html文档也必须遵守一定的结构,才可以用于编写与交流
    6.这种文档结构,就是html文档的编写规范 

    <!-- 元素是用标签来表示的 -->
    <!-- 双标签:它的内容来自当前文档 -->
    <h3>请用用HTML与我对话</h3>
    <!-- 单标签:它的内容通常是引用外部资源,例如图片,文件等 -->
    <img src="static/images/zly.jpg" alt="颖***" width="200">

常用标签实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给内容贴上标签</title>
</head>
<!-- 将页面高度拉长,显示更多的教学内容 -->
<body style="height: 3000px">
    <!-- 
        html文档中常用的标签
        1. 标题与段落
        2. 文本修饰
        3. 列表
        4. 表格
        5. 表单
        6. 图片与媒体
        7. 布局标签
        8. 其它...

        先介绍一个大名鼎鼎, 永远活在大家想像中, 无色无味的标签<div>
        <div>是一个块级标签,所谓块级是指它默认独占一行,并且支持宽高,后面还会细说  
     -->

     <!-- 1. 标题与段落 -->
     <div>
         <!-- 标题标签共有6级: h1 ~ h6, 大多只用到h1~h3 -->
         <h1>不靠谱的承诺</h1>
         <h2>不靠谱的承诺</h2>
         <h3>不靠谱的承诺</h3>
         <p>说好一起到白头, 你却偷偷焗了油</p>
         <!-- 段落可以有多个 -->
         <p>说好一起当学渣,你却偷偷当学霸</p>
     </div>

     <!-- hr 标签是在页面中添加一条水平分隔线 -->
     <hr>

     <!-- 2. 文本修饰 -->
     <div>
         <!-- 一个段落中我只关注部分内容 -->
         <!-- strong: 文本加粗 -->
        <p>说好一起到<strong style="background: black;color:white">白头</strong>, 你却偷偷<span style="color:green">焗了油</span></p>
        <!-- em: 文本斜体 -->
        <p>说好一起当<em style="color:red">学渣</em>,你却偷偷当学霸</p>
     </div>

     <hr>
     <!-- 3. 列表: 将一组有共同特征的内容归纳在一起 -->
     <div>
        <!-- 无序列表: 每个列表项之间无特定顺序,默认前面有一个小圆点,可嵌套 -->
        <h3>购物清单</h3>
        <ul>
            <li>1. 暖手宝一个, 30元, 被窝太冷</li>
            <li>2. 笔记本电脑一台, 5000, 学php编程</li>
            <li>3. 充气娃娃一个(波波款), 2000, 孤枕难眠</li>
        </ul>

        <!-- 其实这个购物清单更适合有序列表,列表项前自动添加数值序号(从1开始) -->
        <ol>
            <li>暖手宝一个, 30, 被窝太冷</li>
            <li>笔记本电脑一台, 5000, 学php编程</li>
            <li>充气娃娃一个(波波款), 2000, 孤枕难眠</li>
        </ol>

        <!-- 定义列表,类似于名称解释,常用用来做友情链接 -->
        <dl>
            <dt>猪哥</dt>
            <dd>小猪cms开发者,php中文网创始人</dd>
            <dt>朱老师</dt>
            <dd>php中文网讲师, 猥琐的大叔级码农</dd>
        </dl>
     </div>

     <hr>

     <!-- 4. 表格 -->

     <!-- 
        表格是最重要的格式化数据的工具
        其实上面的列表内容,非常适合用表格来展示
        经过分析, 上面列表加上表头需要一个四行四列的表格进行展示

        完整表格,涉及标签: table,caption, thead,tbody,tfoot,tr,th,td
        表格至少涉及三个标签: table(表格), tr(行), th/td(单元格) 
    -->
   
    <!-- 表格中的各个标签支持一些属性设置,不过推荐用css去设置,这里咱们先了解一下这些原生属性 -->
    <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>5000</td>
            <td>1</td>
            <td>学php编程</td>
        </tr>
        <tr  align="center">
            <td>3</td>
            <td>充气娃娃一个(波波款)</td>
            <td>2000</td>
            <td>1</td>
            <td>孤枕难眠</td>
        </tr>
    </table>
    
    <hr>

    <!-- 5. 表单 -->

    <!--
        (1) 表单是最重要的交互工具,用户可以通过表单,将数据提交到后端服务器上进行处理
        (2) 表单涉及:form,label,input,select,textarea,button标签
        (3) 表单form标签中的元素,又称为表单控件,每个控件除了部分公共属性外,还有一些特殊属性
    -->
    <!-- 下面以用户注册表单为例进行演示 -->
    <h2>用户注册</h2>
    <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>
</body>
</html>
运行实例 »

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


常用标签:

基本

<html>…</html>      定义 HTML 文档

<head>…</head>   文档的信息

<meta>                    HTML 文档的元信息

<title>…</title>        文档的标题

<link>                      文档与外部资源的关系

<style>…</style>    文档的样式信息

<body>…</body>   可见的页面内容

<!--…-->                 注释

 

文本

<h1>...</h1>               标题字大小(h1~h6)

<b>...</b>                   粗体字

<strong>...</strong>   粗体字(强调) 

<i>...</i>                      斜体字 

<em>...</em>              斜体字(强调)

<center>…</center>   居中文本

<ul>…</ul>                 无序列表 

<ol>…</ol>                 有序列表

<li>…</li>                    列表项目

<a href=”…”>…</a>    超链接

<font>                         定义文本字体尺寸、颜色、大小

<sub>                         下标

<sup>                         上标

<br>                           换行

<p>                            段落

 

图形

<img src=’”…”>   定义图像

<hr>                   水平线

 

表格

<table>…</table>   定义表格

<th>…</th>            定义表格中的表头单元格

<tr>…</tr>             定义表格中的行

<td>…</td>           定义表格中的单元

 

其它

<form>…</form>    定义供用户输入的 HTML 表单

<frame>                 定义框架集的窗口或框架


css基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给内容穿上衣服(CSS)</title>
</head>
<body>
    <!-- 直接给元素设置样式可使用style属性 -->
    <!-- 多个css声明之间使用分号隔开 -->
    <h3 style="background-color:lightgreen; color: red;">样式规则 = 选择器 + 样式声明 </h3>
    <h3 style="background-color:lightgreen; color: red;">样式规则 = 选择器 + 样式声明 </h3>
    <h3 style="background-color:lightgreen; color: red;">样式规则 = 选择器 + 样式声明 </h3>

    <!-- 发现每个div样式是完全相同的,所以可以将这些样式规则写到一个style标签中,在当前文档中引用 -->
    <style>
        /* 标签选择器 */
        h3 {
            background-color:lightgreen; 
            color: red;
            /* 后面的样式声明可以覆盖前面的声明,这就是样式层叠的意义 */
            color: darkblue; 
        }
    </style>
    <hr>
</body>
</html>

运行实例 »

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

 基本语法: 选择器 {样式声明}
        1. 选择器: 最基本的有标签,类class, id 
        2. 样式声明: 包括属性和值二部分
        3. 样式规则 = 选择器 + 样式声明 


选择器与优先级实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>常用选择器与优先级(selector)</title>
    <style>
        /* 标签选择器 */
        h3 {
            background-color:lightgreen; 
            color: red;
        }

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

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

    </style>
</head>
<body>
     <!-- 背景变更为天蓝色,可以添加一个class属性 -->
     <!-- class类样式选择器的优化级大于标签选择器 -->
    <h3 class="bg-blue">样式规则 = 选择器 + 样式声明</h3>
    <!-- class属性可应用在多个元素上,使他们具有相同的样式 -->
    <!-- 如果要将下面的h3背景改为黄色, 可以添加id属性 -->
    <!-- id选择器的优先级大于class选择器 -->

    <!-- 还有比id级别更高的选择器吗?选择器是没有了,但属性有, 可以给元素添加style属性
    直接将样式作用到当前元素上 -->

    <!-- 再弱弱的问一声, 还有比style属性再牛逼的技术设置元素样式吗? 还真有, 就是JavaScript代码 -->
    <h3 class="bg-blue" id="bg-yellow" style="background-color: pink">样式规则 = 选择器 + 样式声明</h3>
    
    <!-- JavaScript还没有学习,大家不必管代码怎么写,只要关注它的功能就可以 -->
    <script>
        // 用js代码将id为bg-yellow的元素的背景色设置为浅灰色
        document.getElementById('bg-yellow').style.backgroundColor = 'lightgrey';
    </script>
</body>
</html>

运行实例 »

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

总结:
        1.常用的选择器: 标签, class, id,还有一个*,选择所有元素,大家课后可以试验一下
        2.这三个常用选择器的优先级是: 标签 < 类class < id 
        3. style属性和js脚本不是选择器, 不参数排名

css盒模型实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>一切皆盒子(box)</title>
    <style>
    .box1 {
    width: 200px;
    height: 200px;
    background-color: lightblue;

    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 40px;
    padding-left: 50px;

    /* 可以简写:按顺时针 */
    padding: 20px 30px 40px 50px;

    /* 如果左右相等30,而上下不相等20,40,可以这样简写 */
    padding: 20px 30px 40px;

    /* 如果上下也相等40 */
    padding: 40px 30px;

    /* 大家可注意到规律了,不论是二个,还是三个参数,第二个总表示左右内边距 */

    /* 如果四个方向全部相等,例如20 */
    padding: 20px;

    /* 边框与内边距相比, 不是透明的是可见的,除了宽度,还可设置线条样式和颜色 */
    /* 上边框 */
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: red;

    /* 右边框 */
    border-right-width: 10px;
    border-right-style: dashed;
    border-right-color: green;

     /* 下边框 */
     border-bottom-width: 10px;
     border-bottom-style: dotted;
     border-bottom-color: blue;

      /* 左边框 */
      border-left-width: 10px;
      border-left-style: double;
      border-left-color: black;

      /* 以上样式与可以简写 */
      border-top: 10px solid red;
      border-right: 10px dashed green;
      border-bottom: 10px dotted blue;
      border-left: 10px double black;

      /* 如何每个方向的边框宽度,样式与颜色是一样的,还可以进一步简写 */
      border: 10px solid red;

    /* margin有很多特殊的规则,后面单独讨论 */
}

.box2 {
    
    height: inherit;
    background-color: wheat;
}
    </style>
</head>
<body>
     <div class="box1">
         <div class="box2"></div>
     </div>
     

</body>
</html>

运行实例 »

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

 1. 盒模型是布局的基础,页面上的一切可见元素皆可看做盒子
        2. 盒子默认都是块级元素: 独占一行,支持宽度设置
        (根据盒子模型示意图分析)
        3. 盒子模型分为三个层级:
            1. 内容级: 宽高和背景三个属性
                (1): width
                (2): height
                (3): background-color (默认透明)
            2. 元素级(可视范围)
                (1): 包括内容级(width + height + background)
                (2): 内边距: padding
                (3): 边框: border
            3. 位置级:margin, 决定当前盒子与其它盒子之间的位置与关系


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议