欢迎光临
我的个人博客网站

《转生成为前端程序员01-基础篇》


HTML 框架基础

问题

《转生成为前端程序员01-基础篇》要学好前端,首先我们要先了解框架,也就是网页框架html。

那么HTML是什么?XML是什么?

SGML Standard Generalized Markup Language 标准通用标记语言是HTML的前身

HTML 超级文本标记语言 Hyper Text Markup Language 通过标记式的指令(Tag),将影像、声音、图片、文字动画、影视等内容显示出来。HTML一直被用作3W的信息表示语言,使用HTML语言描述的文件需要通过3W浏览器显示出效果。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题,从一个页面跳转到另一个页面。缺点是交互性差,语义模糊,因此一个标准、简洁、结构严谨以及可高度扩展的XML就产生了。

《转生成为前端程序员01-基础篇》XML Extensible Markup Language 可扩展标记语言《转生成为前端程序员01-基础篇》

可扩展标记语言虽然只是存储数据,但极其简单,易于在任何应用程序中读/写数据,应用软件都支持XML。

  1. XML可以从HTML中分离数据。 即能够在HTML文件之外将数据存储在XML文档中。
  2. XML可用于交换数据。 基于XML可以在不兼容的系统之间交换数据。
  3. XML可应用于B2B中。 如在网络中交换金融信息。
  4. XML可以共享数据。 XML数据以纯文本格式存储,使XML更易读、便于记录调试,不同系统、程序的数据共享简化。
  5. XML可以充分利用数据。 就像操作数据库一样,XML的数据可以被各种各样的“阅读器”处理。
  6. XML可以用于创建新的语言。 如,WAP和WML语言都是由XML发展来的。

1、HTML 基本结构

HTML基本内容

<!DOCTYPE html>        <html lang="en"> <head>     <meta charset="UTF-8">     <title>input</title> </head> <body>     <h1>这是HTML标题</h1>     <p>这是HTML段落</p>     <a>这是HTML链接</a>     <img src="#">img元素不需要结束标记 </body> </html> 

HTML属性

<a href="#">这是一个a链接,地址在href属性中</a> 

常用属性

属性 描述
class html元素类名
id 元素的id
style html样式(inline style)
title 题目

2、h 标签

HTML 标题是通过 “h1” – “h6″ 与”/h1”-“/h6″等标签进行定义的。h标签是一个行类元素

例如

<h1>我是谁</h1>  <h2>我是谁</h2> 

3、p 标签

HTML 段落是通过

标签进行定义的。p标签是一个行类元素。

例如:

  <p>这是第一段</p>    <p>这是第二段</p> 

4、a 标签


HTML 链接是通过 标签进行定义的。通过a链接实现跳转页面的功能。

 <a href="https://www.bilibili.com/">bilibili.com</a> 

5、ul,ol,dl,标签

【ul】

意思是无序列表

《转生成为前端程序员01-基础篇》

《转生成为前端程序员01-基础篇》

【ol】

意思是有序列表

《转生成为前端程序员01-基础篇》
《转生成为前端程序员01-基础篇》

【li】

嵌套在ul或ol标签中

【dl】

定义一个没有前缀的列表

【dt】

题目/物品/标志

【dd】

对【题目/物品/标志】的解释


6、img 标签

HTML 通过 img 标签插入图片,并用 src 属性定位图片的地址

<img src="imgs/violet.jpg"> 

在同级目录下,可以直接使用 src 调用图片

非同级目录下,如果直接使用会出现图片不显示的情况:

《转生成为前端程序员01-基础篇》

解决办法: ../【跳到上级目录】


7、input 标签

intput称为表单标签,输入类型由type确定

《转生成为前端程序员01-基础篇》
《转生成为前端程序员01-基础篇》

网页中的 input:

实例
《转生成为前端程序员01-基础篇》

placehoder属性

作用:设置提示信息

代码部分

《转生成为前端程序员01-基础篇》

呈现效果:

《转生成为前端程序员01-基础篇》


8、select标签

分为以下四种

第一种:
《转生成为前端程序员01-基础篇》

运行结果:

《转生成为前端程序员01-基础篇》

第二种:加入size属性

《转生成为前端程序员01-基础篇》

运行结果:

《转生成为前端程序员01-基础篇》

第三种:加入multiple属性

《转生成为前端程序员01-基础篇》

运行结果:

《转生成为前端程序员01-基础篇》

第四种:加入opthgroup分组,加粗并且不可选中

《转生成为前端程序员01-基础篇》

运行结果:

《转生成为前端程序员01-基础篇》


9、textarea标签

cols定义文本框的长度

《转生成为前端程序员01-基础篇》

运行结果:
《转生成为前端程序员01-基础篇》

rows定义文本框的宽度

《转生成为前端程序员01-基础篇》

运行结果:

《转生成为前端程序员01-基础篇》


10、div标签

div标签的使用

  1. div代表网页中的区块,划分区域进行管理。
  2. 地图下的省份,省份下的市,市里的区,区里的街道都是划分管理的。
  3. div标签内部可以使用其他类型标签
  4. div标签内部可以嵌套多层div标签

div标签实例

《转生成为前端程序员01-基础篇》

运行结果:

《转生成为前端程序员01-基础篇》

《转生成为前端程序员01-基础篇》


11、文本格式标签

名称 功能
hr 水平线
b/strong 加粗
i/em 斜体
small 小字体
sub 下标字
sup 上标字
ins 插入字
del 删除字
pre 预文本格式

实体

&lt; 小于号 &gt;大于号 &#169;@ 

URL

URL是什么?

URl是一个网页的地址,可以用字母或(IP互联网协议)数字组成

《转生成为前端程序员01-基础篇》

常见的URL scheme

http–超文本传输协议(不加密)

https–安全超文本传输协议(安全网页,加密所有的信息交换)

ftp–文件传输协议(用于上传/下载到网站)

如果有帮助到您《转生成为前端程序员01-基础篇》可以收藏订阅哦~!

赞(0) 打赏
未经允许不得转载:张拓的天空 » 《转生成为前端程序员01-基础篇》
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