html学习记录

1. HTML是网页内容的载体。衣服。

2. CSS样式是表现。穿衣风格。

3.JavaScript是用来实现网页上的特效效果。动作和互动。

一 基本结构

                根标签,包含所有网页标签

  定义头部文档

  网页主要内容

二 标签

(一)头部

(二)注释  <!--注释文字-->

(三)主体

1.网页显示的内容,主体

2.标题

3.

4.斜体加强,语义强调。

5.粗体加强,语义强调。

6.设置单独的样式,无语义。

7.段落中的引用,自动加“”,语义引用别人的话。

8.

整段引用,样式是段落两侧缩进,语义引用别人的话。

9.
回车,样式分行显示,属于空标签。(空标签:无内容,单只出现,共三个
,


,)

10.


水平横线

11.

地址,样式为斜体

12.显示一行代码

13.

多行代码

14.

           

  •        

  •         ...

         

    新闻列表,样式:信息标题前加大黑点。

    15.

               

    1.          

    2.           ...

           

    新闻列表,样式:信息标题前加序号。

    16.

    独立的逻辑板块

    命名,使逻辑更清晰

    17.

    表格和摘要

       

       

        ...

       

       

        ...


    html学习记录_第1张图片
    图片发自App

    18.

    为表格添加标题

    19.显示在屏幕上的文本

    target在新网页中打开

    20.mailto自动添加邮件地址

    html学习记录_第2张图片
    图片发自App

    21.插入图片

    “下载失败的替换文本”

    22.
    表单标签

    23.

        (文本框或密码框)

    24.多行文本

    25.单选框或复选框(多个选项注意name一致)

    ...

    26.单选下拉列表框

    27.

    28.提交按钮

    29.重置按钮

    30.选中与该标签相关联的表单


    (四)标签分类

    1.常用块状元素(block):

    ...

    ... ...
    ... ...
    ...

    特点:

    (1)每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)

    (2)元素的高度、宽度、行高以及顶和底边距都可设置。

    (3)元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

    2.常用内联元素(inline):

    特点:

    (1)和其他元素都在一行上;

    (2)元素的高度、宽度及顶部和底部边距不可设置;

    (3)元素的宽度就是它包含的文字或图片的宽度,不可改变。

    3.常用内联块状元素(inline-block):

    特点:

    (1)和其他元素都在一行上;

    (2)元素的高度、宽度、行高以及顶和底边距都可设置。

    4.转换

    (1)内联a转块状

    a{display:block;}

    (2)块状转内联

    div{display:inline;}

          (五)盒模型

          图片发自App

          html学习记录_第4张图片
          图片发自App

          html学习记录_第5张图片
          图片发自App

          html学习记录_第6张图片
          图片发自App

          1.div{border:2px solid red}边框设置(缩写)

          border-radius:5px;圆角边框

          div{

          border-width:2px;(thin,medium,thick)

          border-style:solid;(实线,dashed虚线,dotted点线,)

          bordet-color:red;

          }

          div{

          border-top:1px solid red;

          border-right:1px solid red;

          border-left:1px solid red;

          border-bottom:1px solid red;

          }

          2.div{pading:20px 10px 15px 30px;}元素内容与边框之间填充(上右下左)

          div{

          padding-top:20px ;

          padding-right:20px ;

          padding-bottom:20px ;

          padding-left:20px ;

          }

          div{padding:10px;}

          div{padding:10px 20px;}上下10px,左右20px

          3.div{margin:20px 10px 15px 30px;}元素内容与边框之间填充(上右下左)

          div{

          margin-top:20px ;

          margin-right:20px ;

          margin-bottom:20px ;

          margin-left:20px ;

          }

          div{margin:10px;}

          div{margin:10px 20px;}上下10px,左右20px

          div{margin:10px 20px 30px;}左右相同

          (六)语法

          1. 空格

          你可能感兴趣的:(html学习记录)