HTML,CSS

<html>
<body>
    <h1>这是一级标签 </h1>
    <h2>这是二级标签 </h2>
    <h3>这是三级标签 </h3>
    <h4>这是四级标签 </h4>
    <h5>这是五级标签 </h5>
    <h6>这是六级标签 </h6>
</body>
</html>

段落标签：p

lorem：生成一段数据

<html>
<body>
  <p>这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, quia dolor. Quae maxime vitae similique consequatur voluptas nam molestias, fuga magni optio eos! Architecto sunt tenetur quam quod delectus ut?</label></p>
</body>
</html>

换行标签：br

<html>
<body>
  <p>这是一个段落 </p><br>
  <p>这是一个段落 </p><br>
</body>
</html>

格式化标签

加粗：strong标签或者b标签
倾斜：em标签或i标签
删除线：del标签或s标签
下划线：ins标签或者u标签

<html>
<body>
<strong>加粗</strong>
<del>删除线</del>
<ins>下划线</ins>
<em>倾斜</em>
</body>
</html>

图片标签img

<html>
<body>
<img src="女.png" alt="加载失败" width="10px" title="这是一个图片">女
<!--src:图片的路径，alt：图片出现异常不能显示时,替换的文本,
width:图片大小，单位px（像素）,title:鼠标放在图片上显示的文字-->
</body>
</html>

超链接a

<a href="http://www.baidu.com">百度</a>
<a href="#">表示空连接,一般用于程序测试</a>

点击即可跳转

表格标签

table：表示整个表格
tr：表示一行
td：表示一列
th：表头单元格，会居中加粗
thread：表格的头部
tbody：表格内容

<html>
<body>
<table>
    <th>计算机202学生信息</th>
<tr>
    <td>姓名</td>
    <td>学号</td>
</tr>
    <tr>
        <td>张三</td>
        <td>20200703</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>20200706</td>
    </tr>
</table>
</body>
</html>

列表标签

无序列表：ul，li

有序列表：ol，li

自定义列表:dl(总标签）dt（小标题）dd（围绕标题来说明)

<html>
<body>
<ul>
  无序标签
    <li>第一个无序标签</li>
</ul>
<ol>
  有序标签
    <li>第一个有序标签</li>
</ol>
<dl>
    自定义标签
    <dt>第一个小标题</dt>
    <dd>第一个小标题内容</dd>
    <dd>第一个小标题内容</dd>
    <dt>第二个小标题</dt>
</dl>
</body>
</html>

input标签

type：取值类型很多，表示标签类型
name：input的名字，当 name 属性值相同而且 type 属性为 radio 时，浏览器会认为是相同字段，默认只能选择一个
value：input的默认值
checked：默认被选中

文本框：text
密码框：password
单选框：radio
复选框：checkbox
普通按钮：button
选择文件：file

和lable标签搭配使用，提高用户体验，id绑定

<html>
<body>
<input type="text">文本框
<input type="password" >密码框
<input type="radio" name="sex">男
<input type="radio" name="sex" > 女

<!--点击 男/女的文字,也可选中-->
<input type="radio" name="sex" id="man"> <label for="man">男</label>
<input type="radio" name="sex" id="woman" checked="woman"> <label for="woman">女</label>


<input type="checkbox" id="java" checked="java"> <label for="java">java</label>
<input type="checkbox" id="c++"> <label for="c++">c++</label>
<input type="checkbox" id="c"> <label for="c">c</label>
</body>
</html>

select:选择标签

<select>
<option >---选择年份---</option>
<option>2001</option>
<option >2002</option>
<option >2003</option>
</select>

textarea：文本域标签

<textarea cols="30" rows="10">这是一个文本域</textar

CSS

设置样式

CSS语法

CSS注释以 /* 开始, 以 */ 结束

CSS代码放在Style标签内

