欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html是什么?CSS常用标签等使用笔记

程序员文章站 2022-03-07 12:15:24
html是什么 html(Hypertext Markup Language)—— 结构 超文本 标记 标签 <> 标签对 单标签 在标签中间&...

html是什么 html(Hypertext Markup Language)—— 结构 超文本 标记 标签 <> 标签对 单标签 在标签中间—— 标签名 语言

css

凡是写在标签名后面的都是标签的属性

可以自动刷新浏览器

属性名称 = “属性值”

border

    <!--

        border

            边框的粗细(宽度)

            边框的样式  solid  dotted  dashed

            边框的颜色

                英文单词  red

                十六进制  #8c8c8c

                rgb() red green blue

    -->

border 区域会不会显示背景图(会显示)

    <style>

        .box{

            width:300px;

            height:200px;

            border:10px d #0c0c0c;

            background: url("img/14.jpg") repeat-y;

            margin:40px 30px 20px 10px;

        }

    </style>

</head>

<body>

<p class="box"></p>

</body>

border-color 边框颜色

border-style 边框样式

border-width 边框宽度

border-top

border-top-color

border-top-style

border-top-width

border-bottom-style: dashed;   dashed 虚线  dotted 点线

background 参数不受顺序影响

背景色 background-color

背景图 background-image

背景图平铺 background-repeat

1: repeat 平铺(默认值);

2: no-repeat 不平铺

3: repeat-x 横向平铺

4: repeat-y 纵向平铺

背景图定位 background-position

背景图定位 如果只给X轴的值(一个值) 那么Y轴会默认center

 第一个值 x轴 (num center left right)

    第二个值 y轴 (num center left right)

背景图是否滚动 background-attachment

    fixed  固定

                位置是以浏览器的可视区域来定位

                不会随着页面的滚动而改变自身的位置

    scroll 滚动

                位置是以容器来定位

                会随着页面的滚动而改变自身的位置

- 背景图背景色

background: #0b9380  url(img/email.png) no-repeat 0 0 fixed ;  颜色写在前面

font

文字复合样式

font: bold italic 50px '宋体';

    font:

            第一二个值(文字着重和文字样式)

            第三个值 font-size( 文字大小 )

            第四个值 font-family( 文字字体 )

font-weight

1: bold 加粗

2: normal (正常,不加粗) 默认值

3: 100 -700

4: border(比较级)

相对于父级更粗一点,并且只有两个状态,一个是正常(normal)一个是加粗 (bold)

文字大小 font-size

文字样式 font-style

italic(倾斜) 

normal(正常)

font-family: ‘宋体’,’Arial’, “微软雅黑”,’microsoft yahei’;

文字颜色 color

文本对齐方式 text-align

: letf 左对齐

: right 右对齐

: center 居中对齐

首行缩进 text-indent

    <style>

        #box{

            border:1px solid #0b9380;

            width:400px;

            font-size:44px;

            text-indent: 2em;

        }

    </style>

    <body>

        <p id="box">

            邮件地址

        </p>

<!--

        px  像素

        em  相对单位

        text-indent

            文字缩进

-->

    </body>

text-decoration 文本修饰

<style>

    text-decoration:underline;

<style>

    <!--

        text-decoration    文本修饰

            underline      下划线

            line-through   中划线

            overline       上划线

    -->

文字间距

letter-spacing字母间距

word-spacing  单词间距(是以空格为解析单位)

强制不换行 white-space

white-space:

            nowrap  不换行

            normal  正常

padding

padding 内边距 内填充

占位宽 border padding width margin

<!--

    padding:一个值

            四个方向

    padding:两个值

        第一个值  上下

        第二个值  左右

    padding:三个值

        第一个值  上

        第二个值  左右

        第三个值  下

    padding:四个值

        上,右,下,左

-->

margin

    1.两个相邻的同级别元素上下margin会叠压

    解决方案:  1: 给这个2个元素加 float

              2: 转换为行内块  display: inline-block

    2.margin的上下传递(父子级元素)

    解决方案:01:给父级加overflow:hidden 或者 加边框 border 或者给 子级加 position:absolute;

邮件

<a href="mailto:test@miaov.com">发邮件</a>

<a href="tel:01029837492">打电话</a>  // 手机端可用

1

2

标签

锚点

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box{

            height:30px;

            background: #0b9380;

            color: #fff;

            margin-bottom: 1000px;

        }

    </style>

</head>

<body>

    <a href="#box1" target="_blank"></a>

    <a href="#box2">box2</a>

    <a href="#box3">box3</a>

    <p class="box" id="box1">box1</p>

    <p class="box" id="box2">box2</p>

    <p class="box" id="box3">box3</p>

</body>

a标签target 属性;

    _blank  在新窗口中打开被链接文档。

    _self   在被点击时的同一框架中打开被链接文档(默认)。

    _parent 在父框架中打开被链接文档。

    _top    在窗口主体中打开被链接文档。

a 伪类;

a:link{ color: yellow; }

        link    未访问过

        hover   鼠标悬停

        active  鼠标按下

        visited 访问过后

常用标签

<header>页眉,主要用于页面的头部的信息介绍,也可用于板块头部</header>

<nav>导航 (包含链接的的一个列表)</nav>

<footer>页脚  页面的底部 或者 版块底部</footer>

<section> 页面上的版块 用于划分页面上的不同区域,或者划分文章里不同的节<section>

<article>用来在页面中表示一套结构完整且独立的内容部分</article>

<aside>侧边栏、广告</aside>

<time>用来表现时间或日期</time>

<h1>这个是h1标签</h1>

<h2>这个是h2标签</h2>

<h3>这个是h3标签</h3>

<h4>这个是h4标签</h4>

<h5>这个是h5标签</h5>

<h6>这个是h6标签</h6>

<p>这个是p标签</p>

<p>段落</p>

<strong>强调</strong>

<b>强调</b>

<em>强调</em>

<ul>

</ul>

<ol>

    <li>列表项</li>

    <li>列表项</li>

    <li>列表项</li>

</ol>

<dl>

    <dt>列表头</dt>

    <dd>列表项</dd>

    <dd>列表项</dd>

    <dd>列表项</dd>

    <dd>列表项</dd>

</dl>

<mark>h1标签在一个页面上最好只出现一次 并且,用在logo身上</mark>

选择器

群组选择器 .name,span,em

包含选择器 .name span em

通配符 选中页面上所有的标签 *

id 选择器

class 选择器

选择器 优先级 style > ID > class > 标签

css_reset 清除默认样式

 有默认margin的元素

       body,h1~h6,p,ul,ol,dl,dd

    有默认padding的元素

        ul,ol

    ul,ol身上都有默认的list-style

    在清除的时候,可以直接清除li身上的list-style

    但是要记住,默认的list-style是在谁身上产生的

块元素

    块元素的特征

        1,默认独占一行

        2,支持所有css样式

        3,没有宽度的时候,默认撑满父级的宽

行内元素

    内嵌(内联、行内)的特征

        1、同排可以继续跟同类的标签(一行可以显示多个同类型的标签)

        2、内容撑开宽度(所有的标签都是内容撑开高度)

        3、不支持宽高

        4、不支持上下的margin

        5、代码换行被解析(解析成空格 —— 一个空格的大小)

行内块

    内联块特性:

        1、让块在一行显示;

        2、让行内元素支持宽高;

        3、没有宽度的时候内容撑开宽度