文章目录
HTML5
vsco的使用
-
新建文件(crtl+n)
-
保存(ctrl+s)
-
生成页面(感叹号) tap键确定
-
利用插件预览(“open in defalut browser”)
常用标签
-
标题标签 《h1》
-
段落标签 《p》
-
换行标签《br/》
黑色加粗为推荐使用
- 加粗 《strong》
加粗《b》
- 倾斜 《em》
倾斜《i》
- 删除线《del》
删除线《s》
- 下划线《ins》
下划线《u》
是没有语义的,只是一个盒子装内容
《div》表示分区,大盒子
《span》表示跨度,小盒子
图像标签
-
《Img src = “ 图像rul”/》
-
alt 替换文字
-
title 鼠标放上去显示的文字
-
width 宽度,height高度,border
超链接标签
《a》超链接标签
<a href = "跳转目标" target = "目标窗口弹出方式">文本或图像</a>
——blank 新窗口打开
井号空链接
href里面是文件或压缩包,会下载文件
锚点链接
<a href = "#two">
<h3 id = "two">
- 注释
<!-- xxx -->
快捷用法: ctrl + /
特殊字符
- 空格: 
- 小于号:<
- 大于号:>
- 和号:&
表格标签
表格用来展示数据
- 表格基本语法
<table> // 定义表格
<tr> //定义行
<th>XXX</th> //表头
<td>//定义单元格
...
</td>
...
</tr>
</table>
- 表格属性
- align (left,center,right)对齐方式
- border (1,空) 边框
- cellpadding 字和表格
先书写表格结构 ,后书写表格属性 。
- 表格结构
《thhead》
《thbady》
- 合并单元格
跨行合并:rowspan = “合并个数”
跨列合并:colspan=“合并个数”
步骤
- 先确定是跨行还是跨列合并
- 找到目标单元格,写上方式和数量
- 删除多余单元格
列表标签
《ul》无序
《ol》有序
《li》列表项
ul里面只能放li
- 自定义列表
<dl>
<dt>名词</dt>
<dd>解释</dd>
<dd>解释</dd>
如何使用看关系
表单标签
-
完整的表单
- 表单域(包含表单元素的区域)
- 《from》标签
- 会把范围内的表单元素信息提交给服务器
- 表单控件
- 提示信息
- 表单域(包含表单元素的区域)
-
表单域语法
<form action="url地址" method="提交方式" name="表单域名称">各种表单元素控件</form>
- 表单控件
- input输入表单元素(type,name,value,checked,maxlength)
- 文本:text
- 密码:password
- 单选按钮:radio(需要相同name)
- 复选框:checkbox
- 提交按钮:submit
- 重置按钮:reset
- 按钮:button
- 提交文件:file
- select 下拉表单元素
- 至少包含两个选项
- 定义selected= “selected”时为默认选项
- textarea 文本域元素
- input输入表单元素(type,name,value,checked,maxlength)
《lable》
增加用户体验
<label for="text">用户名:</label><input type="text" id="text"><br>
for和id对应
- select 语法
<select>
<option>sb</option>
<option>1</option>
<option>2</option>
</select>
实战(注册页面)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>home</title>
</head>
<body>
<h4>注册页面</h4>
<table width= "600" >
<!-- 第一行 -->
<tr>
<td>姓名</td>
<td><input type="text" value="请输入名字"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<label for="radio">哥哥</label><input type="radio" name="1" id="radio">
<label for="2">妹妹</label><input type="radio" name="1" id="2">
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日</td>
<td>
<select>
<option>--请输入年份--</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
</select>
<select>
<option>--请输入月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>所在地区</td>
<td><input type="text" value="填写你的城市"></td>
</tr>
<!-- 第四行 -->
<tr>
<td>婚烟状态</td>
<td>
<input type="radio" name="marry" checked="checked">未婚<input type="radio" name="marry">已婚<input type="radio" name="marry">离婚
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历:</td>
<td><input type="text" value="请输入"></td>
</tr>
<!-- 第六行 -->
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="love" > 游戏
<input type="checkbox" name="love" > 音乐
<input type="checkbox" name="love" > 摄影
<input type="checkbox" name="love" > 跑步
<input type="checkbox" name="love" > 唱歌
<input type="checkbox" name="love" > 运动
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>个人简述</td>
<td>
<textarea name="个人简介"></textarea>
</td>
</tr>
<!-- 第八行 -->
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
<