<html>
<body>
    <style>
  p /*p就是选择器，表示选择页面内的所有p标签*/
  {
    /*设置属性,键值对的形式*/
    color:red;/*设置字体颜色*/
    font-size: 30px;/*设置字体大小*/
  }
</style>
<!--CSS写在style标签里-->
<p>
    这是一个段落
</p>
</body>
</html>

引入方式

内部样式表

一个文档应用一种样式时使用，<style>标签内部定义

<html>
<body>
    <style>
  p /*p就是选择器，表示选择页面内的所有p标签*/
  {
    /*设置属性,键值对的形式*/
    color:red;/*设置字体颜色*/
    font-size: 30px;/*设置字体大小*/
  }
</style>
<!--CSS写在style标签里-->
<p>
    这是一个段落
</p>
</body>
</html>

内联样式

在html中使用style标签

<p style="color: gold;font-size: 30px;">
    这是一个段落
</p>

外部样式表

将CSS代码放入一个.css文件，使用link标签引入文件；可以让这个样式被多个页面使用

<link rel="stylesheet" href="demo.css">
<p>
    这是一句话
</p>

选择器

在 CSS 中，选择器是选取需设置样式的元素的模式。

标签选择器

选择器是html的标签

  <style>

 p     /*p就是选择器，表示选择页面内的所有p标签*/
 {
    /*设置属性,键值对的形式*/
    color:red;/*设置字体颜色*/
    font-size: 30px;/*设置字体大小*/
  }
</style>

对页面内的所有p标签适用

类选择器

创建一个类，这个类里包含CSS代码；html中引用这个类的元素就会被设置这个样式

.类名：声明一个类，提供class属性引入类

<style>
.red{/*设置一个类*/
    color:red;/*设置字体颜色*/
}
.green{
    color: green;
}
</style>

<p class="red">hello world</p>
<p class="green">hello java</p>
<p>hello c++</p>

id选择器

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

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

<style>
#red{/*设置一个id选择器*/
    color:red;/*设置字体颜色*/
}
#green{
    color:green;
}
</style>

<p id="red">hello world</p>
<p id="green">hello java</p>
<p>hello c++</p>

通配符选择器

*：选中页面所有元素

可以用于取消浏览器的默认样式

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
</style>

后代选择器

通过多个选择器的组合，选择某个元素的后代元素（子/孙……）

选择器1 选择器2……

<style>
    ul .c {/* .c是类选择器;带有空格：ul选择器下面找class=c的元素*/
        color: red;
    }
    ol.m{/*不带有空格：同时满足：ol选择器和class=c的元素*/
        color: blue;
    }
</style>

<ul>
<li class="c">c++</li>
<li>java</li>
</ul>

<ol class="m">
<li>操作系统</li>
<li>计算机网络</li>
</ol>

子代选择器

通过多个选择器的组合，选择某个元素的子代元素（子）

选择器1>选择器2……

<style>
    ul>a {/*在ul下找到a标签，a标签必须是子元素*/
        color:red;
    }
    ol a{/*在ol下找到a标签，a标签是子代元素*/
        color: palegreen;
    }
</style>

<ul>
<li class="c">c++</li>
<li>java</li>
<li><a href="#">链接</a></li>
</ul>

<ol >
<li>操作系统</li>
<li><a href="#">链接</a></li>
<li>计算机网络</li>
</ol>

并集选择器

选择多个选择器，之间用,分隔

<style>
   ul a,ol{/*选择ul内部的a和ol*/
    color:red;
   }
</style>

伪选择器

a:link 选择没有被访问的链接

a:visited 选择被访问的链接

a:hover 选择鼠标指针悬停的链接

a:active 选择鼠标点击时的链接

//也可以实现对其他标签的效果

<style>
a{/*选择a标签*/
    color:#adff2f;
}
a:link{/*选择没被访问的链接*/
    color: red;
}

a:hover{/*鼠标悬停*/
color:blue;
}
a:active{/*鼠标点击*/
color: pink;
}
a:visited{/*选择被访问的链接*/
color:gray;
}

