HTML

Hyper Text Markup Language,超文本标记语言,不是一种编程语言,而是一种标记语言

思想:网页中有很多数据,不同的数据可能需要不同的显示效果,一个标签相当于一个容器,想要修改容器内数据的样式,只需要改变容器的属性值,就可以实现容器内数据样式的变化。

语言结构介绍:

  1. <!-- 声明文档页面使用的html版本,当前是html5 -->
  2. <!DOCTYPE html>
  3. <!-- html文档的根元素标签,表示html文档的开始和结束 -->
  4. <html>
  5. <!-- html文档的头部标签 -->
  6. <head>
  7. <!-- 定义文档标题 -->
  8. <title>html学习</title>
  9. <!--
  10. 用于html页面的元信息
  11. http-equiv:指定元信息的名称,该属性指定的名称具有特殊意义,它可以向浏览器传回一些有用的信息,帮助浏览器正确地处理网页内容。
  12. name:指定元信息名称,该名称可以随意指定
  13. content:指定元信息的值
  14. -->
  15. <!-- 指定文档的字符编码 -->
  16. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  17. <!-- 3s后会自动跳转到baidu主页 -->
  18. <meta http-equiv="refresh" content="3;url=http://www.baidu.com"/>
  19. <!-- 指定作者 -->
  20. <meta name="author" content="author_name"/>
  21. <!-- 指定关键字,用逗号隔开(便于搜索引擎进行搜索) -->
  22. <meta name="keywords" content="关键字1,关键字2,关键字3"/>
  23. <!-- 对关键字进行描述 -->
  24. <meta name="description" content="对关键字的描述...">
  25. <!-- 链接外部js资源文件 -->
  26. <script src="theme.js"></script>
  27. <!-- 包含js脚本 -->
  28. <script type="text/javascript">
  29. // js代码
  30. </script>
  31. <!-- 链接外部css资源文件 -->
  32. <link rel="stypesheet" type="text/css" href="theme.css"/>
  33. <!-- 定义内部css样式 -->
  34. <style type="text/css">
  35. /* css代码 */
  36. </style>
  37. </head>
  38. <!-- html文档主体标签 -->
  39. <body>
  40. </body>
  41. </html>

块级标签
显示为"块"状,浏览器会在其前后显示折行。常用的块级元素包括:<p>, <h1>~<h6>, <div>, <ul>

标题标签

  1. <!-- 标题标签,从h1到h6依次文字减小 -->
  2. <h1>一级标题</h1>
  3. <h2>二级标题</h2>
  4. <h3>三级标题</h3>
  5. <h4>四级标题</h4>
  6. <h5>五级标题</h5>
  7. <h6>六级标题</h6>

段落标签

  1. <p>同一个世界,同一个梦想</p>
  2. <p>梦想还是要有的,万一实现了呢?</p>

水平线标签

  1. <!-- <hr/> size从1-7,越来越粗 -->
  2. <hr/>

列表

  1. <!-- ol:有序列表 type设置排序方式 1默认,还有a,i.. -->
  2. <ol type="a">
  3. <li>中国</li>
  4. <li>日本</li>
  5. <li>韩国</li>
  6. </ol>
  7. <!-- ul:无序列表 type:circle(空心圆),disc(实心圆),square(实心方块),默认desc -->
  8. <ul type="circle">
  9. <li>苹果</li>
  10. <li>香蕉</li>
  11. <li>橘子</li>
  12. </ul>
  13. <!-- dl:definition list,定义列表,最常用 -->
  14. <!-- dl, dt, dd, 可以将or和ul放在dd里面 -->
  15. <dl>
  16. <dt>亚洲</dt>
  17. <dd>中国</dd>
  18. <dd>日本</dd>
  19. <dd>朝鲜</dd>
  20. <dt>欧洲</dt>
  21. <dd>英国</dd>
  22. <dd>法国</dd>
  23. <dd>德国</dd>
  24. </dl>

