HTML&CSS

一、HTML

内联和块级标签

内联标签无法在css中设置长宽

块级标签独占一行 

html标签

<!DOCTYPE>

位于<head></head>内

1.<link> 

2.<meta>

<meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的

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

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

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

 3.<script src="hello.js"></script>

<!DOCTYPE html>
<!--此标签告诉浏览器文档使用哪种html或者XHTML规范；声明文档的解析类型（document.compatMode）,避免浏览器的怪异模式；此声明被浏览器识别并使用，如果没有改声明，则浏览器使用怪异模式。BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。-->
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Title name</title>

        <link rel="icon" href="https://www.jd.com/favicon.ico">
        <link rel="stylesheet" type="text/css" href="./index.css">
        <meta http-equiv="refresh" content="5;URL=https://www.baidu.com">
        <meta name="keywords" content="zyl,test">
    </head>
    <body>

        <!--<h1>hello</h1>-->
        <!--<a href='https://www.jd.com/'>点击</a>-->

        <!--<img src="http://img2.imgtn.bdimg.com/it/u=4289651615,1500379285&fm=11&gp=0.jpg" title="egon">-->

    </body>
</html>

 <body></body>内标签

1.<a></a>超链接标签，用来超链接到另外一个位置；href属性是超链接地址

<a href='https://www.jd.com/'>点击</a>
<a href="http://www.baidu.com" target="_top"><img src="./test.jpg" title="test"></a>  #将图像作为链接，title属性是悬浮在图片上时显示的图片名称
如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开；_top跳出框架

链接到页面的不同位置

<body>

<a href="#c1"> test1 </a>
<a href="#c2"> test2 </a>
<a href="#c3"> test3</a>

<div style="height: 500px;background-color: red" id="c1">first</div>
<div style="height: 500px;background-color: #66cc66" id="c2">second</div>
<div style="height: 500px;background-color: #dca7a7" id="c3">third</div>

</body>

 2.列表标签ul ol dl

表单标签 table

'''
<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>
    <style>
        td {
            height: 20px;
            width: 200px;
            table-layout: fixed;
            word-wrap: break-word;
            overflow:hidden;
            white-space:nowrap;
        }
    </style>
</head>
<body>
<!--unorder list-->
<ul>
    <li>test1</li>
    <li>test2</li>
</ul>
<!--order kist-->
<ol>
    <li>test3</li>
    <li>test4</li>
</ol>

<dl>
    <dt>title</dt>
    <dd>context</dd>
</dl>


<table border="1px" cellpadding="5px" cellspacing="2px">
    <tr>
        <th>name</th>
        <th>sex</th>
        <th>age</th>
    </tr>
    <tr>
        <td>zyl1</td>
        <td colspan="2">123</td>

    </tr>
    <tr>
        <td>33333333333</td>
        <td>333333333333</td>
        <td rowspan="2"> 33333333</td>
    </tr>
    <tr>
        <td>zyl3</td>
        <td>text</td>
    </tr>
</table>

</body>
</html>
View Code

3.<input>

<input type='value'>

值描述
button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox 定义复选框。
file 定义输入字段和 "浏览"按钮，供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

 

4.<select>标签

可以创建单选或者多选菜单；<select>元素中的<option>标签用于定义列表中的可用选项

select 元素是一种表单控件，可用于在表单中接受用户输入

5.表单标签<form>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">

    <p><label for="c1">用户名:</label>
        <input type="text" name="usrname" placeholder="usrname" id="c1"></p>
    <p>密码：<input type="password" placeholder="pwd" disabled id="c2"></p>
    <p>性别：<input type="radio" name="sex" value="0">男 <input type="radio" name="sex" value="1">女</p>
    <p>爱好：<input type="checkbox" name="hobby" value="footbool">足球<input type="checkbox" name="hobby" value="basktbool">篮球</p>
    <p>头像：<input type="file" name="" value=""></p>
    <p><input type="reset"></p>
    <p><input type="button" value="按钮" onclick="alert('wwwwwwww')"></p>
    <p><input type="hidden" value="test"></p>
    <p><select name="provice" required>
        <option value="1" name="河北" selected>河北</option>
        <option value="2" name="河南">河南</option>
        <option value="3" name="北京">北京</option>
    </select></p>
    <p><textarea name="gerenjianjie" id="" cols="30" rows="10" placeholder="个人简介" ></textarea></p>
    <p><input type="submit"></p>
</form>


</body>
</html>
View Code

 

二、CSS

CSS简介

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素（样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观）
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一

CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号(;)结束，声明组以大括号({})括起来

CSS引入方式

1.行内式

   行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

<p style="background-color: red">hello </p>

2.嵌入式

嵌入式是在标签<head>的<style>标签对中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            background-color: blueviolet;
        }
    </style>
</head>
<body>
<h1>zyl</h1>
<p style="background-color: red">hello </p>
</body>
</html>

 CSS选择器

 基本选择器

组合选择器

1.E,F 多元素选择器，同时匹配所有E或F元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div,span{
            color: red;
        }
        .s,.d{
            color: #66cc66;
        }
    </style>
</head>

<body>
<div class="d">
    <p>div p </p>
</div>
<span class="s">
    <p>span  p </p>
</span>
</body>
</html>
View Code

2.E F   后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div .d{
            color: red;
        }

    </style>
</head>

<body>
<div >
    <p class="d">div p </p>  #红色显示
</div>
<span >
    <p class="d">span  p </p>  #非红色
</span>
</body>
</html>
View Code

3.E>F 子元素选择器，匹配所有E元素的子元素F

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*只对其子元素匹配*/
        div>.d{
            color: red;
        }

    </style>
</head>

<body>
<div >
    <p class="d">div p </p>
    <span >
    <p class="d">span  p </p>
</span>
</div>

</body>
</html>
View Code

4.E+F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--只有p2变红，p4不变-->
       .d1+.d2{
            color: red;
        }

    </style>
</head>

<body>
<div >
    <p class="d1">div p </p>
    <p class="d2">span  p2 </p>
    <p class="d3">span  p3 </p>
    <p class="d2">span  p4 </p>
</div>

</body>
</html>
View Code

5.E ~ F   普通兄弟选择器（以破折号分隔）        

 

属性选择器

 

 伪类

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}
'''
        a:link（没有接触过的链接）,用于定义了链接的常规状态。

        a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
        
        a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
        
        a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
        
        伪类选择器 : 伪类指的是标签的不同状态:
        
                   a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
        
        a:link {color: #FF0000} /* 未访问的链接 */
        
        a:visited {color: #00FF00} /* 已访问的链接 */
        
        a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
        
        a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

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

    <style>

       .top{
           background-color: rebeccapurple;
           width: 100px;
           height: 100px;
       }
        .bottom{
            background-color: green;
            width: 100px;
            height: 100px;
        }

        .outer:hover .bottom{
            background-color: yellow;
        }

        注意:一定是outer:hover  控制outer里某一个标签,否则无效

        .top:hover .bottom{
            background-color: yellow;
        }
    </style>
</head>
<body>


<div class="outer">
    <div class="top">top</div>
    <div class="bottom">bottom</div>
</div>

</body>
</html>
View Code

 

   

css优先级

优先级顺序：

 内联样式style1000>ID属性个数#id100>CLASS属性个数.class10>html标签p1

继承：

 

1.边框属性

 

posted @ 2017-09-22 10:30  ling_distance  阅读(184)  评论(0)  编辑  收藏  举报