首页 前端知识 HTML与CSS知识点

HTML与CSS知识点

2024-01-24 15:01:15 前端知识 前端哥 600 205 我要收藏

目录

一、HTML

1.含义:

2.HTML基本结构

3.HTML基本标签

4.表单

1.基本属性

2.输入标签

二、CSS

1.含义:

2.使用

  (1) 行内样式

  (2) 内部样式   

(3)外部样式

(4)注意 :

3.选择器

(1)基础

(2)选择器类型

4.盒子模型

(1)盒子构成:

(2)内边距与外边距与边框: 

(3)浮动

(4)定位     


一、HTML

1.含义:

        超文本标记语言

2.HTML基本结构

<html>
    <head>
       <meta name="xx" value="xxx"/>
       <title>标题</title>
    </head>
    <body>
         <!--注释-->
         <h1>页面内容</h1>
    </body>
</html>


3.HTML基本标签


  标题标签: hx(x:1-6)
  段落标签: p
  加粗: strong
  斜体:  em
  删除线:del
  上下标: sup ,sub
  分割线: hr
  换行标签: br
  超链接标签: a
  内联框架: iframe
  图片标签:img
  视频: video
  音频:audio

  列表标签
  1.无序 ul->li
  2.有序 ol->li
  3.自定义 dl->dt->dd

  表格标签:
  1. table : 表格标签
  2. tr: 行标签
  3. td: 单元格
  4. th: 表头
  5. caption: 表格标题

4.表单

1.基本属性


<form action="" method="">
</form>
注意
-action: 指定数据提交的服务器
-method: GET|POST
     *GET: 不安全 , 效率高 , 数据长度不能超过3KB.
     *POST: 安全 , 效率低 ,  数据长度理论上无限制
作用:把数据以指定的方式提交给指定的服务器。

2.输入标签


 <input type="" name="" value=""/>
 type: 输入控件类型
 name: 控件名称(key)
 value: 控件的值
 checked: 是否被选中
 max:最大值
 step:步长
 pattern:输入内容的格式规范(正则表达式)
 readonly:只读
 disabled:禁用
 size:控件尺寸
 placeholder:文字提示内容
 maxlength:最大输入长度
 required:是否必填

二、CSS

1.含义:

        级联样式表

2.使用

  (1) 行内样式

<标签 style="color:blue;font-size: 16px">xxx</标签>

  (2) 内部样式   

<style type="text/css">
        标签{
          属性 : 值;
        }
</style>

(3)外部样式

        导入式

<style type="text/css">
        @import url("路径/css文件名");
</style>

        链接式(推荐)

<link type="text/css" rel="stylesheet" href="路径/css文件名">

(4)注意 :

        当三种方式发生冲突时,遵循 就近原则 ,即标签距离那个方式近,就使用那个方式。底层实际是因为HTML是一种 边解释边运行 的语言。

3.选择器

(1)基础

        选择器: 选择对应的元素设置对应样式效果。

        语法:选择器名称{
                           属性:属性值;
                           属性:属性值;
                           属性:属性值;
                           .....
                   }

(2)选择器类型

        ·元素选择器

h1 {font-family: sans-serif;}


        ·选择器分组

body, h2, p, table, th, td, pre, strong, em {color:gray;}


        ·类选择器

.important {color:red;}

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>


        ·ID选择器

#intro {font-weight:bold;}

<p id="intro">This is a paragraph of introduction.</p>


        ·属性选择器

*[title] {color:red;}


        ·后代选择器

h1 em {color:red;}

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>


        ·子元素选择器

h1 > strong {color:red;}

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>


        ·相邻兄弟选择器

h1 + p {margin-top:50px;}


        ·伪类

selector : pseudo-class {property: value}

        ·伪元素

selector:pseudo-element {property:value;}

4.盒子模型

(1)盒子构成:

        内容+内边距+边框+外边距

(2)内边距与外边距与边框: 

        内边距含义:内容与边框之间的距离 

        padding

          padding-[top,bottom,left,right]: 设置指定位置的内边距
          padding: 上下左右
          padding: 上下  左右
          padding: 上  左右  下
          padding: 上  右  下  左

         外边距含义:边框以外的距离

        margin

          margin-[top,bottom,left,right]: 设置指定位置的外边距
          margin: 上下左右
          margin: 上下  左右
          margin: 上  左右  下
          margin: 上  右  下  左

        border
          border-color:边框颜色
          border-style:边框风格
          border-width:边框粗细

(3)浮动

        元素按照默认的从上到下或者从左到右顺序排序,标准文档流。
          float:  1.left  2.right   3.none(默认)

          clear: 清除浮动影响  1.left  2.right  3.both

(4)定位     

         static:默认值,没有定位

         relative:相对定位
         特点:
                 1.不脱离标准文档流,对周边元素没有影响。
                 2.相对于本身原来的位置定位。

         absolute:绝对定位
         特点:
                 1.脱离标准文档流,对周边元素产生影响。
                 2.【当祖先元素有定位,则相对于最近的祖先元素定位】。
                      当祖先元素没有定位,则相对于浏览器定位。


         fixed:固定定位
         特点:
                 1.脱离标准文档流,对周边元素产生影响。
                 2.永远相对于浏览器定位。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/170.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!