html
- 标题 h1-h6
- 段落 p
- 水平线 hr
- 换行 br
- 字体样式 i 斜体,b 粗体,s 下划线
- 列表
- 无序列表 ul>li
- 有序列表 ol>li
- 自定义列表 dl>dt+dd
- 超链接
<a href="#" title="吃法"> 你好</a> 使用id 来添加锚点 功能跳转到顶部
- 图片
<img src="123.png" title="这是一张图片" alt="猫咪">
- 预排版 pre
- 实体
- 空格 :
< : <> : >
- 表格
- 表格：
<table></table>
- 行：
<tr></tr>
- 单元格：
<td></td>
- 每列的标题：
<th></th>
- 表格标题：
<caption></caption>
- 对齐
- 水平对齐
align="center/left/right"
- 垂直对齐
valign="top/middle/bottom"
- 单元格间距和填充
- 单元格间距（cellspacing）：单元格和单元格距离，默认是2像素
- 单元格填充（cellpadding）：单元格和内容的距离，默认是1像素
- 合并单元格
- 合并行(rowspan)：把不同的行合并起来，写在上面的单元格上面
- 合并列(colspan)：把不同列合并起来，写在左边的单元格上面
<!-- 表格的区域,border属性代表边框的意思 -->
<table border="1">
<!-- 行 -->
<tr>
<!-- 单元格 -->
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<!-- 单元格 -->
<td>令狐冲</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<!-- 单元格 -->
<td>任盈盈</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<!-- 单元格 -->
<td>任我行</td>
<td>男</td>
<td>55</td>
</tr>
<tr>
<!-- 单元格 -->
<td>岳不群</td>
<td>男</td>
<td>50</td>
</tr>
</table>
<!-- 合并单元格 -->
<table cellspacing="0" cellpading="30" border="1" width="300" height="200">
<caption><h3>学生证</h3></caption>
<tr>
<th align="center" colspan="4">深圳老马程序员</th>
</tr>
<tr align="center">
<td>姓名</td>
<td>班级</td>
<td>学号</td>
<td rowspan="2">照片</td>
</tr>
<tr align="center">
<td>曾真光</td>
<td>php14期</td>
<td>007</td>
</tr>
</table>
- 排版标签
- 标签通用属性
- id 唯一标识不能重复 class 类可以多个,重复 name 可以重复 style 样式
- 表单 ：
<form></form>
- input 输入框
<input />
- maxlength 最大长度
- value 默认值
- size 文本框长度
- readonly 只读
- disabled 禁用
- required：必填
- placeholder：输入内容提示
- autofocus：自动获取焦点-----自动帮我们将光标点进去
- type 类型
- 常用:
- "text" 文本框
- "password" 密码框
- "radio" 单选框
- "checkbox" 复选框
- "file" 文件上传
- "button" 普通按钮
- "submit" 提交按钮
- "reset" 重置按钮
- "email"，文本框中只能输入email地址
- 不常用
- date 日期空间
- time month 月份
- week 周选择
- number 唤醒数字键盘
- range 滑块
- color 颜色选择器
- 下拉菜单 select>option
- 文本域
<textarea></textarea>
<form>
<!-- 单选 -->
<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1" checked>女
<!-- 多选 -->
<input type="checkbox" />足球
<input type="checkbox" />排球
<input type="checkbox" checked />篮球
<!-- 下拉菜单 -->
<select>
<option>江苏</option>
<option>浙江</option>
<option>安徽</option>
<!-- 下拉分组 -->
<optgroup label="省份">
<option value="1">山东省</option>
<option value="2">河北省</option>
<option value="3" selected>河南省</option>
</optgroup>
</select>
</form>
- 语义化标签
<header> 标记定义一个页面或一个区域的头部<nav>标记定义导航链接<article>标记定义一篇文章内容<section>标记定义网页中一块区域<aside>标记定义页面内容部分的侧边栏<footer>标记定义一个页面或一个区域的底部
- meta 标签
<meta charset="utf-8"> <!--告知浏览器使用utf-8的编码格式来解析页面-->
<meta name="description" content="网页内容文本,PHP开发,laravel,thinkPhP`"> <!-- 搜索引擎上的描述 -->
css
<head>
<style type="text/css">
div{color:red;}
</style>
</head>
<div>这是一个盒子</div>
<style type="text/css">
span{
font-family:"微软雅黑"; /* 字体 */
font-size:20px; /* 大小 */
font-weight:bold; /* 粗细 */
font-style:italic; /* 样式 */
}
</style>
- 文本属性
- 文本对齐方式(左中右)
text-align:left|right|center
- 首行缩进 两个字符也可以用px单位
text-indent:2em
- 字体颜色 也可写数值 #666
color:red
- css选择器
<style>
input[value]{color:red;} /* 选择具有该属性的元素 */
input[name="username"]{color:red;} /* 选择具有该属性且等于该值的元素 username */
p[name~="song"]{color:red;} /* 属性有多个值 ，且值中包含该值的元素 second song */
[name|="zhang"]{color:blue} /* 属性中有连字符链接多个单词 zhang-san-feng */
[name*="o"]{color:green} /* 选择属性的值中包含当前的值的元素 name中标包含字母o的 元素 */
</style>
<body>
<input type="text" name="username">
<input type="text" name="password">
<input type="button" value="普通按钮">
<hr/>
<p name="first song">锄禾日当午</p>
<p name="second song">汗滴禾下锄</p>
<p name="song">谁知盘中餐</p>
<p name="last song">粒粒皆辛苦</p>
<hr/>
<input name="zhang san">
<input name="li-xiao-san" value="张小三">
<input name="zhang-san-feng">
<input name="li xiao si" value="李小四">
<input name="wanger xiao" value="王二小">
</body>
- css尺寸 行高
- 宽度
width:50px
- 高度
height:50px
- 行高
line-height:50px
- font简写
- font: font-style font-weight font-size/line-height font-family
font:italic bolder 30px/100px "微软雅黑";
- 背景属性
- 颜色
background-color:red;
- 图片
background-image:url(./images/1.jpg);
- 是否平铺
background-repeat:no-repeat;
no-repeat不平铺，repeat-x横向平铺，repeat-y纵向平铺，repeat横向纵向都平铺------默认
- 背景图片位置
background-position:center center;
- 综合使用 background:颜色 url(图片路径) 平铺类型 位置/大小
background:red url(/img/1.jpg) no-repeat left top/50px 50px
- 列表属性
- 去掉前缀
list-style-type:none
- 将列表前缀设置为自定义图片
list-style-image:url(图片路径)
- 内容溢出
overflow:auto|hidden|scroll
自动生成滚动条（右边）
超出部分隐藏
右边和下边都有滚动条- overflow-x 水平方溢出
- overflow-y 垂直方向溢出
- 内部样式
<style type="text/css">
/* 使用style标签 */
</style>
<!-- 行内样式 直接写在标签上的style属性中-->
<div style="color:red;">
我是盒子
</div>
<!-- 外部样式 使用标签关联 -->
<!-- 在html的head标签中 -->
<link rel="stylesheet" type="text/css" href="css文件路径">
<!-- 外部样式 使用指令关联 -->
<style type="text/css">
/* 在style标签中 */
@import url("css文件路径")
</style>