发布于2022年10月15日2年前 Vs code 软件是一款微软公司推出的免费的轻量级编辑器。 Ctrl+放大视图 Ctrl-减小视图 Shift+alt+方向键 向上、下复制一行 Emmet语法快速生成html结构语法 ！+tab形成骨架 标签+ tab 形成标签 div+tab 父子级关系，可以用> ul>li 兄弟级关系+ div+p+tab 生成个标签* div*6+tab .nav <div class=”nav”></div> #banner<div id=”banner”></div> (默认生成div标签) p.one <p class=”one”></p> span#gay<span id=”gay”></span> 如果标签内想写内容可以用{}表示 .demo$*6 生成类名有序（$自增符号,从1开始排序） 网页是网站中的一页，网页是html文档文件，网站通过一定规则，使用html等制作的用于展示特定内容的相关网页的集合，通过浏览器显示。网页是网站基本元素。因为html中的多媒体内容超越了文本限制，所以html被称为超文本标记语言。 Html语言是描述网页的语言 常用浏览器 谷歌浏览器，火狐浏览器，IE浏览器… 浏览器内核作用是渲染引擎，读取网页内容，计算显示方式。 Web标准是国际万维网（W3C）联盟制定。浏览器内核不同，计算显示页面有差异，所以需要标准。 Web标准 HTML 结构 网页元素 CSS 表现 外观样式 JS 交互 交互效果，行为动作 Html语法 单标签 双标签 标签关系： 包含关系 并列关系 <html lang="en">//根标签 <head>//头部 <meta charset="UTF-8">//万国编码 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>//文档显示主题 </head> <body></body>//文档内容 </html> <!DOCTYPE html>//文档类型说明，一般在html标签之前 Html常用标签 标签的语义就是标签的含义 （1）标题标签 <h1>-</h1>… <h6>-</h6> 重要性依次递减，加了标题标签的文字会加大加粗，一个标题独占一行。 （2）段落标签 <p></P> 文本在一个段落中会根据浏览器窗口界面大小自动换行，段落之间有间隙，一个段落独占一行。 （3）强制换行标签 <br>是单标签，只是简单地开始新的一行。 （4）文本格式化标签（突出重要性，比普通文字更加重要） 加粗 <strong></strong> <b></b> 倾斜 <em></em> <i></i> 删除线 <del></del><s></s> 下划线 <ins></ins><u></u> （5）div和span标签，没有语义，只是一个盒子，用来装内容，用来布局再好不过。 Div一行只能放一个，大盒子；span一行只能放多个，小盒子。 （6）图像标签 <img src=”图像url”/> src是图像标签的必须属性，用于指定图像文件的路径。（必须属性） 图形标签其他属性： alt 替换文本（图片无法显示） title 提示文本（鼠标在图片上时候） width 宽度 height 高度 border 图像边框 （7）路径 相对路径（图像与html文件关系） 同一级路径 直接写名字 下一级路径 / 上一级路径 ../ 绝对路径:指的是目录下的绝对位置，直接到达目标位置，长从盘符开始的路径。 （8）超链接标签 <a href=”跳转目标” target=”目标窗口弹出方式”> Href为必要属性 Target的属性值有2种：_self当前页面打开（默认）；_blank新窗口打开 链接的分类 I 外部链接 <a href="http://地址">123</a> II内部部链接(内部网页之间相互链接) <a href="1.html">内部链接</a> III 空链接 <a href="#">空链接</a> IV下载链接 当Href里面地址是一个文件/压缩包，点击链接会自动下载这个文件。 V 网页元素链接 网页中各种元素，文本，图像，音频，视频都可以都可以添加超链接。 VI锚点链接（点击链接可以快速定位到页面对应位置） <a href="#oo">锚点链接</a> <p id="00">锚点链接</p> （9）注释 快捷键ctrl+/ <!-- --> （10）特殊字符 空格 大于号> > 小于号< < （11）表格标签 表格标签用于布局，展示数据 <table> <tr> <th>123</th> <td>123</td> <td>123</td> <td>123</td> </tr> </table> Th标签是表头单元格标签，突出重要性。 表格属性 align Left,center,right（对齐方式）指的是表格位置 border 边框（默认为无） cellpadding 单元格边沿与内容之间空白，默认1px cellspacing 单元格之间空白（默认2px） width 宽度 height 高度 表格结构标签 表格头部thead区域 表格主体tbody区域 可折叠标签使得结构简单明确 合并单元格（合并以后删除多余单元格） 跨行合并 Rowspan=”合并单元个数”(垂直方向) 跨列合并 Colspan=” 合并单元个数” (水平方向) （12）列表标签 无序列表 有序列表 自定义列表 li是列表项目 无序列表 <ul> <li></li> </ul> ul中只能有li，li中可以放任何标签。 无序列表会带有自己的样式。 有序列表 <ol> <li></li> </ol> ol中只能有li，li中可以放任何标签。 有序列表会带有自己的样式。 自定义列表：对术语/名词进行解释，定义列表项前无任何项目符号。 <dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> <dd>名词1解释3</dd> </dl> dl中只能有dt,dd，dt,dd中可以放任何标签, dt,dd个数无限制，常常是一个dt对应多个dd。 （13）表单标签 表单的目的是为了收集信息。 表单的组成：表单域，表单控件也被称为表单元素（方框、按钮），提示信息（文字信息） I表单域是包含一个表单元素的区域，实现用户信息收集和传递。 form会把它范围内的表单元素提交给服务器 <form action="url地址" method="提交方式" name="表单域名称"></form> II表单元素 （1）Input输入表单元素 单标签 Input用于收集用户信息 <input type="属性值"> Type是必须属性 Type常用属性值 text 文本框（20字符） password 定义密码字段 radio 定义单选按钮 checkbox 定义复选框 button 定义单击按钮，不提交信息，用于和JS一起做某事 submit 提交按钮（默认显示“提交”，可通过value更改） reset 重置按钮默认显示“重置”，可通过value更改） File 上传文件 Input其他属性，name 同组的Radio和checkbox必须用相同的名字。 相同名字Radio是为了实现多选一 Input其他属性，value（规定Input元素的值） 规定框内默认显示文字/点击按钮把值送给后台 （value主要是后台人员使用） Input其他属性，checked 主要针对单选按钮，复选框；页面打开时的默认选项。 Checked=“checked” Input其他属性，maxlength规定输入字段中字符最大长度。 Label标签为Input定义标注标签 Label可以绑定一个表单元素，当点击<label>标签文本内容时候，浏览器会自动转到对应光标上。（for中的内容和id中内容相同） <input type="radio" id="sex1" name="sex"><label for="sex1">男</label> <input type="radio" id="sex2" name="sex"><label for="sex2">女</label> （2）Select 下拉表单元素 多个选项让用户选择，节约页面空间<select name="" id=""> <opition></opition> <opition></opition> <opition></opition> </select> 在opition中定义selected=”selected”,设置默认选择项 （3）Textarea文本域元素 书写大量文字 <textarea name="" id="" cols="30" rows="10"></textarea> Rows 行数 Cols 每行字符数
创建帐户或登录后发表意见