</style>

<a href="https://www.runoob.com/css/css-background.html">链接</a>
<a href="#">ff</a>
<a href="https://www.runoob.com/css/css-intro.html">okkk</a>
<a href="https://www.runoob.com/css/css-boxmodel.html">okx</a>

CSS字体

字体系列

font-family 属性设置文本字体样式的

<style>
.setA{
    color: red;
    font-family: "宋体","@黑体";
    /*设置字体系列，多个选择排列，会选择第一个系统适用的字体,如果都不匹配，适用系统默认字体*/
    
}
.setB{
    color:green;
    font-family: "微软雅黑";
}
</style>

<p class="setA"> 段落一</p>
<p class="setB"> 段落二</p>

字体样式

font-style：主要是用于指定斜体文字的字体样式属性。

<style>
.set {
    font-style:italic;/*斜体*/
}

字体粗细

font-weight设置字体粗细

<style>
.set {
    font-weight:900;
}
</style>

<div class="set">
    这是一段话
</div>

文本属性

颜色

颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合。

颜色值

CSS中定义颜色使用十六进制（hex）表示法为红，绿，蓝的颜色值结合。可以是最低值是0（十六进制00）到最高值是255（十六进制FF）

3个双位数字的十六进制值写法，以＃符号开始。

<style>
.set {
color: #000;/*16进制 黑色*/
color: black;/*英文*/
color: rgb(0, 0, 0);/*rgb*/
}

文本对齐

text-align属性指定元素文本的水平对齐方式。

<style>
    .one{
        text-align: left;
    }
    .second{
        text-align: right;
    }
    .third{
        text-align: center;
    }
 
</style>
<div class="one">
  居左对齐
</div>
<div class="second">
    居右对齐
</div >
<div class ="third">
    居中对齐
</div>

文本装饰

text-decoration 属性规定添加到文本的修饰。

<style>
    .one{
       text-decoration: underline;/*下划线*/
    }
    .second{
        text-decoration: line-through;/*删除线*/
    }
    .third a{
     text-decoration: none;
    }
 
</style>
<div class="one">
  居左对齐
</div>
<div class="second">
    居右对齐
</div >
<div class ="third">
   <a href="#">链接</a>
</div>

文本缩进

text-indent 属性规定文本块中首行文本的缩进。

注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

<style>
   p{
   text-indent: 10px;
   }
</style>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit fugiat earum magnam animi libero</p>

行高

line-height，设置行高

行高的值=高度，可以实现文本的垂直居中

<style>
    p{
        height:10px;
        line-height: 5px;
    }
    div{
        height:10px;
        line-height: 10px;/*垂直居中*/
    }
</style>

背景

transparent

指定背景颜色应该是透明的。这是默认

<style>
    div{
        width: 100%;
        height: 100%;
        background-color: green;/*透明*/
        background-image: url("男.png");
    }
</style>

背景图片，像地砖一样铺在主页上，称为平铺

background-repeat对此设置：

<style>

    div{
        color: #000;
        width: 50%;
        height: 50%;
        background-color: green;/*透明*/
        background-repeat: repeat-x;
        background-image: url("男.png");
    }
    p{
        color: #000;
        width: 50%;
        height: 30%;
        background-color: green;/*透明*/
        background-repeat:no-repeat ;
        background-image: url("男.png");
    }
</style>

background-size属性指定背景图片大小。

圆角矩形

HTML的图像默认矩形，CSS要对矩形修改，产生各种圆形

border 是边框属性的简写属性。

CSS border 属性用于指定元素边框的样式、宽度和颜色。

border-width属性设置一个元素的四个边框的宽度

border-style属性设置一个元素的四个边框的样式

border-radius 允许你设置元素的外边框圆角。

正方形

圆形

border-radius的值为正方形宽度的一半

