html概述

    head标签

        title    显示网站的标题

        meta     提供有关页面的原信息

        link     链接css资源文件、网站图标

        style    定义内部样式表

        script   链接脚本js文件

   body标签

        块级元素    div  p  h1-h6  ul  ol  li  table  form

        行内元素    a span br i em strong label

        行内块元素  img input

        其他标签    br hr ...

        特殊符号      > ...

        table 表格标签

        form  表单标签

    标签特性

1.head标签

文档的头部描述了文档的各种属性和信息，包括文档的标题、编码方式及URL等信息,

这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端）的等

<!DOCTYPE html>

<!--网页显示为en，可以翻译-->

<html lang="en">

<head>

1.title:

    <!-- 文档的标题 -->

    <title>路飞学城</title>

2.meta:

    <!--指定文档的内容类型和编码类型 -->

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <!-- 5秒之后 重定向 到路飞学城的网站 -->

    <meta http-equiv="refresh" content="5;URL=https://www.luffycity.com"/>

    <!--告诉IE浏览器以最高级模式渲染当前网页-->

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <!-- 为了我们的SEO优化  工作的时候下面这两句 要写-->

    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

    <meta name="description" content="路飞学城">

3.link

    <!-- 定义我们的网站图标 -->

    <link rel="icon" href="./fav.ico">

    <!-- 引入外部样式表 -->

    <link rel="stylesheet" type="text/css" href="./index.css">

4.style

    <!-- 定义内部样式表 -->

    <style type="text/css">

    </style>

5.script

    <!-- 定义内部脚本文件 -->

    <script type="text/javascript">

    </script>

    <!-- 定义外部js -->

    <script src="./index.js"></script>

</head>

<body>

</body>

</html>

2、body标签

　　（1）块级元素  display:block

　　<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

　　独占一行，宽高可设置，不设置为父的100%

<div>盒子标签</div>

<p>段落标签</p>

h：标题标签，标题h1-h6 没有h7，不要随意的通过h标签改变文字的大小

        <h1>h1标签</h1>

        <h2>h2标签</h2>

        <h3>h3标签</h3>

        <h4>h4标签</h4>

        <h5>h5标签</h5>

        <h6>h6标签</h6>

ul li 列表标签，无序列表，默认是实心圆disc

        <ul type="square">

            <li>无序列表</li>

            <li>无序列表</li>

        </ul>

        ul标签的属性：

        type：列表标识的类型

        disc：实心圆(默认值)

        circle：空心圆

        square：实心矩形

        none：不显示标识

ol li 列表标签，有序列表，默认是数字

        <ol style="list-style: none">

            <li>有序列表</li>

            <li>有序列表</li>

        </ol>

        ol标签的属性：

        type：列表标识的类型

        1：数字

        a：小写字母

        A：大写字母

        i：小写罗马字符

        I：大写罗马字符

        列表标识的起始编号默认为1

<table>表格标签</table>

<form action="">表单标签</form>

　　

　　（2）行内元素 display:inline　

　<a> <span> <br> <i> <em> <strong> <label>　　

　　在一行内展示，不能设置宽高，根据内容填充宽高

<a href="http://www.mi.com" target="_blank" name="luffy">luffy</a>

<a href="http://www.mi.com" target="_self" name="luffy">luffy</a>

        target:_blank 在新的网站打开链接的资源地址

            _self 在当前网站打开链接的资源地址

        title: 鼠标悬停时显示的标题

<a href="a.zip">下载包</a>

<a href="mailto:zhaoxu@tedu.cn">联系我们</a>

<a href="#">跳转到顶部</a>

<a href="#p1">跳转到p1</a>

<!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码

     javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。 -->

<a href="javascript:alert(1)">内容</a>

<a href="javascript:;">内容</a>

<span>span标签</span>

<i>icon标签</i>

<em>字符标签</em>

<strong>strong标签</strong>

<label for="">label标签</label>

<br> 换行标签

　　

　　（3）行内块元素 display:inline-block

　　<img> <input>

　　在一行内展示，可设置宽高

<img src="图片地址" alt="图片加载失败时显示的内容" title="鼠标hover的提示信息">

        src: 要显示图片的路径.

        alt: 图片没有加载成功时的提示.

        title: 鼠标悬浮时的提示信息.

        width: 图片的宽

        height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

<input type="text" name="username" value="内容">

        type：

            text 文本输入框

            password 密码输入框

            radio 单选框

            checkbox 多选框

            submit 提交按钮

            button 按钮(需要配合js使用.)

            file 提交文件

　　

