html和css的一些常用标签使用

HTML（HyperText Mark-up Language）超文本标签语言

<!DOCTYPE html>    <!--声明这是一个html文档-->
<html>    <!--最外层标签，界定标签的范围-->
    <head>    <!--头标签，用来引入外部文件，指定编码格式，设定标题（浏览器标签页标题）名称-->
        <meta charset="UTF-8">    <!--指定编码格式-->
        <title></title>    <!--标题标签-->
    </head>
    <body>    <!--内容标签（主体）-->
        <h1><!--标题标签，从大到小h1-h6--></h1>
        
        <br/>     <!--换行标签-->
        
        <pre>
            <!--格式化标签（可以识别内容中的换行符号-回车）-->
        </pre>
        
        <p><!--段落标签--></p>
        <!--
            图片标签：img
                src:图片路径
                alt:属性作用
     ①当图片不能正常显示，会提示alt中的文本内容，利于用户体验
     ②爬取图片数据，对图片进行分析（将属性值作为爬取的条件）
        
        -->
        <img src="" alt="" /> 
        <!--
            链接标签：a
            用来跳转网页页面，也可以跳转HTML文件页面
            href属性值是地址，如果没有默认#，点击后没有效果
            target属性：_blank会重新弹出一个窗口
                      _self在当前页面进行显示，默认就是self
        -->
        <a href="http://www.baidu.com"></a>
        
        <div id=""> 块标签
            <span id="">
                修饰一段文字中的一小段文字
            </span>
        </div>
    </body>
</html>

CSS（cascading style sheets）层叠样式表

作用：给标签设置样式
外观样式：文本，字体，大小，网页背景色，图片

CSS书写方式：
1、行内式（容易写过多的重复代码） 

<div style="width: 800px;height: 600px;font-size: 14px;">
.......
</div> 

 2、嵌入式（容易造成相同标签修饰同一种样式问题）

 

<html>
    <head>
        <meta charset="UTF-8">
        <title>css边框属性</title>
        <style type="text/css">
            div{
                width: 200px;设置div宽度
                height: 200px;设置div高度
                border: 3px solid gold;设置边框属性
                border-top: 4px dotted blue ;设置上边线属性
                border-left: 5px solid green;设置左边线属性
                border-bottom: solid #FF0000;设置底部边线属性
                border-right: solid aqua;设置右边线属性
            }
        </style>
    </head>
    <body>
        <div>
            <h3>边框展示</h3>
            aa
            bb
        </div>
    </body>
</html>

 3、外链式（降低代码的耦合性，高内聚，低耦合）
要先创建一个css文件（内容如下）link.css

div{
    background-color: green;
    color: red;
    height: 300px;
    width: 300px;
    
}

div p{
    color: aqua;
    font-family: serif;
    fon
}

再在原HTML文件中引用css文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css外链式</title>
        
        <link rel="stylesheet" type="text/css" href="../css/link.css"/>
        
    </head>
    <body>
        <div id="">
            超文本标记语言(Hyper Text Markup Language)
            <p>
                "超文本"就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
            </p>
        </div>
    </body>
</html>

列表标签：
分类：
1、无序列表：ul
ul>li*5 tab同时生成ul标签下5个li标签
ul标签里还可以添加type属性（相当于编号）：circle空心圆，square实心方块，disc实心圆（默认）

2、有序列表：ol
默认为数字编号（type)
还可指定start属性，从哪个编号开始算
type：1，2，3，4
a,b,c
A,B,C
i,ii,iii,
I,II,III

3、自定义列表：dl
dt标题
dd列表项

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--无序列表-->
        <ul type="square">
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <!--有序列表-->
        <ol start="3" type="i">
            <li>山水有相逢</li>
            <li>搏一搏</li>
            <li>单车变摩托</li>
        </ol>
        
        <!--自定义列表-->
        <dl>
            <dt>日常</dt>
            <dd>学习</dd>
            <dd>睡觉</dd>
        </dl>
    </body>
</html>

 

posted @ 2019-06-01 09:41  Python及时行乐  阅读(600)  评论(0)  编辑  收藏  举报