python学习第四十二天:前端基础

前端学习?

1.HTML是什么?

HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。

2.CSS是什么?

CSS,全称“(层叠样式表)”。以后我们在别的地方看到“层叠样式表”、“CSS样式”,指的就是CSS。

3.JavaScript?

JavaScript是一门脚本语言。


HTML基本语法

语法规范

1.标签嵌套用缩进 2.标签名不区分大小写,建议小写 3.属性名也不区分大小写

常用HTML实体

注意都需要加;

&nbsp 空格

&lt 小于

&gt 大于

&amp &

&copy 版权

&yen ¥


标签

单标签有:目前有,待更新<meta > <link > <br> <hr>  其余都为双标签

<!--这是注释 -->

html常用标签

主体结构:

<html> </html>

<head> </head>

<body> </body>

HEAD标签内:

<meta charset = 'utf-8'> meta 内可以指定元素信息,关键字描述等

<title> </title> 网站标题

<style> </style> 各种格式设置等

<link rel='stylesheet' type='text/css' href='./01.css'> 连接css

<link rel='shortcut icon' type='image/x-icon' href='./01.ico'> 设置标题边上的图标

<script> </script> 连javascript

格式排版标签

<h1> </h1>一级标题,共可有六级标题

<p> </p>段落

<pre> </pre>段落

<br> 换行

<hr> 分割线

<div> </div>


文本标签

<em> </em> 表示强调,一般为斜体

<strong> </strong> 表示强调,一般为加粗

<mark> </mark> 选中

<ins> </ins> 新增的内容,表现为下滑线

<del> </del> 新增的内容,表现为把斜杠

<sub> </sub> 下标

<sup> </sup> 上标

<ruby>
    帅<rt>shuai<rt>
</ruby>


css基本语法

/* 注释内容 */

选择器

选择器 {
    css属性:值;
    css属性:值;
}

#id 按id选择

.class 按class选择

class>li 只选子标签中li

class li class中所有的li

* 全局选择器

群组选择器: 通过混用多个选择器精确定位到一个含有某个特征的选择器
 }

 body,ul,li,p,figure,table,.item,.list-item {

 }

多条件:通过混用多个选择器精确定位到多个含有某个特征的选择器
 div.item {

 }
 .item.list-item {

 }
 div#container {

 }


选择器优先级:
id > class > tagname > *
若为群组选择器,按上述方法,若相同则按个数多的来

css长度单位

cm

mm

px像素

em倍数

%百分比

颜色单位

rgb(123,132,123) rgb(12%,13%,12%) #13a2b5 三个十六进制表示

css常用属性

font-family 字体族科 宋体(衬线字体)|微软雅黑(非衬线字体)

font-size 字体大小

font-style 字体风格 normal | italic | oblique (斜体,一般用于italic)

font-weight 字体加粗 normal | bold | lighter (加粗,一般用bold)

font-cariant 字体变形 normal | small-caps (字体比原来字体小,适用于英文大写字母)

font : bold italic 12px '宋体',serify;

文本属性

letter-spacing 字母间隔 值为长度,可以是负值(可适用于中文)

word-spacing 词的间距(通过空格识别)

text-decoration 文字修饰

    underline # 下划线
    overline # 字符头顶的上划线
    line-through # 穿过字符的线
    none(默认)

text-align 横向排列 left | right | center # 字体位置

vertical-align 一般用于图片和文字, 使用middle后文字能在图片长度的中间

text-indent 文本缩进 一般用2em(2个字)50px

line-height 设置行间距离,如果只有一行文本并且行间距离=设置的文本框长度,则文本会垂直居中

word-wrap:break-word;允许长单词,url内部换行

overflow-wrap CSS3中新增的,等同于word-wrap

white-space:

     nomal 默认
     pre 原格式输出
     nowrap 不换行
     pre-wrap pre基础上加上换行
     pre-line pre基础上不保证缩进


猜你喜欢

转载自www.cnblogs.com/luck-L/p/9375026.html