热门关键字:
jquery > jquery教程 > jquery教程 > 前端开发笔记(一)—HTML教程

前端开发笔记(一)—HTML教程

315
作者:管理员
发布时间:2021/8/20 18:23:57
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5295
  不必害怕未知,无需恐惧犯错,做一个Creator!


  HTML/Hyper Text Markup Language(超文本标记语言),前端开发的一种技术,在Web开发中用以控制网页结构。


  <标签符>内容</标签符>


  标签符一般由一个“开始符号”和一个“结束符号”组合构成。结束符号只是在开始符号前面多加上了一个斜杠“/”。


  (1)文档声明: HTML页面


  (2)html标签对: html /html


  (3)head标签对:head /head


  (4)body标签对:body /body


  一个完整的HTML页面,是由一个个的标签组成的。以标签为基石实现各个目标功能。


  head标签


  网页的“头部”,用以定义页面标题、定时刷新、外部文件等。


  body标签


  网页内容,大部分代码都是在这个标签对内部编写。


  title标签


  唯一的作用就是定义网页的标题。


  meta标签


  设置页面特殊信息:页面关键字、页面描述(提供浏览器识别)


  name属性:管理基本内容


  http-equiv属性:定义网页所使用的编码;定义网页自动刷新跳转


  注释方式


  代码实现如下:


  文本内容是网页的基础,网页的文本由以下标签实现:


  (1)标题标签


  (2)段落标签


  (3)换行标签


  (4)文本标签


  (5)水平线标签


  (6)特殊符号


  <h1——6>标签


  标题标签。HTML中,共有6个级别的标题标签:h1、h2、h3、h4、h5、h6。,其中h1标签的重要性最高,h6标签的重要性最低。一个页面一般只能有一个h1标签,而h2到h6标签可以有多个。


  p标签


  段落标签。用来显示一段文字。(自带换行)


  br标签


  换行标签。用来给文本换行。


  文字控制标签


  粗体标签:strong、b


  斜体标签:i、em、cite


  上标标签:sup


  下标标签:sub


  中划线标签:s


  下划线标签:u


  大字号标签:big


  小字号标签:smal


  hr标签


  水平线标签。用来实现一条水平线。


  div标签


  划分HTML结构,从而配合CSS来整体控制某一块的样式。


  &nbsp


  空格符号。1个汉字约等于3个?。


  代码实现如下:


  列表是网页中最常用的一种数据排列方式,列表共有3种:有序列表、无序列表和定义列表。


  表格在网页布局中用以更清晰地排列数据。在HTML中,一个表格一般会由表格、行、单元格3个部分组成。


  ol标签与li标签


  组合使用,用来实现有序列表功能。


  ol,即ordered list(有序列表);li,即list(列表项)。语法:


  type属性:用来改变列表项符号。


  ul标签与li标签


  组合使用,用来实现无序列表功能。


  ul,即unordered list(无序列表);li,即list(列表项)。语法:


  type属性同ol标签与li标签。


  注:ul的子元素只能是li,不能是其他元素。


  table标签、tr标签、td标签、th标签、caption标签


  组合使用,用来实现表格功能。


  table和表示整个表格的开始和结束


  tr,指的是table row(表格行)


  td,指的是table data cell(表格单元格)


  caption,表格的标题


  th,指的是table header cell(表头单元格)


  td,指的是table data cell(表行单元格)。语法:


  rowspan标签与colspan标签


  使用rowspan属性来合并行,即纵向的N个单元格”合并。


  使用colspan属性来合并列。即横向的N个单元格”合并。


  显示如下表格与列表内容


  代码实现如下:


  网页常常使用图片来让用户获得更好地体验。


  网页与网页之间可以通过超链接来相互关联,能够方便用户在各个独立。


  img标签


  使用img标签来显示一张图片,img标签主要的属性:src、alt


  src属性用于指定这个图片所在的路径,这个路径可以是相对路径,也可以是绝对路径。


  alt属性为图片不显示时的提示文字。


  a标签


  使用a标签来实现超链接。


  target属性


  用target属性来定义超链接打开窗口的方式


  代码实现如下:


  表单在网页中主要负责数据采集功能。表单通过在浏览器端收集用户的信息,然后将数据提交给服务器来处理。主要包含:单行文本框、密码文本框、单选框、复选框、按钮、文件上传、多好文本框、下拉列表。


  form标签


  定义表单区间,对表单基本属性进行设置。


  name属性:给表单进行命名


  method属性:指定数据http提交方法


  acton属性:指定数据提交地址


  target属性:指定窗口打开方式


  input标签


  插入表单内容,并进行相应设置。


  单行文本框


  type属性取值为“text”,并通过下图设置属性。


  密码文本框


  一种特殊的单行文本框,输入的字符不可见。属性设置同单行文本框。


  单选框


  type属性取值为“radio”。


  name属性表示单选按钮所在的组名,而value表示单选按钮的取值,这两个属性必须要设置。对于同一组的单选框,必须要设置一个相同的name。


  复选框


  type属性取值为“checkbox”。


  属性设置同单选框一样。


  按钮


  常见的按钮有3种:普通按钮(button);提交按钮(submit);重置按钮(reset)。


  普通按钮一般情况下都是配合JavaScript来进行各种操作的。


  提交按钮一般都是用来给服务器提交数据的,一种特殊功能的普通按钮。


  重置按钮一般用来清除用户在表单中输入的内容。当我们在文本框中输入内容,然后按下重置按钮,会发现表单内容被清空了。


  文件上传


  文件上传也是使用input标签来实现的,其中type属性取值为file。


  多行文本框


  多行文本框却可以输入多行文本,使用的是textarea标签。


  下拉列表


  下拉列表由select和option这两个标签配合使用来表示的。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