兄弟会第十五天

置顶
创建时间:
阅读: 评论:
  1. 前端入门

欢迎来到 暖阳的博客! 点击 MyGitHub可以进入我的Github.

前端入门

今天是第十五天了，今天学习了HTML和CSS解开了许许多多的疑惑，下面是一些命令的清单

  • 水平分隔符标签:

  • 预格式化文本标签(保留文本的原有格式): 

    文字

  • 将文字设置为上标或下标: 文字， 文字

  • 块引用标签:

    内容
    （在这个标签内部的元素显示的时候都会向右边缩一个单位。）

  • 行内标记：内容： 标签被用来组合文档中的行内元素。
    可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。

  • 区隔标记：

    内容
    ：
    标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
    注释：
    是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。
    提示：请使用
    元素来组合块级元素，这样就可以使用样式对它们进行格式化。

    图片说明 img标签必选属性： src：图片地址，可以是本地图片，也可以是其他网页的图片 alt：规定图像的替代文本。当图片无法正常显示的时候会显示这里的文本。 img标签常用属性： height：设置图像高度 width：设置图片宽度 border：图片边框的设置 img标签的所有属性及其描述：

    标签列表：

  • 标签定义列表项目。
  • 标签可用在有序列表 (
      ) 和无序列表 (
        ) 中。 常用属性：type（规定使用哪种项目符号。）

      • 无序标签：

        • 有序标签：


            可以设置样式：text-decoration: none; —去掉原有标签的文本装饰

            表格由

            标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由
            标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
            表格的表头使用             		标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。
            表格的边框属性boeder：设置表格的边框。如果不定义边框属性，表格将不显示边框。
            单元格边距cellpadding：设置表格的内边距，即每个            		中的内容与格子的距离。
            单元格间距cellspacing：设置表格的外边距，即每个            		格子之间的距离。
            合并列单元格colspan：合并同一行的某几列（横向）
            合并行单元格rowspan：合并同一列的某几行（纵向）

            5.表单标签(form)

            HTML 表单用于收集用户输入。表单包含许多表单元素，表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。多数情况下被用到的表单标签是输入标签（<input>），输入类型是由类型属性（type）定义的。
            标签常用属性： 1.Action 属性：action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到 web 服务器上的网页。如果省略 action 属性，则 action 会被设置为当前页面。 2.Method 属性：method 属性规定在提交表单时所用的 HTTP 方法（一般为GET 或 POST，默认为GET） 何时使用 GET？ 如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。（当您使用 GET 时，表单数据在页面地址栏中是可见的）。注：GET 最适合少量数据的提交。浏览器会设定容量限制。 何时使用 POST？ 如果表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

            元素常用属性：
            name 属性：如果要正确地被提交，每个输入字段必须设置一个name属性。name属性规定元素的名称。
            value 属性：指定元素value的值。
            type 属性：type属性规定要显示的元素的类型。大多数经常被用到的输入类型有：

            类型 描述
            text 定义常规文本输入
            password 输入字符不可见，而是以星号或圆点替代显示
            radio 定义单选按钮输入（选择多个选择之一）
            checkbox 定义了复选框. 选取一个或若干选项
            submit 定义提交按钮（提交表单）
            button 定义普通的按钮

            其他类型详见：http://www.runoob.com/tags/tag-input.html
            6.块

            div与span

            div是一个html标签, 一个块级元素(单独显示一行), 单独使用没有任何意义, 必须结合CSS来使用, 主要用于页面的布局;
span是一个html标签, 一个内联元素(显示一行), 它单独使用没有任何意义, 必须结合css使用, 主要对括起来的内容进行样式的修饰;
总结:
    常见的行内标签和 块级元素分别有哪些?
    行内标签:span, strong, a, img, input, textarea
    块级元素:div, h1->h6, p, hr, pre, ul, ol, dd, dt, th. tr, td
    两者的区别与特性；
    1).块级元素独占一行空间， 行内元素只占据自身宽度的空间;
    2).块级元素是可以包含块级元素和行内元素; 行内元素只能包含文本信息和行内元素;
    3). 块级元素可以设置宽和高， 行内元素设置的宽和高失效；
    如何让块级元素居中? 如何让行内元素居中?
    1).块级元素居中： margin: 0 auto
    2).行内元素居中: text-aligin:center

            CSS
            1.CSS 概述

            CSS 指层叠样式表 (Cascading Style Sheets)
            样式定义如何显示 HTML 元素
            样式通常存储在样式表中
            把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
            外部样式表可以极大提高工作效率
            外部样式表通常存储在 CSS 文件中
            多个样式定义可层叠为一

            2.CSS 语法

            CSS 规则由两个主要的部分构成：选择器，一条或多条声明。
            selector {property: value}
            选择器通常是您需要改变样式的 HTML 元素。
            每条声明由一个属性和一个值组成。
            属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
            多重声明：
            提示：如果要定义不止一个声明，则需要用分号将每个声明分开。

            3.四类选择器

            1.元素选择器（类型选择器）
            最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
            在 W3C 标准中，元素选择器又称为类型选择器（type selector）。
            “类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”
            参考网址：http://www.w3school.com.cn/css/css_selector_type.asp
            2.id选择器
            id选择器以 符号”#” 来定义。
            id选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
            在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
            参考网址：http://www.w3school.com.cn/css/css_selector_id.asp
            3.类选择器
            类选择器以一个点号”.”来定义
            类选择器使得所有使用这个样式的标签具有同样的效果
            参考网址：http://www.w3school.com.cn/css/css_selector_class.asp
            4.属性选择器
            属性选择器可以根据元素的属性及属性值来选择元素。
            对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
            参考网址：http://www.w3school.com.cn/css/css_selector_attribute.asp
            4.插入样式表的三种方法:
            1.外部样式表(External style sheet)

            当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：

            浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
            外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
            2.内部样式表(Internal style sheet)

            当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

            3.内联样式(Inline style)

            由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
            要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

            一般情况下，优先级如下：
            内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

            转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1270430821@qq.com

            赏

            文章标题:兄弟会第十五天

            本文作者:王新阳

            发布时间:2019-11-19, 09:02:03

            最后更新:2019-11-19, 09:16:52

            原始链接:http://wxy20170906.github.io.com/2019/11/19/15%E5%85%84%E5%BC%9F%E4%BC%9A%E7%AC%AC%E5%8D%81%E4%BA%94%E5%A4%A9/

            版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

            ©2016-2019 wxy

            Built with Hexo and 3-hexo theme

            目录
            ×

            喜欢就点赞,疼爱就打赏

            相册 github