分区标签

  1. <!-- div标签一般当作结构化块状元素使用,一般最常用的用途是对网页进行整体分块布局,即当容器来使用 -->
  2. <div id="fruit">
  3. <p>苹果</p>
  4. <p>香蕉</p>
  5. <p>橘子</p>
  6. </div>
  7. <div id="country">
  8. <p>中国</p>
  9. <p>日本</p>
  10. <p>朝鲜</p>
  11. </div>

行级标签

按行逐一显示,前后不会自动换行,常用的行级标签包括:<b>, <i>, <sub>, <sup>

  1. <!-- 定义粗体文本 -->
  2. <b>粗体文本</b>
  3. <!-- 定义倾斜文本 -->
  4. <i>倾斜文本</i>
  5. <!-- 效果和b类似,语气较强 -->
  6. <strong>粗体文本</strong>
  7. <!-- 效果和i类似,语气较强 -->
  8. <em>倾斜文本</em>
  9. <!-- 定义小号文本 -->
  10. <small>小号文本</small>
  11. <!-- 定义下标文本 -->
  12. H<sub>2</sub>o
  13. <!-- 定义上标文本 -->
  14. 10<sup>2</sup>
  15. <!-- 定义文本显示方向,内有dir属性,只能取值ltr从左到右或rtl从右到左 -->
  16. <bdo dir="rtl">文本内容</bdo>
  17. <!--
  18. 超链接标签
  19. href:指定超链接所关联的另一个资源
  20. target:指定框架集中的哪个框架来装载另一个资源,该属性值有_self, _blank, _top, _parent四个值,分别代表使用自身、新窗口、顶层框架、父框架来装载新资源
  21. -->
  22. <a href="超链接地址" target="目标窗口">点击</a>
  23. <!-- 图像标签 -->
  24. <img src="图片地址" alt="提示文字"/>
  25. <!-- span标签:内部放文本或者行级标签 -->
  26. <span>文本等行级内容</span>
  27. <!-- 换行标签 -->
  28. <br/>
  29. <!-- 常用的特殊符号 -->
  30. &nbsp; <!-- 空格 -->
  31. &gt; <!-- 大于号(>) -->
  32. &lt; <!-- 小于号(<) -->
  33. &quot; <!-- 引号(") -->
  34. &copy; <!-- 版权符号(©) -->

框架
frameset框架集
创建框架页面的步骤:

  • 创建各个子窗口对应的html文件
  • 创建整个框架文件,分别引用子窗口文件

框架的使用

  1. <!--
  2. frameset:框架集标签,不能与body标签同时使用,除非与noframes标签联合使用时
  3. 将浏览器分割成多个框架页,来加载多个html页面
  4. frame:框架标签
  5. cols:pixels, %, * 定义框架集中列的数目和尺寸
  6. rows:pixels, %, * 定义框架集中行的数目和尺寸
  7. noresize:设置框架尺寸不可调整
  8. border:设置框架边框宽度
  9. -->
  10. <frameset rows="25%,*" border="1" noresize="noresize">
  11. <frame src="top.html">上边/frame>
  12. <frameset cols="25%,*">
  13. <!-- 如果希望点击左边框架的超链接,右边框架显示超链接内容,可以将左边超链接a标签的target设置成右边框架的名称即可 -->
  14. <frame src="left.html" name="leftFrame">左边</frame>
  15. <frame src="right.html" name="rightFrame">右边</frame>
  16. </frameset>
  17. <!-- noframe标签为那些不支持框架的浏览器显示文本,noframes元素位于frameset内部 -->
  18. <noframes>
  19. <body>
  20. 您的浏览器无法处理框架!
  21. </body>
  22. </noframes>
  23. </frameset>

iframe内嵌框架

  1. <!--
  2. iframe:内嵌框架,在body标签内部
  3. frameborder:0, 1 规定是否显示框架周围的边框
  4. name:规定iframe的名称
  5. scrolling:yes(显示), no(不显示), auto(内容超过框架则显示,否则不显示) 规定是否在iframe中显示滚动条
  6. scr:规定在iframe中显示的文档的url
  7. width:框架宽度
  8. height:框架高度
  9. -->
  10. <body>
  11. <!-- <iframe src="引用页面地址" name="框架标识名" frameborder="边框" scrolling="是否显示滚动条"> -->
  12. <!-- 和frameset类似,如果希望点击iframe外的超链接,iframe中显示相应的网页,可以将超链接a标签的target设置成iframe的名称即可 -->
  13. <iframe src="http://www.baidu.com" name="contentFrame" width="100%" height="400px"></iframe>
  14. <p><a href="http://www.sina.com.cn/" target="contentFrame">新浪</a></p>
  15. <p><a href="http://www.baidu.com/" target="contentFrame">百度</a></p>
  16. </iframe>
  17. </body>

表格

使用场景

  • 主要用于规则的数据显示;
  • 适当的可以在表单页面中使用;

使用表格标签进行页面布局的缺点

  • 代码量比较大,页面浏览速度比较慢;
  • 层次结构比较复杂,不易于维护和改版;
  • 不利于搜索引擎搜索查找数据;
  1. <!--
  2. 定义表格的开始和结束
  3. cellpadding:单元格边框和内容之前的距离
  4. cellspacing:单元格和单元格之间的距离
  5. -->
  6. <table border="1" cellspacing="0">
  7. <!-- 定义表格的标题 -->
  8. <caption>我喜欢的NBA球队</caption>
  9. <!-- 定义表格头 -->
  10. <thead>
  11. <!-- 定义表格行,该元素内只能包含th标签和td标签 -->
  12. <tr>
  13. <!-- 定义表格页眉的单元格 -->
  14. <th>球队名称</th>
  15. <th>老板</th>
  16. <th>当家球星</th>
  17. </tr>
  18. </thead>
  19. <!-- 定义表格的主体 -->
  20. <tbody>
  21. <tr>
  22. <!--
  23. 定义单元格,包含两个主要的属性
  24. colspan:单元格跨多少列
  25. rowspan:单元格跨多少行
  26. -->
  27. <td>骑士</td>
  28. <td>丹尼尔·吉尔伯特</td>
  29. <td>勒布朗·詹姆斯</td>
  30. </tr>
  31. <tr>
  32. <td>勇士</td>
  33. <td>乔·拉科布</td>
  34. <td>斯蒂芬·库里</td>
  35. </tr>
  36. <tr>
  37. <td>马刺</td>
  38. <td>皮特·霍尔特</td>
  39. <td>科怀·伦纳德</td>
  40. </tr>
  41. </tbody>
  42. <!-- 定义表格尾部 -->
  43. <tfoot>
  44. <tr>
  45. <td colspan="3">总计3支球队</td>
  46. </tr>
  47. </tfoot>
  48. </table>

表单
基本语法

  1. <!--
  2. action:指定表单提交后由服务器上的哪个处理程序进行处理
  3. enctype:用于指定表单数据的编码方式
  4. method:指定向服务器提交的方式 get post
  5. -->
  6. <form action="表单提交地址" method="提交方法" target="打开方式">
  7. <!-- 文本框、按钮等表单元素 -->
  8. </form>

常见的表单元素使用

  1. <!--
  2. input元素中常用属性:
  3. checked:设置单选框、复选框初始状态是否处于选中状态,只有当type属性为checkbox或radio时才可指定
  4. disabled:设置首次加载时禁用此元素,当type为hidden时不能指定该属性
  5. maxlength:指定文本框中所允许输入的最大字符数
  6. readonly:指定该文本框内的值不允许修改(可用js脚本修改)
  7. size:指定该元素的长度
  8. src:指定图像域所显示的图像url,只有当type的值为image时才可以指定该属性
  9. -->
  10. <!-- text,单行文本框 -->
  11. 单行文本框:<input type="text" maxlength="10" size="4" /><br/>
  12. <!-- password,密码输入框 -->
  13. 密码输入框:<input type="password" disabled="disabled"/><br/>
  14. <!-- hidden,隐藏域 -->
  15. 隐藏域<input type="hidden"/><br/>
  16. <!-- radio,单选框 -->
  17. 单选框:男<input type="radio" name="sex" value="0" />
  18. <input type="radio" name="sex" value="1" checked="checked" /><br/>
  19. <!-- checkbox,复选框 -->
  20. 复选框:篮球<input type="checkbox" name="hobby" value="0" />
  21. 足球<input type="checkbox" name="hobby" value="1" />
  22. 排球<input type="checkbox" name="hobby" value="2"><br/>
  23. <!-- image,图像域,可以指定width和height属性,有submit按钮的功能,会提交表单数据 -->
  24. 图像域:<input type="image"/><br/>
  25. <!-- file,文件上传域 -->
  26. 文件上传:<input type="file"/><br/>
  27. <!-- submit、reset、button,提交、重置、普通按钮 -->
  28. 提交按钮:<input type="submit" value="提交按钮"/><br/>
  29. 重置按钮:<input type="reset" value="重置按钮"/><br/>
  30. 普通按钮:<input type="button" value="普通按钮"/><br/>

使用button定义按钮

  1. <!--
  2. button按钮与input按钮相比,提供了更强大的功能和更丰富的内容
  3. disabled:指定是否禁用此元素,该属性的值只能是disabled或者省略
  4. name:指定按钮的唯一名称
  5. type:指定按钮属于哪种按钮,只能是button、reset、submit
  6. -->
  7. <button type="按钮类型" name="按钮名称">
  8. 普通文本、格式化文本、图像
  9. </button>
  10. 提交按钮:<button type="submit"><b>提交按钮</b></button><br/>
  11. 重置按钮:<button type="reset"><i>重置按钮</i></button><br/>
  12. 普通按钮:<button type="button">普通按钮</button>

使用label定义标签

  1. <!--
  2. label元素不会向用户呈现任何特殊效果,不过它为鼠标用户改进了可用性。如果在label元素内点击文本,就会触发,浏览器会自动将焦点转到和标签相关的表单控件上。
  3. for:规定label绑定到哪个表单元素,值为表单元素的id
  4. form:规定label字段所属的一个或多个表单
  5. -->
  6. <!-- <label>文本</label> -->
  7. <label for="text">单行文本框:</label><input type="text" id="text"/>

列表菜单和下拉菜单

  1. <!--
  2. select标签常用属性:
  3. disabled:指定是否禁用此元素,该属性的值只能是disabled或者省略
  4. mutiple:设置该列表框是否允许多选
  5. size:指定该列表内同时显示多少个列表项
  6. -->
  7. <!--
  8. 基本语法:
  9. <select name="指定列表名称" size="行数">
  10. <option value="选项值" selected="selected">...</option>
  11. </select>
  12. -->
  13. <!-- 列表菜单:多选项展示,可多选 -->
  14. <select size="3" multiple="multiple" id="country">
  15. <option value="0">中国</option>
  16. <option value="1">美国</option>
  17. <option value="2">日本</option>
  18. <option value="3">韩国</option>
  19. </select><br/>
  20. <!-- 下拉菜单 -->
  21. <select id="city">
  22. <option value="0">北京</option>
  23. <option value="1">上海</option>
  24. <option value="2">武汉</option>
  25. <option value="3">广州</option>
  26. </select><br/>
  27. <!--
  28. 在<select>标签内,只能包含如下两种子元素:
  29. <option>:用于定义列表框选项或菜单项,它的常用属性如下:
  30. disabled:指定禁用该选择,该属性的值只能是disabled或省略
  31. selected:指定该列表初始状态是否处于选中状态,值只能为selected
  32. value:指定该选项对应的请求参数值
  33. <optgroup>:用于定义列表项或菜单项组,它的常用属性如下:
  34. label:指定该选项组的标签,必需
  35. disabled:禁用该选项组里的所有选项,该属性值只能为disabled或省略
  36. -->
  37. <select>
  38. <optgroup label="一线城市">
  39. <option>北京</option>
  40. <option>上海</option>
  41. <option>广州</option>
  42. </optgroup>
  43. <optgroup label="二线城市">
  44. <option>杭州</option>
  45. <option>武汉</option>
  46. <option>南京</option>
  47. </optgroup>
  48. </select>

多行文本框

  1. <!--
  2. textarea:多行文本框,常用属性如下:
  3. cols:指定文本框的宽度,必填
  4. rows:指定文本框的高度,必填
  5. readonly:指定该文本框只读,该属性的值只能是readonly或省略
  6. -->
  7. <!--
  8. 基本语法:
  9. <textarea name="..." cols="列宽" rows="行宽">
  10. 文本内容
  11. </textarea>
  12. -->
  13. <textarea name="content" cols="50" rows="5" readonly="readonly">
  14. 1) 用户可通过各种已有和未来新增的渠道注册账号及加入付费使用。
  15. 2) 在用户使用具体某种方式加入付费会员时,须阅读并确认相关的用户协议和使用方法。
  16. </textarea>

