HTML

# WEB标准: 结构、表现、行为 结构:结构用于对网页元素进行整理和分类,主要是HTML 表现:表现用于设置网页元素的版式、颜色、大小等外观,主要是CSS 行为:行为是指网页模型的定义及交互的编写,主要是JavaScript ```html <HTML> // 语言标记 <head> // 头部 </head> <body> // 身体 </body> </HTML> ``` # 标签类型: ```html 单标签: <br/>换行 <hr/>分割线 <img/>图片 双标签: <title>网页标题</title> 标题标签 <h1-h6>标题内容</h1-h6> 标题标签 <p>文本内容</p> 段落标签 <a>、</a> 超链接标签 <b>、</b>、<strong>、</strong> 加粗标签 <i>、</i>、<em>、</em> 文字斜体 <s>、</s>、<del>、</del> 文字删除线 <u>、</u>、<ins>、</ins> 文字下划线 <div>、</div>、<span>、</span> 两者区别就是div占一行,span占内容大小 ``` ## \<img> 的属性 * `src` 图片的路径 * `alt` 图片不显示时显示的文本 * `title` 鼠标移动到图片上显示的文本 * `width` 图片的宽 * `height ` 图片的高 * `border ` 在图片周围加个框 ## \<a>的属性 * `href` 跳转的链接 * `# ` 空链接 * `target` 打开链接的方式 * `_self` 原网页跳转 * `_blank` 新创建网页 ## \<audio> 的属性 * `src` 音频URL,支持MP3、Ogg、Wav * `controls` 显示视频控制面板 * `loop` 循环播放 * `autoplay` 自动播放 ## \<video> 的属性 * `src` 视频URL,支持MP4、WebM、Ogg * `controls` 显示视频控制面板 * `loop` 循环播放 * `muted` 静音播放 * `autoplay` 自动播放 <!-- 内容 --> 中间内容就被注释掉,类似 /* */ ../ 返回上一级文件夹,如果需要返回多个上级加多个 快速跳转到锚点,就是锚点设置ID,目录加a标签跳转路径是ID <base />用法等于a标签,只是用来设置网页跳转方式为打开新标签,在head里面设置 <pre>内容</pre> 预格式化文本,就是读取内容的格式直接显示,不需要用其他标签来显示样式 特殊字符: * `&nbsp` 空格 * `&lt` < * `&gt` > * `&amp` & * `&yen` ¥ * `&times` × * `&divide` ÷ # 表格标签 ```html <table></table> 表格标签 <tr></tr> 行 <thead></thead> 表格头部 <tbody></tbody> 表格身体 <th></th> 表头单元格 ↓ 两者为 <td></td> 行内单元格 ↑ 同级 <caption></caption> 表格标题标签,表格上方中间 表格标签的属性: border 边框 单位:像素 cellspacing 单元格与单元格边框之间的空白间距 单位:像素,默认2像素 等于外边距 cellpadding 单元格内容与单元格边框之间的空白距离 单位:像素,默认1像素 等于内边距 width 表格的宽度 height 表格的高度 align 表格内容的对齐方式 left、center、right rowspan 跨行合并 填充内容为合并表格数 先上 向下合并 colspan 跨列合并 填充内容为合并表格数 先左 向右合并 ``` # 列表标签 ```html <ul></ul> 无序列表 内部只允许存放li <li></li> 列 <ol></ol> 有序列表 跟ul一样,只是有序号 <dl></dl> 自定义列表 <dt></dt> 自定义列表 标题/父级 <dd></dd> 自定义列表 描述/详情/子级 ``` # 表单标签 ```html <input /> 输入框 type 属性 text 单行文本 password 密码输入 radio 单选按钮 checkbox 复选按钮 button 普通按钮 submit 提交按钮 reset 重置按钮 image 图片形式的提交按钮 file 文件域 name 控件的名称 value 输入框内的值得属性 value = "你好啊" size 输入框的宽度设置 checked 单选复选框的选中情况的属性名称,checked = “checked”就是选中 maxlength 输入框内最大支持的输入字符数 <label></label> 提高用户体验,光标到指定的输入框内 <textarea></textarea> 多行文本框,文本域 ``` # 下拉列表 ```html <select></select> 下拉框 实际中,基本不用,浏览器显示不一样,都是用div模拟 <option></option> 框内选项 语法方式: <select> <option>选项1</option> <option selected="selected">选项2</option> 默认选中这个选项 <option>选项3</option> </select> ``` # 表单域 ```html <form></form> 表单域,中间存放表单 属性: action 提交的连接 method 提交方式 name 表单域的名称 <form action = "http://www.baidu.com"> <input tyep = "text"> </form> <link /> // 引用CSS的标签 ```