<style>
div{
    width: 20%;
    height: 20%;
    border-width: 10px;
    border-color: aquamarine;
    border-style: solid;
    border-radius: 50%;/*width的一半*/
}
</style>

圆角矩形

border-radius的值为矩形高度的一半

<style>
div{
    width: 200px;
    height: 100px;
    border-width: 10px;
    border-color: aquamarine;
    border-style: solid;
  border-radius:100px;/*height的一半*/
}
</style>

盒子模型

1、边框border

<style>
div{
    width: 200px;
    height: 100px;
    border-width: 10px;
    border-color: blueviolet;
    border-style: solid;
}
</style>
<div> 这是一个div</div>

边框会撑大区域：

设置box-sizing 属性

box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。

<style>
div{
    width: 200px;
    height: 100px;
    border-width: 10px;
    border-color: blueviolet;
    border-style: solid;
    box-sizing: border-box;
}
</style>
<div> 这是一个div</div>

2、内边距padding

需要设置 box-sizing: border-box;内边距和边框都会撑大空间

<style>
div{
    width: 200px;
    height: 100px;
    border-width: 10px;
    border-color: blueviolet;
    border-style: solid;
    padding: 10px;/*上 下 左 右 内边距分别填充10px*/
    box-sizing: border-box;
}
</style>

3、外边距

margin描述两个元素之间的间距

元素的水平居中：margin

<style>
div{
    width: 200px;
    height: 100px;
    border-width: 10px;
    border-color: blueviolet;
    border-style: solid;
    padding: 10px;/*上 下 左 右 内边距分别填充10px*/
    margin: 10px;
    box-sizing: border-box;
}
</style>
<div> 这是一个div</div>
<div>这是第二个div</div>

元素的水平居中：margin

<style>
    .one{
        width: 500px;
        height: 200px;
        background-color: red;
    }
    .two{
        width: 200px;
height: 100px;
background-color: aquamarine;
    }
</style>
<div class="one">
    <div class="two">
        hello
    </div>
</div>

元素的水平居中：margin

<style>
    .one{
        width: 500px;
        height: 200px;
        background-color: red;
    }
    .two{
        width: 200px;
height: 100px;
background-color: aquamarine;
margin:0 auto;/*上下外边距为0，左右外边距由浏览器计算*/
    }
</style>
<div class="one">
    <div class="two">
        hello
    </div>
</div>

弹性布局

默认情况下，元素是独占一行的，而弹性布局就可以让这些元素水平排列

<style>
    .parent{
        width: 100%;
        height: 400px;
        background-color: blueviolet;
    }
    .one,.two,.three{
        font-weight: 900;
        color:red;
        width: 200px;
        height: 100px;
        background-color:green;
    }
</style>

<div class="parent">
<div class="one"  >1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>

<style>
    .parent{
        width: 100%;
        height: 400px;
        background-color: blueviolet;
        display:flex;/*弹性布局*/
    }
    .one,.two,.three{
        font-weight: 900;
        color:red;
        width: 200px;
        height: 100px;
        background-color:green;
    }
</style>

在父选择器设置：display:flex，设置弹性布局

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

在父选择器设置

/* 对齐方式 */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* 从行首开始排列 */
justify-content: end;        /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end;   /* 从行尾位置开始排列 */
justify-content: left;       /* 一个挨一个在对齐容器得左边缘 */
justify-content: right;      /* 元素以容器右边缘为基准，一个挨着一个对齐, */

/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* 分配弹性元素方式 */
justify-content: space-between;  /* 均匀排列每个元素
                                   首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around;  /* 均匀排列每个元素
                                   每个元素周围分配相同的空间 */
justify-content: space-evenly;  /* 均匀排列每个元素
                                   每个元素之间的间隔相等 */
justify-content: stretch;       /* 均匀排列每个元素
                                   'auto'-sized 的元素会被拉伸以适应容器的大小 */

/* 溢出对齐方式 */
justify-content: safe center;
justify-content: unsafe center;

/* 全局值 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式