html多媒体

web上的多媒体指的是音效、音乐、视频和动画,现代网络浏览器已经支持很多多媒体格式。常见的视频格式有avi, wmv, mpg/mpeg, mov, rm/ram, mp4等,常用的音频格式有mid/midi, rm/ram, wav, wma, mp3/mpga等。

html5之前,主要提供两种元素来进行多媒体的展示,一个是<embed>标签,另一个是<object>标签。

  1. <!--
  2. embed是html5中新标签,定义嵌入的内容,比如插件,常用属性:
  3. height:设置嵌入内容的高度
  4. width:设置嵌入内容的宽度
  5. src:设置嵌入内容的url
  6. type:设置嵌入内容的类型
  7. 在html5中提供了audio(音频)和video(视频)标签来进行音频和视频的播放,使用比较简单,功能更强大。
  8. -->
  9. <!-- embed播放音频 -->
  10. <!-- <embed src="/Users/wangzhao/Music/网易云音乐/电台节目/这个少女不太冷丶 - 牵丝戏.mp3" width="0" height="0" autostart="false" loop="true"></embed> -->
  11. <!-- embed播放flash视频 -->
  12. <embed src="xxx.swf" width="200" height="200" loop="true" quality="high" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFrash"></embed>
  13. <!-- object标签 -->
  14. <!--
  15. 可以使用<object>标签来给浏览器加载插件,通过加载的插件来播放音频和视频
  16. 微软开发,对IE兼容性很好,对其他浏览器兼容一般
  17. -->
  18. <object data="/Users/wangzhao/Music/网易云音乐/电台节目/这个少女不太冷丶 - 牵丝戏.mp3">
  19. <param name="src" value="/Users/wangzhao/Music/网易云音乐/电台节目/这个少女不太冷丶 - 牵丝戏.mp3">
  20. <param name="autoplay" value="false">
  21. </object>

