前端第一天，第六十五天_前端付铭-CSDN博客

本文链接：https://blog.csdn.net/weixin_42157426/article/details/81229191

付铭老师：18618176338

复习资料网址：http://unclealan.cn/docs/python/front-end/chapter1/html3css3ji-chu.html

HTML

1 HTML基本语法

html标签

单标签<img />, <img>
双标签<html>, </html>

属性属于标签

<img src="图片的地址">
<table width="100" height="200"></table>

语法规范

标签嵌套用缩进
标签名不区分大小写(建议小写)
属性名不区分大小写(建议小写)

注释

<!-- 单行 -->
<!--
多行
-->

常用HTML实体

  空格 non-break space
< < less-than
<
> > greater-than
& & ampsand
© 版权 copyright
¥ 人民币 yen(日元)

2 HTML常用标签

主体结构

<html></html>
<head></head>

<body></body>

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

HEAD标签

<title></title> 网站标题

<!-- 指定网页标题 -->
<title>同志交友</title>

<meta> 指定网页的元信息指定关键字指定描述指定字符集

属性:charset, name, content

<meta charset="utf-8">
<meta name="keywords" content="同志交友,交友平台,同志,同志相亲">
<!-- 添加网页的具体描述信息 -->
<meta name="description" content="全国最大的同志交友平台">

<style></style> 设置标签格式

<!-- 设定网页h1标题的颜色为红色 -->     
<style type="text/css">
            h1 {
                color: red;
            }
        </style>

<link> 导入css或者指定网页图表

属性:src, type, rel

<!-- 导入01.css文件中的css代码，name和type固定格式 -->
<link rel="stylesheet" type="text/css" href="./01.css">
<!-- 指定网页的图表是friends.ico这种类型的图片,name和type固定格式  -->
<link rel="shortcut icon" type="image/x-icon" href="./friends.ico">

<script></script>导入javascript

格式排版标签

<hn></hn>1~6标题 headline

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

<p></p>段落 paragraph
```
<p>段落</p>
```

<pre></pre>原样输出 pre process

<pre>输入什么输出就是什么,换行也能显示</pre>

<br>换行 break

<br>如果用了p标签,那么我就能在p标签里起着换行的作用

<hr>分隔 horizontal

<hr>如果用了hr标签,那么会有一条分割线

<div></div>没有任何语意的标签(分开)

<div>我可以把这里面的代码分隔开</div>

文本标签

<em></em>强调表现为斜体

<em>文字左右两侧加上我就变斜体了</em>

<strong></strong>强调表现为粗体

<strong>文字左右两侧加上我就能变粗体</strong>

<mark></mark>H5新增表示被选择

<mark>文字左右两侧加上我就能被特殊标记</mark>

<sup></sup>上标

<sup>文字左右两侧加上我就能有上标,例如100的平方</sup>

<sub></sub>下标

<sub>文字左右两侧加上我就能有下标,例如水的化学表示</sub>

<ins></ins>添加的内容

<ins>文字左右两侧加上我就能有下划线显示他是被添加的内容</ins>

<del></del>删除的内容

<del>文字左右两侧加上我就能有穿过文字的线</del>

<ruby></ruby>/<rt></rt>加拼音 H5新增

<!-- 同志就变成了小学里学的头顶有拼音的同志 -->
<ruby>
    同志<rt>tongzhi</rt>
</ruby>

4 css基本语法

使用css

link引入外部的css文件
<style></style>在html中写
使用html元素的style属性

格式

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

注释

/* */

css长度单位

px 像素
em 默认大小的倍数,字体默认大小16
% 默认大小参照,50%代表全屏长度的50%
cm 厘米
mm 毫米
pt 用于印刷业

css颜色单位

colorName：  red/green/bue/purple/orange/yellow/pink/skyblue

rgb数字  rgb(34,45,23)  rgb(20%, 57%, 100%)

16进制   #abcdef   #f90   #ccc

5 css选择器

# 标签名选择器（HTML元素选择器）
tagName{

}

# 类名选择器
.className{
    
}

# ID选择器
idName{
    
}

# 全局选择器
* {
    
}

# 组合 后代元素 # 通过混用两个选择器（ID选择器、标签名选择器、类名选择器）定位到一个含有某些特定属性的标签
选择器 选择器
 .nav li {}
 #box div {}
 div .list {}
 .container li {}

# 组合 子元素 # 挑选出某个选择器下大于另一个选择器的一个标签
选择器>选择器
 .nav>li {}
 #box>div {}
 div>.list {}
 .container>li {}

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

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

 }

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

 }
 .item.list-item {

 }
 div#container {

 }

6 选择器优先级

ID > CLASS > tagName > *

组合选择器,通过数数来判断:
计算 选择符 中ID的数量(=a)                    
计算 选择符 中 类选择器 属性选择器 伪类选择器 的数量(=b)    
计算选择符 中 标签选择器 伪对象选择器的数量 (=c)        
忽略全局选择器                            
a的权重100  b的权重10   c的权重1    相加

7 css常用属性

font

font:字体风格[字体加粗[<字体大小>[/行高]<字体族科>
# 字体大小和字体族科必须得有

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

font-family:"Arial",sans-serif;
# serify 衬线字体;sans-serif 非衬线字体
# 如果系统中不自带Arial字体,浏览器会自动选择非衬线字体

font-size 字体大小
font-style 字体风格 normal | italic | oblique (斜体,一般用于italic)
font-weight 字体加粗 normal | bold | lighter (加粗,一般用bold)
font-cariant 字体变形 normal | small-caps (字体比原来字体小,适用于英文大写字母)

文字颜色

color 设置文字颜色

文本属性

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 normal | break-word

在长单词和url地址内部进行换行,如果不使用,长单词或者url长度超过文本框长度,超出的部分会超出文本框

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

white-space nomal | pre | nowrap | pre-wrap | pre-line

一般用pre和pre-wrap,pre是原生字符的意思,换行之类的也会显示,但是文本超过文本框不会换行;pre-wrap则会强制换行