day12 html基础

一、html简介

超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则

浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）

静态网页文件扩展名：.html 或 .htm

二、html格式

<!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档 <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。 <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 <title></title>定义网页标题，在浏览器标题栏显示。 <body></body>之间的文本是可见的网页主体内容

三、html标签格式

块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。

3.1 <!DOCTYPE> 标签

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat

3.2 head标签

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

(1)name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="搜索，关键字"> 
<meta name="description" content="搜索，关键字">

(2)http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)
 
<meta http-equiv="content-Type" charset=UTF8">
 
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />

四、body标签

1、 <hn>: n的取值范围是1~6; 从大到小. 用来表示标题

<h1>1</h1>
<h1>han</h1>
<h1>yuan3</h1>
<h1>han1</h1>
<h1>yuan5</h1>

2、: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
1233123
12312312
<p>换行</p>
</body>
</html>

3、 : 加粗标签

 <b>hello加粗</b>

4、和: 上角标和下角表

 2<sub>3</sub>
 2<sup>3</sup>

5、<hr>:水平线

<hr>

6.ul、ol、dl

<ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]

<ol>: 有序列表
         <li>:列表中的每一项.

<dl>  定义列表

         <dt> 列表标题
         <dd> 列表项

五、form表单

5.1 input系列

例子：输入用户名密码登录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h3>登录</h3>
<form action="" method="get">

    <p>
        用户名：<input type="text" name="username" value="">
    </p>
        <p>密码：<input type="password" name="pwd" value=""></p>
    <p>
        爱好:<input type="checkbox" name="h" value="b" checked="checked">篮球 //设置默认值
            <input type="checkbox" name="h" value="h2">足球
            <input type="checkbox" name="h" value="h3">弹球

    </p>
    <p>性别:<input type="radio" name="sex" checked="true">男</p>//设置默认值
    <p>性别:<input type="radio" name="sex">女</p>
    <p>
        <input type="submit" value="登录">
    </p>
    <p>
        <input type="file">
    </p>
    <p>
        <input type="reset">
    </p>
    <p>
        <input type="submit" value="submit">
    </p>
</form>

</body>
</html>

5.2 select: option

 <select name="province" id=""  multiple >//设置可以多选
                <option value="hebei">河北省</option>
                <option value="henan">河南省</option>
                <option value="hubei" selected>湖北省</option>//默认值
                <option value="guangdong" selected>广东省</option>
                <option value="yunnan">云南省</option>
            </select>

5.3 textarea：多行文本框　

<p>简介：
   <textarea cols="23" rows="10" name="person">
</textarea>
 </p>

5.4 label：用户易用性的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>
    <label for="user">姓名:</label>
    <input type="text" name="username" id="user">
</p>
<p>
    <label for="pwd">密码:</label>
    <input type="password" name="pwd" id="pwd">

</p>
<select id="" size="2" name="ceshi" multiple>
    <option value="hebei">河北</option>
    <option value="henan">河南</option>

</select>
</body>
</html>

六、Table

6.1 格式

<table>
         <tr> //行
                <td>标题</td>//列
                <td>标题</td>
         </tr>
         
         <tr>
                <td>内容</td>
                <td>内容</td>
         </tr>
</table>

6.2 属性

<tr>: table row

<th>: table head cell

<td>: table data cell


属性:

    border: 表格边框.

    cellpadding: 内边距

    cellspacing: 外边距.

    width: 像素 百分比.（最好通过css来设置长宽）

    rowspan:  单元格竖跨多少行

    colspan:  单元格横跨多少列（即合并单元格）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1" cellpadding="10px" cellspacing="5px">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>工资</th>
        </tr>
         <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td colspan="2">11</td>
             <td>1</td>

            <td rowspan="2">1</td>
        </tr>
        <tr>

            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>

    </table>
</body>
</html>

七、CSS

7.1 基本选择器

7.2 组合选择器