　　（4）其他标签

        <br> 换行

        <hr> 分割线

        <b></b>加粗

        <i></i>斜体

        <u></u>下划线

        <s></s>删除线

        <sup></sup>上标

        <sub></sub>

        <em></em>斜体

        <strong></strong>粗体

　　

　　（5）特殊符号

浏览器显示时 会移除源代码中多余的空格和空行；所有连续的空格或空行都会被算作一个空格；
 特殊符号对照表： http://tool.chinaz.com/Tools/HtmlChar.aspx
        常用的特殊符号：

            空格     &nbsp;

            >       &gt;

            <       &lt;

            &       &amp;

            ¥       &yen;

            版权     &copy;

            注册     &reg;

　　（6）table表格

      table 属性： cellspacing 单元格之间的距离 
<table border="1px" cellspacing="0">

            <!--表格头-->

            <thread>

                <tr>  <!--表格行row-->

                    <th>星期1</th>  <!--表格列 table-head，【注意】这里使用的是th-->

                    <th>星期2</th>

                </tr>

            </thread>

            <!--表格体-->

            <tbody>

                <tr>  <!--表格行row-->

                    <td>math</td>   <!--表格列 table-data，【注意】这里使用的是td-->

                    <td>chinese</td>

                    <td>physical</td>

                    <td>sports</td>

                </tr>

            </tbody>

</table>

　　

表格合并： rowspan="2" colspan="3"
　　　　   rowspan 合并行(竖着合并)
　　           colspan 合并列(横着合并)

 <table border="2px" cellspacing="0">

            <thead>

                <tr>

                    <th></th>

                    <th>星期3</th>

                    <th>星期1</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td rowspan="2">上午</td>   <!--rowspan 合并行(竖着合并)-->

                    <td>sports</td>

                    <td>math</td>

                </tr>

                <tr>

                    <td>sports</td>

                    <td>math</td>

                </tr>

                <tr>

                    <td rowspan="2">下午</td>

                    <td>sports</td>

                    <td>math</td>

                </tr>

            </tbody>

            <tfoot>

                <tr>

                    <td colspan="5">备注：2018-01-02</td>  <!--colspan 合并列(横着合并)-->

                </tr>

            </tfoot>

        </table>

（7）form表单

　　<form>允许出现表单控件</form>；表单用于显示信息，并将信息提交给服务器

        表单控件：

            按钮：button reset submit

            文本：label text password radio checkbox file textarea

            下拉框：select option

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单控件</title>

</head>

<body>

    <div class="form">

        <!-- form标签是一个块级元素   被提交 -->

        <form action="https://www.baidu.com" method="get">

            <p>

                <!-- label标签行内元素  input是行内块元素-->

                <label for='user'>用户名:</label>

                <input type="text" name="username" id="user" placeholder="请输入用户名">

            </p>

            <p>

                <label for="password">密码：</label>

                <input type="password" name="password" id="password" placeholder="请输入密码">

            </p>

            <!-- 单选框  checked会被默认选中，产生互斥的效果 name值要相同-->

            <p>

                用户性别：

                <input type="radio" name="sex" value="男" checked="">男

                <input type="radio" name="sex" value="女">女

            </p>

            <!-- 复选框 -->

            <p>

                用户的爱好:

                <input type="checkbox" name="checkfav" value="吃" checked="check">吃

                <input type="checkbox" name="checkfav" value="喝">喝

                <input type="checkbox" name="checkfav" value="玩">玩

                <input type="checkbox" name="checkfav" value="乐">乐

            </p>

            <p>

                <!-- 文本域 -->

                自我介绍：

                <textarea cols="20" rows="5"  name="txt" placeholder="请做自我介绍"></textarea>

            </p>

            <p>

                <!-- 下拉列表 -->

                <select name="sel" size="3" multiple="">

                    <option value="深圳" selected>深圳</option>

                    <option value="北京">北京</option>

                    <option value="沙河">沙河</option>

                    <option value="山东">山东</option>

                    <option value="福建">福建</option>

                </select>

            </p>

            <p>

                <!-- 显示普通的按钮 -->

                <input type="button" name="btn" value="提交" disabled="disabled">

                <!-- 重置按钮 -->

                <input type="reset" name="">

                <!-- 提交form表单使用 type=submit按钮 -->

                <input type="submit" name="btn" value="submit">

            </p>

        </form>

        <button type="button">按钮</button>

        <!-- 文件上传 -->

        <form action="https://www.mi.com" enctype="multipart/form-data">

            <p>

                <input type="file" name="textFile">

            </p>

        </form>

    </div>

</body>

</html>

　　表单属性

　　表单控件

