web前端知识总结（上） 非常适合小白入手

常用快捷键

1.!:代表生成html骨架元素

2.html元素：直接书写html元素名称

3.{}：书写html元素内容，更多时候配合2、4

4. *：批量生成相同元素

5. >:生成html的下一级子元素

6. +：批量生成不相同元素

7. .class属性值：添加class属性值，连续，可以同时添加多个class属性值

8. #id：添加id属性值

9.（）：代表快捷键组合

Html知识

基本标签

隔离标签span

span：生成横的独立空间

标题标签h1-6

h1-h6 ：标题标记，六级标题之间不可嵌套，默认换行、变粗（h7和普通标题相同的样式）

div

div标签：属于块级标签  常用标签之一     可定义文档中的分区或节（division/section）。div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。

p标签

p标签：需要分段把文字有条理的显示出来时候且有间距

a标签

a标签(超链接)：用于页面的跳转 配合href使用

href：指定页面资源路径：网络资源，本地资源

<a href="http://www.baidu.com">跳到百度</a>

target：设置页面打开方式 _self(默认，本窗口) _blank(新窗口) _top(顶级窗口) _parent(父级窗口)， 自定义窗口

a标签(描点)：跳到指定地方

name：描点名称

<a href="" name="11"></a>
<a href="#11"></a>跳转到锚点

图像标签img

img（src属性值，显示本地/网络图片地址，./代表当前html同级目录；../代表上级 目录，也同有width和height属性，alt属性是图片加载失败显示的文本）

width：设置图片宽度

height：设置图片高度

注意：1.使用图片要注意默认是以原始尺寸显示的，如果想设置图片尺寸，切记图片变形使用，单方向设置图片尺寸，未设置图片尺寸的方向会自动等比例变化

2.如果就想按开发者设置的尺寸不变性显示图片，借助css object-fit：cover

列表标签

1.无序列表ul

子元素：li

2.有序列表ol

相关属性：

start：表示起始值

type：次序的类型

子元素：li

3.描述列表dl

子元素dt dd

表格元素table

相关属性： border：表格边框

                   cellpadding:设置单元格内填充

                   cellspacing:设置单元格间空隙

                   width:设置表格宽度,黑认是内容撑起来的宽度

                   align :设置表格本身对齐方式

子元素:

col:代表虚拟列

       相关属性:

       span:设置合并的列数

tr:代表行

               相关属性:

                  align:设置行中每个单元格中内容的对齐方式

       子元素:

               td:代表普通单元格

               相关属性:

                    width:设置单元格的宽度，这一列中最宽的单元格的宽度是这一列的宽度

                    align:单元格中内容的对齐方式

                    rowspan:设置单元格合并的行数

                    colspan:设置单元格合并的列数

            th:代表标题单元格（与普通单元格的区别:居中，加粗)

                相关属性:

                   width:设置单元格的宽度，这一列中最宽的单元格的宽度是这一列的宽度

                   align:单元格中内容的对齐方式

                   rowspan:设置单元格合并的行数

                   colspan:设置单元格合并的列数

框架元素iframe

src：设置嵌套窗口打开的页面资源路径

frameborder：设置嵌套窗口边框是否显示

width：设置嵌套窗口宽度

height：设置嵌套窗口高度

name：设置嵌套窗口名称

媒体元素audio video

audio

属性：

        src：设置音频资源路径

        controls：音频播放器是否显示

        autoplay：设置音频是否自动播放

        loop：设置音频是否循环播放

       width：视频宽度

       height：视频高度

表单元素form

表单控件元素input

  type：设置控件类型

           text：单行文本框

            password：密码框

            radio：单选框

            checkbox：复选框

            file：文件上传器

            submit：提交按钮

            button：普通按钮

            reset：重置按钮

            color：颜色拾取器

            number：数字输入框

            range：滑块

           date：日期控件

           time：时间控件

           datetime-local：本地日期时间控件

           month：月控件

           week：周控件

name：设置控件名称

value：设置控件的值

min：数字最小值 当类型是number range

max：数字最大值 当类型是number range

step：数字步长值（倍数） 当类型是number range

check：是否默认选中 当类型是radio checkbox

disabled：是否可用

readonly：是否可读

placeholder:设置输入框提示信息

autofocus:设置表单控件为焦点状态(可以键入的状态)

表单控件元素 下拉框 列表框 select

name：设置控件名称

size：设置显示下拉项的个数

multiple：设置是否多选

子元素：

        option：下拉选项

        value：下拉值

        selected：默认下拉项选中

        optgroup：下拉项分组

        label：下拉项组名

表单控件元素 多行文本框 textarea

cols：设置多行文本框的宽度

rows：设置多行文本框的高度

---

fieldset元素和legend元素 主要是把表单控件分类

行内样式>内部样式=外部样式

内部样式和外部样式看书写的顺序

外部样式

 <link rel="stylesheet" href="index.css">