通过html直接显示txt内容_前端入门—HTML篇(秃头之路正式开启)

1.网页的构架

• 网页是只因特网，根据一定的规则，使用HTML制作的用于展示特定内容的相关页面集合

• 网页构成网站的基本元素，图片 链接 文字 音频 视频等元素

• HTML成为超文本标记语言，超越文本的限制，注：HTML不是变成语言

2.WEB标准

• Web标准是由W3C(万维网联盟)制定的一系列标准的集合

• 浏览器的不同，他们显示排版或者页面页有一定的差异，可以通过web标准来展示统一的内容

  • 1.让 Web 的发展前景更广阔。

  • 2.内容能被更广泛的设备访问。

  • 3.更容易被搜寻引擎搜索。

  • 4.降低网站流量费用。

  • 5.使网站更易于维护。

  • 6.提高页面浏览速度

• web标准的构成主要分为三个方面

  • 结构    HTML

  • 行为    JavaScript

  • 表现    CSS

3.HTML骨架(基本结构)标签

• • HTML标签    页面中最大的标签 称之为根标签

• • head标签文档的头部   在head标签中，必须包含tilte 标签

• • title文档的标题    设置页面的网页标题

• • body文档的主体

4.HTML结构刨析

5.常见得浏览器和浏览器内核

• IE         

  • Trident

• 火狐    firefox

  • Gecko

• 谷歌    chrome

  Blink

• Safari   

  • Webkit

• Opera  

  • Blink

6.标签语义化

• h1~h6

  • 每个页面只能出现一个h1标签，h1~h6标签是从大到小，数字越大标题越小

  • 独占一行   有默认的宽高

• p

  • 一行显示多个，不可以嵌套同级标签，

• div

  • 块级元素，独占一行，无语义，

• sup

  • 上角标   

• sub

  • 下角标

• em  i

  • 字体倾斜标签，常用em 语义化更突出

• strong  b

  • 加粗标签，常用strong语义化更突出

• 有序列表

  • ul   li

  • ul  里面只能放li  

  • li 里面可以放任何元素

• 无序列表

  • ol  li

  • ol 里面只能放li

  • li 里面可以放任何元素

• 自定义列表

  • dl`` dd`` ``dt

  • dl里面可以放dd和dt

  • dd和dt 属于兄弟关系

  • dd和dt里面可以放任何元素

• 表格标签

  • table 表格

  • th   表格头部

  • tr  表格行

  • td 单元格

• 表格属性

  • 此代码存在兼容问题 建议使用CSS代码 border-collspse:collapse;来设置

  • cellspacing  设置单元格之间的距离

  • cellpdding    设置单元格和内容的距离

  • colspan        跨行合并   从左至右 合并代码写在第一个单元格上

  • rowspan       跨列合并  从上至下  合并代码写在第一个单元格上

• 图片标签

  • img 引用或者插入图片到网页当中

• 图片属性

  • src  是img必须的属性，不可缺少

  • alt提示文本在网页无法加载或者加载出错的时候显示提示信息,只能在img中使用

  • title 提示文本，当鼠标经过时提示信息，可以在任何元素中使用

7.路径的使用

• 绝对路径

  • 相对于计算机的盘符，或者指定的网址链接的路径，如HTTP 、/https://

  • 可以移植性为0不建议使用

• 相对路径

  • 上一级路径  ../

  • 下一级路径/

  • 同级路径./  同级路径可以直接书写文件名

8.标签元素分类

• 块级元素

  • 独占一行

  • 没有设置宽高的情况下默认宽度为父盒子的宽度

  • 可以单独设置宽高

  • 代表性元素：h1-h6,p,div,ul,li,ol,li

  • 特点:

• 行内元素

  • 一行多个，一行可以放置多个行内块元素

  • 宽度为内容的宽度，内容越长宽度越宽，(宽度由内容撑开)

  • 不可以直接设置宽高(可以转换属性后设置)。

  • 代表元素：span,格式化标签(具体查询W3C)

  • 特点：

• 行内块元素

  • 一行可以放置多个。

  • 可以直接设置宽高。

  • 代表元素：img,input

  • 特点：

    总结：

    1.块元素一行只能放一个，可以直接设置宽高。

    2.行内元素一行放置多个，不可以直接设置宽高。

    3.行内块元素，综合上述两者的特性，一行多个，可以设置宽高。

9.超链接标签

• 超链接必须有内容才能点击

• 属性值：

  • href：超链接必须的属性，用来链接文件或者网站

  • txt：  链接后缀为txt的文件，点击查看。

  • pdf： 链接后缀为pdf的文件，点击查看。

  • zip：  链接后缀为zip的文本，点击下载。

• target属性

  • _self：是默认值，表示在当面页面打开新的页面。

  • _blank ：表示在新的窗口页打开。

• 超链接属性的四种状态

  • 默认的书写顺序， link-visited-hover-active.

  • link：      表示未被访问过的状态，默认是蓝色。

  • visited：表示被访问过后的状态，默认紫色。

  • active：  被激活时候的状态，默认红色。(移上鼠标未点击)

  • hover：   可用于所有标签，表示鼠标浮上的状态。

10.表单元素

• input 表单元素

• 属性：

  • text：单行文本框

  • password：密码框

  • radio：单选框(实现单选需要给相同的单选框加上name属性)

  • checkbox：多选框

  • file：文件域属性，上传文件

  • hidden：隐藏域

  • image：图片域 (引入图片作为提交按钮)

  • submit：提交按钮(在表单中提交数据给后台)

  • button：普通按钮

  • reset：重置按钮

  • type：定义input框的类型

• name：表示给input起一个名字，或者在单选复选的时候起到关联作用。

• value:给表单元素一个默认值，几乎所有的表单元素都可以给。

• form标签，定义表单元素，在需要提交数据的时候input元素必须包括在form表单里面才能实现。

  • 属性值action=""需要提交的服务器地址。

  • method:提交数据的方式有两种get和post默认get。

  • get和post提交数据方式区别在于，一个提交数据拼接在地址后面，一个提交数据页面不可见，需要通过f12查看。

  • get请求数据不安全，post比较安全

  • get请求数据限制长度post不限制请求数据的长度。

• text area：文本域

  • cols：设置文本的列数

  • rows：设置文本的行数

• select下拉列表

  • option 定义下拉列表项。

• placeholder:input框里面的提示信息，不占位置，不会提交给后台。

• checked="checked"：设置单选框和复选框的默认选中状态。

• selected：下拉列表的默认选中状态，属于option的属性。

• size：表示下拉列表显示的选项个数，属于select的属性。

• label:点击文字聚焦在input框中，也可以使用label的for属性，id等于for设置的名字，起到聚焦的效果。

    基础的HTML结构和标签就简单介绍这些，学习的过程是痛苦的，但是坚持下去你才能收获更大的果实，完成你更宏大的梦想

结尾小留言：

          本人是一个小小的博主，分享一些技术·生活·专业知识等文章，希望各位看官老爷们，多多支持，如有指导，感激不尽。