HTML
一、基本标签
标题标签:<h1>标题标签</h1>
注释标签:<!-- -->
换行标签:<br/>
段落标签: <p>段落标签</p>
分隔线标签:<hr/>
加粗标签: <strong>加粗</strong> or <b>加粗</b>
倾斜标签: <em>倾斜</em> or <i>倾斜</i>
删除线标签: <del>删除线</del> or <s>删除线</s>
下划线标签: <ins>下划线</ins> or <u>下划线</u>
小号字体标签:<small>小号字体</small><br>
大号字体标签:<big>大号字体</big><br>
下标标签:5m<sup>2</sup><br> <!-- 5平方米 -->
上标标签:H<sub>2</sub>0<br> <!-- 化学式h2o -->
=====================================================================================
<!--无序列表-->
<ul>
<li>做真实的自己</li>
<li>用良心做教育</li>
</ul>
<!--有序列表-->
<ol>
<li>用心做事</li>
<li>创造价值</li>
<li>联手企业</li>
<li>协同高校</li>
</ol>
<!--自定义列表-->
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
=====================================================================================
图片标签:<img src="img.jpg" width="70%" border="10"/>
alt是替换文本,当图片不能显示时,显示该文字
title是提示文本,把鼠标放到图片上,显示的文字
width和height,只需修改一个,另一个会等比例缩放
=====================================================================================
a标签
1.外部链接:网址要加http:// _blank新窗口打开页面 _self当前窗口打开页面
<a href="http://www.baidu.com" target="_blank">百度</a>
2.内部链接:网址没有http://,就是在打开自己做的首页文件
<a href="index.html" target="_blank">首页</a>
二、表单标签
单选框与多选框要有相同name值,才会是一组单选框,一组多选框
<form action="success.html">
用户名:<input type="text" name="username" value="请输入用户名"><br>
密码:<input type="password" name="pwd"><br>
单选:男<input type="radio" name="sexy">女<input type="radio" name="sexy"><br>
多选:爱好:吃饭<input type="checkbox" name="hobby">睡觉<input type="checkbox" name="hobby">打豆豆<input type="checkbox" name="hobby"><br>
表单提交:<input type="submit" name=""><br>
数据重置:<input type="reset" value name=""><br>
照片:<input type="file" name=""><br>
年龄范围:<input type="range" name=""><br>
邮箱: <input type="email" ><br>
生日:<input type="date" name=""><br>
时间: <input type="time"><br>
薪资:<input type="number" name=""><br>
电话:<input type="tel" name=""><br>
喜欢的颜色:<input type="color" name=""><br>
</form>
======================================================================================
表单下拉标签,style="resize: none;" 防止文本框被拖拽
<form action="success.html" method="post">
学历:
<select name="edu">
<option>研究生</option>
<option>本科</option>
<option>大专</option>
<option selected="selected">高职</option>
</select>
<br/>
<textarea name="tt" cols="50" rows="5" style="resize: none;">留言板</textarea>
<input type="submit">
</form>
三、多媒体标签
视频与音频标签,最好是mp4和mp3格式
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"></video>
<audio src="media/music.mp3" autoplay="autoplay" controls="control"></audio>
autoplay 自动播放
width 宽度
height 高度
loop 循环播放
muted 静音播放
四、特殊字符
复制的时候,注意要带分号
空格
< 小于号
> 大于号
& &
¥ 人民币¥
© 版权
® 注册商标
° 摄氏度
± 正负号
× 乘号
÷ 除号
五、语义化标签
<header> 头部标签
<nav> 导航标签
<article>内容标签
<section>定义文档某个区域
<aside> 侧边栏标签
<footer> 尾部标签
CSS
一、文字笔记
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素
1.块元素独占一行
2.高度,宽度、外边距以及内边距都可以控制
3.宽度默认是容器(父级宽度)的100%
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<span>等,其中<span>标签是最典型的行内元素
1.行内元素一行可以显示多个
2.宽、高直接设置是无效的,默认宽度就是它本身内容的宽度。
常见的行内块元素有<img>、<input>、<td>等,它们同时具有块元素和行内元素的特点
1.和相邻行内元素在一行上,但是他们之间会有空白缝隙。一行可以显示多个
2.默认宽度就是它本身内容的宽度
3.高度,行高、外边距以及内边距都可以控制
元素显示模式的转换
1.display: block; 行内元素转成块级元素
2.display: inline; 块级元素转成行内元素
3.display: inline-block; 转换成行内块元素
=======================================================================================
CSS三大特性
层叠性:解决样式冲突问题,遵循就近原则,哪个样式离得近,就执行哪个,所以下面代码,粉色离得近就变粉色
<style>
div {
color: red;
}
div {
color: pink; /* 就近原则,div粉色离得近就变粉色 */
}
</style>
<body>
<div>我很厉害</div>
</body>
继承性:子标签继承父标签的某些样式,如文本颜色和字号
<style>
div {
color: red; /* 给div定义红色,也就是给div的儿子,p标签定义了红色,有继承性 */
font-size: 14px;
}
</style>
<body>
<div>
<p>我很牛逼</p>
</div>
</body>
优先级:同一个元素指定多个选择器,就会有优先级的产生
1.选择器相同,则执行层叠性,选择器不同,则根据选择器权重执行
2.!important 选择器权重无穷大
=======&#