本文介绍了Web开发者常用的快捷键技巧，如文本选择、替换、定位等，以及HTML、CSS和JavaScript的基础知识，包括标签结构、样式、行为、表单元素和元数据的使用，有助于新手理解和提高开发效率。
快捷键
shift + alt + 箭头 快速复制
ctrl + d 选择相同的多个单词
ctrl + alt + 箭头 添加多个光标
ctrl + h 全局替换某个单词
ctrl + g 快速跳到某一行
shift + alt +拖动 选中区块
ctrl + / 单行注释
ctrl + shift +a 多行注释
Web标准
W3C(万维网联盟)
why
what
结构
网页元素 标签 html
表现
外观样式 css
行为
交互 Javascript
HTML
要求
书写规范
骨架标签
超链接标签
图片 alt title
相对路径
语法规范
基本语法概述
尖括号包围
成对出现 双标签
单标签 少！！
标签关系
包含关系
<head>
<title></title>
</head>
并列关系
<head></head>
<body></body>
基本结构标签
<html></html> 根标签
<head></head>头部
<title></title>标题
<body></body>主体
网页开发工具
文档类型声明标签
<!DOCTYPE>
<!DOCTYPE html>
lang语言种类
<html lang="en">英文网页
<html lang="zh-CN">中文网页
字符集
<head>
<meta Charset="UTF-8">必写！！
常用标签
标签语义
作用
让页面结构更加清晰
标题标签
<h1>-<h6>
段落和换行标签
<p></p>
自动换行
段落和段落之间保有空隙
<br />单标签
break
文本格式化标签
粗体
<strong></strong>
语义更强烈
<b></b>
斜体
<em></em>
语义更强烈
<i></i>
下划线
<ins></ins>
<u></u>
删除线
<del></del>
<s></s>
盒子标签
用于布局
<div></div>
一行放一个 大盒子
<span></span>
一行放多个 小盒子
图像标签和路径
图像标签
注意：
将图片和网页文件放在一起
可以有多个属性 在标签名后面
不分先后顺序 标签名与属性，属性之间以空格分开
属性="属性值"
单标签
src
是<img>标签的必须属性，指定图像文件的路径和文件名
alt
替换文本 图像显示不出来的时候用文字替换
title
提示文本 鼠标放到图像上，提示的文字
width height
给图像设定宽度
给图像设定高度
改其中的一个
border
给图像设定边框
路径
目录文件夹：存放相关素材
根目录：打开目录文件夹的第一层
相对路径：以引用文件所在位置为参考基础
同一级
下一级
上一级<../图片名字>
绝对路径
图片在电脑中的位置或完整的网络地址
超链接标签
属性
href 必须属性
target 打开方式
_self默认值 当前窗口打开
_blank在新窗口中打开
链接分类
外部链接
内部链接
只需要名字不需要http：//
空链接
#代替
下载链接
地址链接是 文件 . exe 或者是 文件.zip,
会直接下载
网页元素链接
文本图像表格音频视频都可以添加超链接
锚点链接
跳转到页面的某个地方
<h3 id="two">第二集介绍</h3>
注释和特殊字符
注释
<!--文字-->
ctrl+/自动注释
特殊字符
空格符
<!-- -->
小于号
<!--<-->
大于号
<!-->-->
表格标签
作用
展示数据
语法
<table>
<tr>行
<td>单元格内的文字</td>
…
</tr>
…
</table>
表头单元格标签
居中加粗显示
<th>
表格属性
不常用
align 对齐 center left right
border 边框 1
cellpadding 单元格和内容
cellspacing 单元格和单元格之间
width 表格宽度
表格结构标签
<thead>
<tbody>
可折叠 让表格有更好的语义
合并单元格
跨行合并
rowspan="合并单元格的个数"
跨列合并
colspan="合并单元格的个数"
目标单元格
三部曲
先确定跨行还是跨列
找到目标单元格<td colspan="2"></td>
删除多余的单元格
列表标签
作用
用来布局
整齐整洁有序
列表分类
ul无序列表
特点（使用最多）
并列 没有顺序
语法规范
<ul>
<li>列表</li>
<li></li>
<li></li>
</ul>
！！注意<ul>里面只能放<li>
<li>里面放啥都行 相当于容器
去掉li前面的小圆点；
list-style:none;
ol有序列表
特点
有一定的顺序
语法规范
<ol>
<li></li>
</ol>
注意事项同上
dl自定义列表
特点
没有项目符号
包含关系
语法规范
<dl>
<dt>名词1</dt>
<dd>解释</dd>
</dl>
注意同上
个数没有限制
表单标签
作用
收集用户信息
组成
表单域
<form>
作用
用户信息的收集和传递
语法规范
<form action="url地址" method="提交方式" name="表单域名称">
</form>
action url地址
method get/post
name 名称
表单控件（元素）
input 输入表单元素
<input type="属性值" />
<input/>单标签
type 属性值
text 文本框
password 密码框
radio 单选按钮
checkbox 复选框
submit 把表单元素里面的值提交给后台服务器
reset 还原至默认状态
button 获取短信验证码
file 上传文件
其他属性
name 是表单元素名字（用户自定义）
value 规定input元素的值
！！！name和value是每个表单元素都有的属性值 给后台人员使用
！！！ name表单元素名字，要求单选按钮和复选框有相同的name值
checked属性 页面打开时默认选中
maxlength 规定最大长度
label 标签
<label> 定义标签
<label for="sex">男</lable>
<input type="radio" name="sex" id="sex" />
增强用户体验感
select 下拉表单元素
<select>
<option>选项</option>
<select>
定义属性 默认选中
selected="selected"
textarea 文本域元素
大量书写
<textarea rows="3" cols="20">
文本内容
</textarea>
扫一扫
3910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
