前端学习之HTML

  网站是由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 文本域元素
 
  当用户输入较多的文字时,就可以使用此标签
 
  该项目用到的表格,表单,无序列表实现了一个组成网页。
 
  使用表格来元素对齐。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61661.shtml

张贴在2