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>

html和css的一些常用标签使用的更多相关文章

  1. HTML|CSS之HTML常用标签

    知识内容: 1.标签 2.head内标签 3.body内常用标签 注:本人使用的HTML为HTML5 一.标签 1.标签格式 标签的语法: <标签名 属性1=“属性值1” 属性2=“属性值2”… ...

  2. CSS网页制作常用标签

    做了一个简单的网页,从布局到加内容,遇到了很多小问题.很多标签和属性都不会用或者忘记了.所以以此记录一下. 一.如何将边框四角变圆?(或做一个圆形) 顾名思义,如果要更改边框的角需要用到边框(bord ...

  3. CSS常用标签

    CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...

  4. 前端之常用标签和CSS初识

    外层div的宽度是100%,就是视口的大小,当视口被拉窄到小于内层div的宽度980px时,比如800px,此时 外层div宽度为800px,内层div宽度依然为980px,而css中只设置了外层di ...

  5. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  6. web@前端--html,css,javascript简介、第一个页面(常用标签简介)

    1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...

  7. css常用标签及属性

    css样式表常用的形式有三种,一.行内样式表.二.内部样式表.三.外部样式表 一. <p style="color:red;">nice to meet you< ...

  8. CSS常用标签-手打抄录-感谢原未知博主-拜谢了

    CSS常用标签   CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-siz ...

  9. 实用掌中宝--HTML&CSS常用标签速查手册 PDF扫描版

    实用掌中宝--HTML&CSS常用标签速查手册 内容推荐: 本书第一篇以语法和实例相结合的形式,详细讲解了HTML语言中各个元素及其属性的作用.语法和显示效果:第二篇从CSS基本概念开始,分别 ...

随机推荐

  1. 创建KVM虚拟机

    #此操作是在VMware workstations上面做的,要在开机前 编辑虚拟机设置——>处理器--->虚拟化Intel/VT-x/ept 选项勾选上,如果是在服务器上请在bios界面设 ...

  2. javascript高德地图放到网页中的方法

    javascript高德地图放到网页中的方法 1 先获取到经纬度http://lbs.amap.com/console/show/picker 2 下面代码直接设置下中心点 和标记点就可以了 < ...

  3. 我叫Tomcat：一款web服务器

    我叫Tomcat:一款web服务器 如何将我们的 Java 代码,运行在网络上,初学时,首先接触到的一般都是Servlet以及Jsp(或略过Jsp)而 Tomcat 就是这两者的容器,帮你处理动态网页 ...

  4. 为什么 Python 中的 True 等于 1

    开始的时候,需要用以下函数来做一个判断,根据返回的值来做一些后续判断处理: def is_success(param): if not param: return False return True ...

  5. Kafka无法消费?!我的分布式消息服务Kafka却稳如泰山！

    在一个月黑风高的夜晚,突然收到现网生产环境Kafka消息积压的告警,梦中惊醒啊,马上起来排查日志. 问题现象:消费请求卡死在查找Coordinator Coordinator为何物?Coordinat ...

  6. sql 计算奇数还是偶数

    & 运算符来判断奇数还是偶数 sql判断奇数还是偶数 3&1 返回 1 2&1  返回0 0&1 返回 0

  7. 18-MySQL DBA笔记-MySQL Server调优

    第18章 MySQL Server调优 本章将为读者介绍针对MySQL Server的优化,这也是DBA最熟悉的领域之一.首先我们介绍MySQL的主要参数,然后,讲述常见硬件资源的优化.我们假设读者已 ...

  8. （五）web服务中的异常处理

    一.服务端发布服务 package com.webservice; import javax.jws.WebParam; import javax.jws.WebResult; import java ...

  9. MQTTnet 3.0.5学习笔记

    段时间在使用MQTTnet,都说这个东西比较好,可是翻了翻网上没有例子给参考一下. 今天算是找到了,给高手的帖子做个宣传吧. 原网址如下:https://blog.csdn.net/chenlu520 ...

  10. C#的@标志的使用情况—本篇blog采用Markdown编写

    @(C# 参考--出自官方文档入口) 1.使 C# 关键字用作标识符. @ 字符可作为代码元素的前缀,编译器将把此代码元素解释为标识符而非 C# 关键字. 下面的示例使用 @ 字符定义其在 for 循 ...