E,F   多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔      :div,p { color:#f00; }
 
E F   后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝
 
E > F   子元素选择器，匹配所有E元素的子元素F            :div > p { color:#f00; }
  
E + F   毗邻元素选择器，匹配所有紧随E元素之后的同级元素F  :div + p { color:#f00; } 
 
E ~ F   普通兄弟选择器（以破折号分隔）                 :.div1 ~ p{font-size: 30px; }

7.3 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*空格算后代，儿子孙子*/
        /*>找到所有的子标签outer的子p2变红*/

        /*~找outer的兄弟标签但是只会向下找,可以跨过*/

        /*.outer p{    !*空格算后代，儿子孙子 P2 P3 变红*!*/
            /*color: red;*/
        /*}*/

         /*.outer>p{  !*>找到所有标签为outer 的class 下的 子 p  p2变红*!*/
            /*color: red;*/
        /*}*/
        .outer+p{ /*+毗邻元素选择器，匹配所有紧随E元素之后的同级元素F*/
            color: red;
        }
        /*.outer~p{*//*~找outer的兄弟标签但是只会向下找,可以跨过*/
            /*color: red;*/
        /*}*/


    </style>
</head>
<body>
<p>hello world</p>
<p id="p2" class="p_ele">hello world</p>
<p class="p_ele">hello world</p>
<h2 class="title">title</h2>

<div class="outer">
    <p>p2</p>
    <p>p3</p>
    <div>
        <p>p3</p>
    </div>
    <a href="">点击</a>

</div>

<div class="outer">
    <p>p2</p>
    <div>
        <p>p3</p>
    </div>
    <a href="">点击</a>

</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
            /*标签选择器*/
            p{
                color: green;
            }
    </style>
</head>
<body>
<p>hello world</p>
</body>
</html>

7.4 id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
           
            #p2{
                color: green;
            }
    </style>
</head>
<body>
<p>hello world</p>
<p id="p2" class="p_ele">hello world</p>
</body>
</html>

7.5 类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
           
            .p_ele{
                color: green;
            }
    </style>
</head>
<body>
<p>hello world</p>
<p id="p2" class="p_ele">hello world</p>
</body>
</html>

7.6 通用选择器　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
         /*通用选择器*/
           *{
               color: aqua;
           }
    </style>
</head>
<body>
<p>hello world</p>
<p id="p2" class="p_ele">hello world</p>
</body>
</html>

7.7 优先级

优先级根据代码从上到下的顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         /*优先级*/
            p{
                color: red;
            }

            #p2{
                color: gold;
            }

            .p_ele{
                color: salmon;
            }
    </style>
</head>
<body>
<p>hello world</p>
<p id="p2" class="p_ele">hello world</p>
</body>
</html>

7.8 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /*改变自定义*/
        /*所有改变*/
        [item]{  
            color: aqua;
        }
        /*只改变2*/
         [item="2"]{
            color: aqua;
        }

    </style>
</head>
<body>
<ul>
    <li item="1">111</li>
    <li item="2">111</li>
    <li item="3">111</li>
    <li item="4">111</li>
    <li item="5">111</li>
    <li>11</li>
</ul>

</body>
</html>

**7.9 * 全部**

  *{
        color:gold
    }

8 CSS引入方式

方式一：

head中
<style>
 </style>

方式二：

<!--链接式引入-->
    <link rel="stylesheet" href="index.css">

八、属性操作

8.1文字颜色

{ color: rebeccapurple;  }

8.2 水平对齐方式　

text-align 属性规定元素中的文本的水平对齐方式。

left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。

 .attrDiv{
            text-align: center;
}

8.3 文本属性

font-size: 10px;
line-height: 200px;   文本行高 
vertical-align:－4px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效
text-decoration:none       text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线

8.4 背景属性

background-color
background-image
background-repeat
background-position

.inputAttr4{
            background: url("i_pwd.jpg")no-repeat 180px ; 设置图片
            background-color: red; 设置颜色
            background-position: right top（20px 20px）;
            background-repeat: no-repeat;(repeat:平铺满)

        }

九、float属性

9.1 简介

margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像。

<!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">
<head>
    <title>2.3-float属性</title>
    <style type="text/css">
        #a
        {
            background-color:Red;
            height:50px;
            width:100px;
        }
        #b
        {
            background-color:Yellow;    
            height:50px;
            width:200px;
        }
        #c
        {
            background-color:Blue;   
            height:50px;
            width:300px;
         }
         #d
         {
            background-color:Gray;
            height:50px;
            width:400px;
         }

    </style>
</head>
<body>
<div id=a >div-a</div>
<div id=b>div-b</div>
<div id=c>div-c</div>
<input type="text" value="input1"  />
<input type="text" value="input2" />
<input type="text" value="input3 " />
<div id=d>div-d</div>
<input type="text" value="input4 " />
</body>
</html>
复制代码

9.2 float:left

说明：元素向左浮动。

9.2.2 代码变更

input2 添加：float:left

div-b 添加：float:left

div-d 添加：float:left

9.2.3 变更后视图

　　① 浏览器的宽度“不够长”时

　　② 浏览器的宽度"够长"时

9.2.4 结论

当前元素分类(float:left)	下一个紧邻元素分类(不含float)	结论
块级元素(a)	块级元素(b)	b会填充a遗留下来的空间，a会和b发生重叠，a的图层在上面。
块级元素(a)	内联元素(b)	b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。
内联元素(a)	块级元素(b)	b不会跟随a的移动。
内联元素(a)	内联元素(b)	b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。

9.3 float:right

说明：元素向右浮动。

9.3.1 代码变更

input2元素：添加 float:right

div-b 添加：float:right

div-d 添加：float:right

9.3.2 变更后视图

　　① 浏览器的宽度“不够长”时

　　② 浏览器的宽度"够长"时

9.3.3 结论

当前元素分类(float:right)	下一个紧邻元素分类(不包含float)	结论
块级元素(a)	块级元素(b)	b会填充a遗留下来的空间，若a会和b发生重叠(父容器宽度减少)，a的图层在上面。
块级元素(a)	内联元素(b)	b会填充a遗留下来的空间。
内联元素(a)	块级元素(b)	b不会跟随a的移动。
内联元素(a)	内联元素(b)	b会填充a遗留下来的空间。

9.3.4 相邻元素含有float属性

因内联元素的特性，最好别把内联元素与块级元素相邻使用float属性。

下面都以块级元素为例：

默认视图：

9.4 float:left

给这三个div都添加 float:left

视图

　　　　①浏览器的宽度"足够长"

　　　　②浏览器的宽度"不够长"

9.4.1 结论

　　　　Ⅰ 相邻的浮动元素，left属性最前面的元素，排在最左面。

　　　　Ⅱ 成为浮动元素后，在浮动层拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。

9.5 float:right

　　　　给这三个div都添加 float:right

视图

　　　　①浏览器的宽度"足够长"

　　　　②浏览器的宽度"不够长"

9.5.1 结论

　　　　Ⅰ 相邻的浮动元素，right属性最前面的元素，排在最右面。

　　　　Ⅱ 成为浮动元素后，在浮动层拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行。

9.6 height高度不等的块级元素

把div-a的height值设为大于div-b，三个div都添加 float:left后：

视图

　　　　①浏览器的宽度"足够长"

　　　　②浏览器宽度缩小时

　　　　③浏览器宽度进一步缩小时

9.6.1 结论

　　　　Ⅰ height不相等的div浮动元素排序时，照拥有内联元素的"特性"，当多个浮动元素1排容不下时，就换行

posted @ 2017-07-17 15:10 hanjialong 阅读(216) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

佛系宅男

day12 html基础

一、html简介

二、html格式

三、html标签格式

四、body标签

五、form表单

5.1 input系列

5.2 select: option

5.3 textarea：多行文本框

5.4 label：用户易用性的

六、Table

6.1 格式

6.2 属性

七、CSS

7.1 基本选择器

7.2 组合选择器

7.3 标签选择器

7.4 id选择器

7.5 类选择器

7.6 通用选择器

7.7 优先级

7.8 属性选择器

7.9 * 全部

8 CSS引入方式

八、属性操作

8.1文字颜色

8.2 水平对齐方式

8.3 文本属性

8.4 背景属性

九、float属性

9.1 简介

9.2 float:left

9.2.2 代码变更

9.2.3 变更后视图

9.2.4 结论

9.3 float:right

9.3.1 代码变更

9.3.2 变更后视图

9.3.3 结论

9.3.4 相邻元素含有float属性

9.4 float:left

视图

9.4.1 结论

9.5 float:right

视图

9.5.1 结论

9.6 height高度不等的块级元素

视图

9.6.1 结论

公告

5.3 textarea：多行文本框　

7.6 通用选择器　

**7.9 * 全部**

8.2 水平对齐方式　