一、HTML
1.排版标签
标题标签:<h1>~<h6> 标题字体依次减小 注意:一个网页只能存在一个一级标题
段落:<p> 块级元素
横线:<hr>
换行:<br>
2.div和span
div:块级元素 独占一行
span:行级元素 横向排列
注意:div和p的区别 div可以包裹盒子 包裹任何标签 p不可以包裹div
3.文本格式化
<b>加粗</b>
<strong>也是加粗</strong>
<i>斜体</i>
<em>也是斜体</em>
<s>删除线</s>
<del>也是删除线</del>
<u>下划线</u>
<ins>也是下划线</ins>
<!--建议用strong,em,del,ins -->
<!-- 都是行内元素 -->
4.img标签和属性
<img src="图片.jpg" alt=""> 从本地文件获取图片
<img src="http://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">从网站获取图片
<img src="img/图片" alt="图片"> alt:当网络加载加载出错时,进行文字提示
<img src="img/l图片.jpg" width="200" title="图片"> 可以对图片进行大小(width)设置
5.超链接标签
<!-- href:超文本引用 target:_blank _self(默认) 新打开页面-->
<a href="http://www.baidu.com"> 百度一下 </a>
<a href="05-img的属性.html" target="_blank"> 本地文件 </a>
<!-- 没有网址时可以用#代替 用#时不刷新界面-->
<a href="#">logo</a>
6.特殊字符
<!-- 特殊字符 -->
<!-- <小于号 -->
<!-- >大于号 -->
<!-- :半角空格 -->
<!--  :全角空格 -->
< >  
7.无序列表、有序列表和自定义列表
无序列表:ul和li是无序列表 具体表现如下
有序列表:ol和li为有序列表
自定义列表:dl dt dd 自定义列表 dt dd并列关系
8.input控件
<!-- 单行文本输入框 -->
<lable>用户名:</lable><input type="text" name="username">
<!-- 密码框 placeholoder:占位符-->
密码<input type="password" placeholder="请输入密码" name="password">
<!-- name:与后台交互时必修要设置 -->
<!-- 按钮 -->
<input type="button" value="登录">
<button>按钮</button>
<button>
<img src="img/liuyifei.jpg" alt="" width="20">
</button>
二、css
1.css的使用方式
<!-- 1.行内样式 -->
<p style="font-size: 10px; color:red;">
关于迷茫 当你不知道如何抉择时,可以假想五年后你回顾青春,你就知道如何抉择了
</p>
<!-- 2.内连接样式 -->
<style>
div {
font-size: 100px;
color: blue;
}
</style>
<!-- 3.外连接样式 -->
<link rel="stylesheet" href="css/common.css">
外连接需要在外部文件把css样式表提前创建好,外连接样式可以重复用于多个网页
2.选择器
<style>
/* 标签选择器:可以选择到所有的该标签*/
div {
color: aqua;
}
span {
color: blueviolet;
}
/* class选择器 类选择器 */
/* 如果页面有相同的样式时,采用相同的class */
.item {
color: brown;
}
/* ID选择器 */
#main {
color: black;
}
/* 通配符选择器 所有的标签都适用,谨慎使用*/
* {
border: 1px solid red;
}
</style>