前端学习记录(HTML篇)的更多相关文章

  1. 前端学习 linux —— 第一篇

    前端学习 linux - 第一篇 本文主要介绍"linux 发行版本"."cpu 架构"."Linux 目录结构"."vi 和 v ...

  2. 前端学习记录之Javascript-DOM

    简介 为了快捷方便,在工作和项目中,一直都是使用的框架,比如jqeruy,vuejs,react等.然后在长时间使用框架后,往往有一个后遗症,就是对于原生的Javascript基本上已经不知道怎么写了 ...

  3. Elasticsearch学习记录(入门篇)

    Elasticsearch学习记录(入门篇) 1. Elasticsearch的请求与结果 请求结构 curl -X<VERB> '<PROTOCOL>://<HOST& ...

  4. 前端学习记录 week 1

    前端学习记录 week 1 基础知识 CSS盒模型 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用.CSS盒模型本质上是一个盒子,封 ...

  5. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  6. 我的MySQL学习记录 完结篇DAY05~

    课程已全部学完,Redis\mongoDB 的学习也会提上日程啦~剩下的最大的最大的问题在于练习,大量的练习,后期会发我的学习记录. 小记:也不知道是不是加强针的缘故,老是拉肚子,记录彻底感冒的一天, ...

  7. 网页前端之JavaScript学习记录总结篇

    咔咔咔咔咔咔扩扩扩扩扩扩扩扩扩扩

  8. 网页前端之CSS学习记录总结篇

    标签: 块级标签block:div, p, h1-h6, ul, ol,li, dl, dt, dd,table,tr等,独占一行,可以设置宽高,默认是父标签的100%:行内标签inline:a,sp ...

  9. PHP学习记录第一篇:Ubuntu14.04下LAMP环境的搭建

    最近一段时间会学习一下PHP全栈开发,将会写一系列的文章来总结学习的过程,以自勉. 第一篇记录一下LAMP环境的安装 0. 安装Apache Web服务器 安装之前先更新一下系统 sudo apt-g ...

