热门关键字:
jquery > jquery教程 > jquery教程 > 前端学习之HTML

前端学习之HTML

321
作者:管理员
发布时间:2021/4/8 18:38:42
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4381
  网站是由html等制作的用于展示特定内容的网页的集合。


  网页时网站中的一页。


  html是超文本标记语言(Hyper Text markup language)。


  所谓超文本就是超越了文本的限制(不知有文字,还有图片等)和超链接文本。


  #常用的浏览器及其内核


  IE、火狐(Firefox)、Chrome、Safari、Opera等。


  内核的作用为负责读取网页的内容,显示网页。


  浏览器IEEdgeFirefoxChromeSafariOpera内核TridentBlinkGeckoBlinkwebkitBlink


  Blink其实是webkit的分支。


  Web标准是W3C(万维网联盟)组织和其他标准组织制定的一套标准的集合。


  结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。


  标准说明结构对网页元素进行整理和分类,主要是HTML。表现设置网页的版式、颜色、文字大小等外观样式,主要指的是CSS行为网页模型的定义及其交互的编写,主要指的是JavaScript


  <!DOCTYPE>,用于告诉浏览器使用哪种HTML版本来显示网页。必须写在最前面。


  lang ,用来定义当前页面的显示的语言。en,zh-CN


  在html中给出了6个标签。写在身体里面


  <h1>一级标题</h1>


  作为标题使用,并且根据重要性递减。


  独占一行。


  将文字分为不同的段落。


  1.文字会根据窗口的大小进行换行。


  2.段落和段落或者飞段之间有空隙,。


  强制换行


  他是一个段标签。


  突出文字的重要性


  在这里推荐使用strong,效果更加的明显。


  这里推荐使用em.


  推荐使用del


  这里推荐使用


  在html中有两个盒子标签。


  他们是没有语义的,它们就是一个盒子,用来装内容的。


  div是division的缩写,表示分区,一部分。span表示跨度、跨距。


  1.div单独占一行(大盒子)


  2.span不会单独占一行(小盒子)


  属性属性值说明src图片路径必须属性alt文本替换文本。当图片失效时,显示改文字title文本提示文本。鼠标放在图像上显示的文字Width</td>像素设置图像的宽度Height</td>像素设置图像的高度border像素设置图像边框粗细


  1.属性必须写在标签名的后面


  2.属性的顺序没有关系


  3.属性用空格分开


  4.属性采用键值对的方式书写。key = “value”。


  属性作用href用于指定链接目标的url地址,他是必须属性target用于指定链接页面的打开方式,其中默认为_self,_blank在新窗口打开


  链接分为:外部链接和内部链接等


  其中外部链接的格式为: 如 href = “如果不加协议头会被误认为本地文件。


  内部链接:在网站内部进行连接。


  空链接:href = “#”


  下载链接


  其实很多网页元素都可以添加超链接,比如表格、音频等。


  在我们点击此链接后,可以快速跳转到当前页面的某个位置。


  使用id属性的方法实现此功能


  html中的注释:<!–注释–>


  vscode中的快捷键:ctrl + /


  查表即可。


  表格可以较好地展示数据。


  表格不是用来布局页面的,而是用来展示数据的。


  表格基本语法:


  其中<table></table>是表格标签


  <tr></tr> 表示表格中的行,必须嵌套在table中。


  <td></td>表示表格中的行中的单元格,必须嵌套在tr中。


  td == table data.


  表头单元格也是单元格,常用于表格的第一行,突出重要性,表头单元格中的文字会加粗显示。


  属性名属性值描述alignleft、right、center规定表格元素相对周围元素的对其方式border1或者""规定表格是否有边框cellpadding像素值规定单元边与其内容之间的空白,默认为像素cellspacing像素值规定单元格之间的空白,默认像素为2Width</td>像素或者百分比规定表格的宽度Height</td>同理同理


  因为表格过长,为了更好的区分,我们将表格分为表格头部和表格主体两个部分。thede 和 tbody。thead注意和th区分开。


  1.合并单元格方式


  (1) 跨行合并: rowspan = “合并单元格的个数”。


  (2) 跨列合并: colspan = “合并单元格的个数”。


  2.目标单元格


  跨行:在最上侧为目标单元格书写代码。


  跨列:在最左侧为目标单元格书写代码。


  3.合并单元格的步骤


  需要注意的时都在单元格上操作,而不能在<tr>上操作


  如果说表格是来展示数据的,那么列表就是用来布局的


  列表可大致分为三大类: 无序列表、有序列表和自定义列表


  无序列表在布局中经常被使用。


  注意:


  1.无序列表中只能放 li 标签。


  2.li 中可以放任何元素,相当于一个容器。


  3.虽然它自带属性,但是我们习惯使用CSS来做。


  自定义列表经常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。


  注意:


  1.dl 里面只能包含 dt 和dd


  2.dt 和 dd 的数量没有限制,一般一个 dt 对应多个 dd


  最后运用CSS和列表来进行布局。


  使用表单的目的是收集用户的数据。<form>


  在HTML中表单是由三部分组成的:表单域、表单控件(表单元素)和提示信息。


  表单域:包含表单元素的区域。实现用户信息的收集和传递。


  属性属性值作用actionurl地址用于指定接收处理表单数据的服务程序的url地址methodget/post用于设置表单数据的提交方式name名称用于指定表单的名称,以区分同一个页面的多个表单


  表单元素


  1.<input>输入表单元素


  更多属性请查阅开发文档


  input 是一个单标签


  <label>标签


  在表单中,使用label来绑定一个表单元素,当点击label标签内的文本时,浏览器会自动将焦点(光标)转到或者选择对应的表单元素上,用来增强用户的体验。


  3.select 下拉表单元素


  注意:


  (1):在select中至少包括一个选项


  (2):在option中添加 selected = “selected” ,设置默认选定项。


  4.textarea 文本域元素


  当用户输入较多的文字时,就可以使用此标签


  该项目用到的表格,表单,无序列表实现了一个组成网页。


  使用表格来元素对齐。




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



关键字:jquery
友荐云推荐