HTML-1
网页(文字/图片/链接/音视频等)
浏览器(chrome/ie/firefox/Safari/Opera等)
浏览器内核(Chromium/Blink/Trident/Gecko/webkit/blink等)
Web标准(W3C) 为了让各个浏览器展示相同内容时趋向一致
HTML 超文本标记语言 用于描述网页的结构
<!--基本结构，推荐小写--> <html> <head> <title></title> </head> <body> </body> </html>
标签 ： 双标签 、 单标签
标签关系 : 嵌套(父子) 、 并列(兄弟)
开发工具 sublime
快捷键 ctlr+n 新建 ctrl+鼠标滚轮/ctrl+加号/减号 放大/缩小视图 html:5+tab / !+tab 生成html基本结构 ctrl+/ 注释 右键 > 在浏览器中打开 预览网页 按住shift+鼠标右键向下拖动 竖向选择
ctrl+shift+d 复制当前行到下一行位置
标签名+tab 快捷生成标签元素
标签名*n+tab 生成n个相同的标签
父标签>子标签+tab 生成父子级/嵌套标签
兄弟标签1+兄弟标签2+tab 生成兄弟级/并列标签
标签名.demo+tab 生成带有类名的标签
标签名.demo$*n+tab 按顺序生成带有类名的标签
标签名#demo+tab 生成带有ID的标签
<!--文档类型声明 告诉浏览器使用HTML5规范解析网页--> <!DOCTYPE html>
<!--页面语言 en 英语 zh-CN 中文--> <html lang="en">
<head> <!--字符集 gb2312 简体中文 BIG5 繁体中文 GBK 中文，gb2312的扩展，加入了对繁体的支持 UTF-8 几乎包含全世界所有国家--> <meta charset="utf-8" /> </head>
标签语义化 ： 标签的含义
排版标签
h1~h6 标题 p 段落 hr 水平线 br 换行 div 用于布局，块级 span 用于布局，行内
文本格式化标签
b strong 粗体 i em 斜体 s del 删除线 u ins 下划线
标签属性 为html标签提供更多信息 <标签名 属性1="值2" 属性2="值2" ...></标签名>
<!--图片标签--> <!--推荐宽度、高度只给其中一个，另一个值会自动等比缩放，避免图片变形--> <img src="图片URL" alt="图片无法显示时的替换文本" title="鼠标悬停时的提示文本" width="宽度" height="高度" border="边框" />
<!--链接标签--> <!--href 外部链接必须添加 http:// 或 https://--> <!--target _self 默认值 _blank 新窗口打开--> <a href="跳转目录" target="目标窗口弹出方式">文本/图片</a> <a href="#">空链接</a>
<!--锚点-->
<标签名 id="值"></标签名>
<a href="#id值"></a>
<!--注释-->
路径
相对路径 ： 相对当前网页的目录路径。路径关系：同一级(直接写文件名)、下一级 / 、上一级 ../
绝对路径 ： 以web站点的根目录为起点 或 在本地以硬盘为起点
base
<head> <!--设置网页链接整体打开方式--> <base target="_blank" /> </head>
预格式化文本
<!--会保留空格和换行-->
<pre> 你 真 好 看 </pre>
特殊字符
空格 < 小于号 > 大于号 & 和号 ¥ 人民币符号 © 版权符号 @reg; 注册商标 ° 摄氏度 ± 正负号
表格
<!--表格主要用于展示数据-->
<table border="边框" width="宽度" height="高度" align="水平对齐方式" cellspacing="单元格与单元格之间的距离" cellpadding="单元格内容与单元格边框的距离">
<caption>表格标题 : 居中显示在表格之上</caption> <tr> <!--行标签--> <th>表头:文本加粗居中显示</th> </tr> <tr> <td>单元格</td> </tr> </table>
<table> <!-- colspan 跨列合并, 顺序：从左往右--> <tr><td colspan="2"></td></tr> <!--rowspan 跨行合并，顺序：从上到下--> <tr><td rowspan="2"></td><td></td></tr> <tr><td></td></tr> </table>
<!--表结构--> <table> <!--表格头部--> <thead></thead> <!--表格主体--> <tbody></tbody> <!--表格脚注--> <tfoot></tfoot> </table>
列表
<!--列表 常用于页面布局--> <!--无序列表--> <ul> <li>列表项</li> </ul> <!--有序列表--> <ol> <li><li> </ol> <!--自定义列表--> <dl> <dt>名词</dt> <dd>名词解析1</dd> <dd>名词解析2</dd> </dl>
表单
<!--表单 主要用于收集用户信息,form中所有的具用name属性的内容都会被提交到服务器--> <form action="url" method="请求方式 get|post" name="名称"> <!--type : text 文本 password 密码 radio 单选 checkbox 复选 button 按钮 submit 提交 reset 重置 image 图片按钮 file 文件域 hidden 隐藏域 --> <!--name ： 向服务器提交数据时需带有这个属性--> <input type="控件类型" name="名称" value="值" size="显示宽度" checked="checked值，单选/复选框时可使用,代表是被选中" maxlength="允许输入的最大字符数量" /> </form>
label
<!--搭配表单一起使用可提高用户体验--> <!--用label标签绑定一个表单元素，当点击label标签时，被绑定的表单元素就会获得输入焦点--> <label> 用户名: <input type="text" value="请输入用户名" /> </label> <label for="pwd"> 密码: <input type="password" id="pwd" /> </label>
textarea 文本域
<!--文本域--> <textarea rows="显示行数" cols="每行字符数"> 文本内容 </textarea>
select 下拉列表
<select> <option selected="selected 默认选中">选项</option> </select>
综合案例：用户注册
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> </head> <body> <form action="#" method="post" name="register"> <table width="380px" align="center"> <caption><h3>用户注册</h3></caption> <tbody> <tr> <td><label for="username">用户名<lable></td> <td> <input type="text" name="username" id="username" placeholder="请输入用户名" /> </td> </tr> <tr> <td><label for="pwd">密码</label></td> <td> <input type="password" name="pwd" id="pwd" placeholder="请输入密码" /> </td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="sex" checked="checked" />男 <input type="radio" name="sex" />女 </td> </tr> <tr> <td>爱好</td> <td> <input type="checkbox" name="hobby[]" />唱歌 <input type="checkbox" name="hobby[]" />跳舞 <input type="checkbox" name="hobby[]" />写代码 </td> </tr> <tr> <td>生日</td> <td> <select name="year"> <option value="0">--请选择年--</option> <option value="2000">2000</option> <option value="2001">2001</option> <option value="2002">2002</option> </select> <select name="month"> <option value="0">--请选择月--</option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> </select> <select name="day"> <option value="0">--请选择日--</option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> </select> </td> </tr> <tr> <td><label for="intro">自我介绍</label></td> <td> <textarea name="intro" id="intro" cols="38" rows="5"> 请输入自我介绍 </textarea> </td> </tr> <tr> <td></td> <td> <input type="submit" value="立即注册" /> </td> </tr> <tr> <td></td> <td> <input type="checkbox" name="agree" checked="checked" /> 我已阅读并同意注册条款 </td> </tr> <tr> <td></td> <td><a href="#">我是会员，立即登录</a></td> </tr> <tr> <td></td> <td> <h4>我承诺</h4> <ul> <li>所填信息属实</li> <li>不属实你锤我</li> </ul> </td> </tr> </tbody> </table> </form> </body> </html>
参考站点
浙公网安备 33010602011771号