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

HTML 框架基础

问题

要学好前端,首先我们要先了解框架,也就是网页框架html。

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

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

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

XML Extensible Markup Language 可扩展标记语言

可扩展标记语言虽然只是存储数据,但极其简单,易于在任何应用程序中读/写数据,应用软件都支持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="//www.bilibili.com/">bilibili.com</a>

5、ul,ol,dl,标签

【ul】

意思是无序列表

【ol】

意思是有序列表


【li】

嵌套在ul或ol标签中

【dl】

定义一个没有前缀的列表

【dt】

题目/物品/标志

【dd】

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


6、img 标签

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

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

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

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

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


7、input 标签

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


网页中的 input:

实例

placehoder属性

作用:设置提示信息

代码部分

呈现效果:


8、select标签

分为以下四种

第一种:

运行结果:

第二种:加入size属性

运行结果:

第三种:加入multiple属性

运行结果:

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

运行结果:


9、textarea标签

cols定义文本框的长度

运行结果:

rows定义文本框的宽度

运行结果:


10、div标签

div标签的使用

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

div标签实例

运行结果:


11、文本格式标签

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

实体

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

URL

URL是什么?

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

常见的URL scheme

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

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

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

如果有帮助到您可以收藏订阅哦~!