3、标签特性

    1.标签属性
        标签可以看成是一个对象，对象就应该有它自己的属性和方法。
        注意事项：
            HTML标签除一些特定属性外可以设置自定义属性，一个标签可以设置多个属性用空格分隔，多个属性不区分先后顺序。
            属性值要用引号包裹起来，通常使用双引号也可以单引号。
            属性和属性值不区分大小写，但是推荐使用小写。

    2.标签分类：
        HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
        常用的块状元素：  1.独占一行 2.可设置宽高
            <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
        常用的行内元素：  1.一行内展示 2.不可设置宽高
            <a> <span> <br> <i> <em> <strong> <label>
        常用的行内块状元素：  1.一行内展示 2.可设置宽高
            <img> <input>

        块级元素特点：display:block;
            1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行
            2、元素的高度、宽度、行高以及顶和底边距都可设置。
            3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
        行内元素特点：display:inline;
            1、和其他元素都在一行上；
            2、元素的高度、宽度及顶部和底部边距不可设置；
            3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
        行内块状元素的特点：display:inline-block;
            1、和其他元素都在一行上；
            2、元素的高度、宽度、行高以及顶和底边距都可设置
        注意
            我们可以通过display属性对块级元素、行内元素、行内块元素进行转换，为后面页面布局做好了准备。

    3.标签嵌套规则：
        块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：
            <div><div></div><h1></h1><p><p></div> ✔
            <a href=”#”><span></span></a> ✔  a 可以包含 img
            <span><div></div></span> ❌
        某些块级元素不能放在p标签里面，比如
            <p><ol><li></li></ol></p> ✔
            <p><div></div></p> ❌ 个别例外，大家注意
        有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
            h1、h2、h3、h4、h5、h6、p
        li元素可以嵌入ul，ol，div等标签

前端- html -总结的更多相关文章

  1. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  2. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 总结：Mac前端开发环境的搭建（配置）

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

  5. Fis3的前端工程化之路[三大特性篇之声明依赖]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  6. Fis3的前端工程化之路[三大特性篇之内容嵌入]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  7. Fis3的前端模块化之路[基础篇]

    Fis3版本:v3.4.22 fis3是一个构建工具 解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...

  8. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  9. 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  10. 前端框架 EasyUI （0） 重新温习（序言）

    几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

随机推荐

  1. django中的权限控制（form增删改）

    Django默认提供了权限控制,但只能对使用了其自带的登录认证的用户进行权限控制,说白了就是只能对存储在auth_user表中的用户进行权限控制,但不能对未登录过的用户进行权限控制.但如果通过集成LD ...

  2. spine获取骨骼位置

    time: 2015/07/23 版本: /****************************************************************************** ...

  3. JAVA入门之基础语言

    在上一章文章中,读者已经了解了如何搭建Java 开发环境及Java 程序的开发过程.从本篇文章开始讲解Java 的基本语言.这些基本语言的语法和其他一些编程语言相比有些是类似的,但还有很多不同之处,读 ...

  4. idea指定SpringBoot启动.properties文件

    比如我的项目下有2个.properties文件,一个是application.properties,一个是application-local.properties,在本地的时候想指定用applicat ...

  5. 铁乐学python_md5校验两个文件的一致性

    # 写一个函数,参数是两个文件的路径 # 返回的结果是T/F # 判断两个文件的md5值是否相同 import hashlib def diff_md5(file1,file2): def chick ...

  6. 一、动态网络编程的概念 二、Tomcat服务器搭建 三、Servlet组件介绍

    一.动态网络编程的概念 动态网页:结合了HTML以外的高级程序编程语言和数据库技术生成的页面. 动态网页编程技术: ASP,PHP,JSP HTTP协议:规范浏览器和服务器之间通信的数据格式. 浏览器 ...

  7. 【教程】【FLEX】#004 反射机制

    总结: 目前用到反射的主要有两个方法 1.  getDefinitionByName    //根据类名,返回对象(反射实例化对象) 2.  describeType                 ...

  8. 微软YY公开课[《微软中国云计算Azure平台体验与新企业架构设计》 周六晚9点

    YY频道是 52545291//@_勤_: YY账号真的是一次一账号啊! 全然记不得之前注冊的//@老徐FrankXuLei: 最火爆的微软免费公开课.第一次顶峰126人.第二次96人.第三次我们又来 ...

  9. Kubernetes dashboard 配置

    安装前准备 下载dashboard的yaml文件 wget -O kube-dashboard.yaml https://git.io/kube-dashboard-no-rbac 这个版本是没有权限 ...

  10. 20145203盖泽双 《Java程序设计》第五周学习总结

    20145203盖泽双 <Java程序设计>第五周学习总结 教材学习内容总结 1.Java中所有错误都会被打包为对象,运用try.catch,可以在错误发生时显示友好的错误信息,还可以在捕 ...