随机推荐

  1. angular 发送ajax

    在使用angular发送ajax的时候get和post一样的,就是method改一下. ajax的js: <script> var app = angular.module('emialV ...

  2. win10+VS2015+opencv3.4.0配置方法

    win10+VS2015+opencv3.4.0配置方法 操作环境: windows10 64位opencv 3.4.0:https://opencv.org/releases.html(选择open ...

  3. bash中前后移动一个单词和删除单词的快捷键

    bash中一个很重要的快捷键,就是向后删除一个单词: ctrl+w=ctrl+W 一个字符一个字符的移动是: ctrl+f, ctrl+b 但是, 一个单词一个单词的移动是: (但是, 这个用得比较少 ...

  4. Vue知识整理1:$watch方法的使用

    如下图所示:vue中,可以使用$watch方法显示变量的前面值和当前值,方便进行判断.使用方法: vm.$watch('a',function(newval,oldval){ ...... })

  5. 搭建spring项目,无法创建RequestMappingHandlerMapping异常

    异常详情: Error creating bean with name 'org.springframework.web.servlet.mvc.method.annotation.RequestMa ...

  6. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第5节 String类_7_字符串的转换相关方法

    sequence n.顺序:次序:一系列:一连串 v.按顺序排列:测定(整套基因或分子成分的)序列 网络连续:数列:时序 butes.fori出循环 replace Ctrl+字母N也可以打开 输入s ...

  7. AWK之随心所欲-基础篇

    一.简介 awk 是一个处理文本的编程语言工具,能用简短的程序处理标准输入或文件.数据排序.计算以及 生成报表等等. 在 Linux 系统下默认 awk 是 gawk,它是 awk 的 GNU 版本. ...

  8. G2 基本使用 折线图 柱状图 饼图 基本配置

    G2的基本使用 1.浏览器引入  <!-- 引入在线资源 --> <script src="https://gw.alipayobjects.com/os/lib/antv ...

  9. 【opencv】opencv图像识别的一些基础的基础函数的使用方法

    import cv2 import numpy as np from matplotlib import pyplot as plt pic_path = "deal_with.png&qu ...

  10. C++边双缩点,Redundant Paths 分离的路径

    一道比较简单的 关于边双的题,个人感觉难度不大. 求出整个图的边双,根据边双的定义我们可以延伸出 边双的任两个点都有至少两种路径来互相抵达(因为其不存在割边) .不妨将每个边双缩成一个点,样例中的图便 ...