JavaHTML

HTML超文本标记语言

W3C万维网联盟

W3C标准包括：

1. 结构化标准语言（HTML,XML）
2. 表现标准语言（CSS）
3. 行为标准（DOM,ECMAScropt）

网页基本信息

使用 进行注释

!DOCTYPE告诉浏览器我们要使用什么规范

< head> 标签代表网页头部

• < title>网站标题
• < meta>用来描述我们网站的一些信息

< body>标签代表网页主体

最后都要用< /xxxx>闭合

网页基本标签

1. 标题标签

   • h1一级标签，以此类推

2. 段落标签

   • < p>分段

3. 换行标签

   • < br/>（写在后面）不用开头写东西，自闭和标签
   • 换行其实还是一段，比段落的间距要小

4. 水平线标签

   • < hr/>自闭和标签

5. 字体样式标签

   • 粗体< strong>
   • 斜体< em>

6. 特殊符号

   • 空格：& nbsp; 在代码中用正常空格无论用多少个都在网页上只显示一个
   • 大于& gt;
   • 小于& lt;
   • 书名号& copy;

7. 图像标签

   • 相对路径：通过 … 代表当前文件位置上一级目录

   • 绝对路径：从盘开始

   • < img src=“图片路径” alt=“图片加载失败的代替文字” title=“悬停文字（鼠标放在图片上显示的文字）” width=“宽度” height=“高度”>

8. 连接标签

   • < a href=“路径” target=“目标窗口位置”>该链接的内容，可以是文字也可以是图片< /a>
   • 目标窗口位置常用_blank在新标签打开 _self该页面打开
   • 锚标签
     • 需要一个锚标记< a name=“top”>顶部< /a> (使用name作为标记)
     • href内容改为#标记

9. 列表标签,内部用< li>

   • 有序列表：< ol>
   • 无序列表：< ul>
   • 自定义列表:< dl>
     • < dt>标题
     • < dd>内容

10. 表格标签< table>

    • 行< tr> 列< td>
    • 跨列 在td后面加上colspan=“跨的列数”
    • 跨行 在tr后面加上rowspan=“跨的行数”

11. 视频< video>后面加上controls有控制页面 autoplay自动播放

12. 音频< audio>

页面结构分析

1. header标题头部区域的内容
2. footer标记脚步区域的内容
3. section：Web页面中的一块独立区域
4. article独立的文章内容
5. aside相关内容或应用（常用于侧边栏）
6. nav导航类辅助内容

iframe内联框架

使用这个标签可以嵌套页面

表单< form>

< form action=“表单提交的位置，可以是网站也可以是请求” method=“post/get两种方法”>

get/post：

• get方式可以在url中看到提交的信息，不安全但是效率高
• post方式看不到

表单元素格式：

• type
• name指定表单元素的名称
• value元素的初始值，type为radio时必须指定一个值
• size表单初始宽度
• maxlength：类型为text或password时，输入的最大字符数
• checked：类型为radio或checkbox时，指定按钮是否被选中
• readonly只读
• disabled禁用

内容用< p >

input type = “text” name="username"会生成一个text框（还有password框），输入的内容命名为username

input type：(默认text)

• text
• password
• submit提交
• reset重置
• checkbox单选
• radio多选
• file
• hidden
• image
• button
• email邮箱验证
• url验证
• number 数字，可以加数减数还可以设置上限
• range滑块
• search搜索

下面不用input：

< p>中用< select>生成下拉框，用< option>设置内容，selected可以将该内容设置为默认

< p>中用textarea生成文本域 cols设置列，rows设置行

label可以打开某个框，增强鼠标可用性

表单初级验证

常用方法:

• placeholder 告诉用户要输入什么
• required非空判断
• pattern正则表达式判断