首页 > > 网页制作 > Javascript >

html.css.javascript 跟随着我一起走向前端之路

2019-05-22 06:34:05来源：博客园阅读 ()

html 主要的标签的介绍：

<head></head>标签里面是放的是思想,设置浏览器用的，是人看不到的

编码字符集：gb2312 国家编码字符集（简体，亚裔字符集） gbk（gb2312+繁体）

unicode 是万国码，包括了所有国家的语言 uft-8 是 unicode

一般放的是<meta charsrt = "utf-8"> 自闭和标签

<body></body>是展示给用户看的所有的标签是写在body里面

1 <p></p>段落，让内容成段展示 <br>换行

2 div 和span标签（最重要的标签）

<div></div>独占一行

<span></span>不独占一行

div和span这两个标签是为了成块展示，规格化，这两个就是一个容器

功能1：分块明确，让整个页面更加结构化

功能2：捆绑操作的作用（搬书架）通常配合css一起用

<div>
<strong>加粗字体<strong>
<em>斜体展示</em>
<del>划线标签</del>
</div>

　3<ul><ol></ol></ul> 标签

<ul type="A">
  <ol>小红是傻子</ol>
  <ol>苹果</ol>
  <ol>我是傻子</ol>   将里面的代码有序的输出 按字母A~Z排序 排序方式1，a，A，i，I
 </ul>

4<a href="">标签超文本连接

<a href="https://www.baidu.com"> 点击我</a>  点击就能直接跳转到百度
<a href = "tel:17548935889">打电话</a>
<a href ="maito :1453156425@qq.com">发邮件</a>

5 <img src="" alt="" title="">标签

src里面写路劲 1网上url 2 本地的绝地路径 3 本地的相对路劲

alt图片占位符可以降低错误

title图片提示符当鼠标放在上面可以提示图片的意识

6 <form method="get/post" action=" "> method是发送数据的方式有两个值 action 是发送给人的地址

7<input type ="text" name="" value=""> 输入框

<input type ="password" name="" value="">密码输入框

<input type ="button" name="" value="">按钮

<input type ="radio" name="" value="">单选框

<input type ="checkbox" name="" value="">复选框

8 <select name=""><option></option></select>下拉框

9<table><tr><tb></tb><tb></tb></tr><table>

更多的标签及用法

CSS选择器

1.id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义

#para1
{
    text-align:center;
    color:red;
}

lass 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

.center {text-align:center;}

3.父子选择器

div  span{
   background-color:red;   父子选择器有严格的层级关系  但不局限什么类型的选择器
}

经过我的总结

4.通配符选择器

*{
   backgroun-color:red;  是所有的代码都变成红色
}

5分组选择器

em，
strong，
span，{
          background-color:red;   简化代码量
}

CSS权重（重点）

！important Infinity

行间样式 1000

id 100

class/伪类 10

标签/伪元素 1

通配符 0

权重的重点是当2个属性共同作用一个属性，谁的权重高，就输出谁，如果权重一样的话，后面的代码会覆盖前面的代码

想更多的选择器请点击我

CSS组合选择符

CSS代码

1 CSS背景

background-color：；添加背景颜色
background-image：url（‘’）：添加背景图片
background-repeat：；背景图片水平或垂直平铺
background-attachment：；背景图片是否固定或者随着页面的其余部分滚动
background-position：；背景图片设置定位改变图片位置

2所有CSS文本属性

3 所有CSS字体属性

4CSS链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

a：link 正常未访问过的链接

a: visited 用户已访问过的连接

a ：hover 当用户鼠标放在链接上时

a: active 链接被点击的那一刻

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

5CSS盒模型

border margin padding 都有4个值分别为上，右，下，左

盒模型计算真正的width = width + border*2 + padding左右2个像素

真正的height = width + border*2 +padding 上下2个像素

border属性的应用

轮廓（outline）属性

margin外边距的使用　　

padding内边距的使用

隐藏元素 - display:none或visibility:hidden

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了

position 定位属性的五个值：

static
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。
relative 相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变
fixed
元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：
absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
sticky 基于用户的滚动位置来定位

CSS Overflow

Overflow 有5个值：

visible 默认值内容不会被修剪会呈现在元素框之外

hidden 内容会被修剪，并且其余部分不可见

scroll 内容会被修剪但是浏览器会显示滚动条以便查看其余的内容

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边左浮动下面的文本流将环绕在它右边

float ： left/right

消除浮动如果想哪个标签不受浮动影响直接对那个标签 clear ： both；

想消除所有浮动流对用浮动的那个标签进行消除

span::before { 
     content:"";
      display:block;
     clear:both;
} 
                            消除浮动3要素
span:: after {
     content:"";
      display:block;
     clear:both;

}

CSS 文本布局 - 水平 -垂直对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配：

text-align ：center；文本居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中

左右对齐使用定位 position

Css 伪类 用的最多的：hover 当鼠标放上去会显示的状态

更多的伪类点击我查看

Css伪元素

first-letter" 伪元素只能用于块级元素。

下面的属性可应用于 "first-letter" 伪元素：