本周新手入门html,按照菜鸟教程学习,这过程中学到了很多,今天整理了一下,这是本人第一篇博客,请多批评
什么是html?
翻译成中文就是超文本标记语言
Hyper Text Marked Language
• 超文本:就是超出文本的范畴,还包括动画、图形、声音、表格等形式
• 标记语言:就是标识语言,指的是它包含一系列的标签(在html里面最为常用的一个词汇,下文解释)通过这些标签可以将网络上的文档格式统一成浏览器可以识别的信息,并且被浏览器翻译成为现在所见到的网页,简单来说就是见人说人话,见鬼说鬼话,见浏览器说浏览器话。
• html文档也叫做web页面
现在我们大致对html有了一个笼统的理解,接下来一起深入的了解这个语言。
初识html需要认识的关键词
1. 标签
a. 由尖括号包围的关键词,比如<html>
b. 大多数的标签是成对出现的,成对出现的标签后者需要加 / ,比如<html></html>
c. 少部分标签是单个出现的,比如<br>
d. 标记语言就是一套标记标签,按照我的理解,网页就像是一个白板,组建网页就是在这个白板上用一个个的标签(标记语言)固定上内容
e. 成对的标签比如<html>叫做开始标签(开放标签)</html>叫做结束标签<闭合标签>
f. 使用方法 <html>内容</html>
2. 元素
a. html文档由元素组成
b. 元素由标签组成,即由开始标签起始,由结束标签终止
c. 元素的内容是开始标签鱼结束标签之间的内容
d. 允许元素有空内容(空元素)
e. 大多数html元素可拥有属性
3. 属性
a. 属性是html元素提供的附加信息(为元素加配件,加修饰)
b. html元素可以设置属性
c. 属性一般描述在开始标签
d. 举例<a herf="http://www.baidu.com" >我是一个莫得感情的链接</a> 中间的herf就是属性
e. 属性值:在上文的herf后面跟了等号,等号后面的就是它的属性值,不同的属性有这属于属性本身的特性值,等待你自己探索
f. 请使用小写字母表示属性
4. 参考手册
a. html的标签有很多,属性也有很多,具体功能网上有很多的参考手册,以供使用时查阅,在网站可以巧妙运用ctrl+F来查找想要寻找的功能信息
b. 推荐的两个参考手册网站
1.菜鸟教程https://www.runoob.com/tags/html-reference.html
2.W3schoolhttps://www.w3school.com.cn/tags/index.asp
5. URL
a. URL就是统一资源定位符,就是我们常说的网页地址
b. 结构
scheme://host.domain:port/path/filename
• scheme - 定义因特网服务的类型。最常见的类型是 http
• host - 定义域主机(http 的默认主机是 www)
• domain - 定义因特网域名,比如 runoob.com
• :port - 定义主机上的端口号(http 的默认端口号是 80)
• path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
• filename - 定义文档/资源的名称
c. URL需要使用ASCII码,如过需要用到ASCII外的代码,需要用相关的字符进行替代
d. URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
e. URL 不能包含空格。URL 编码通常使用 + 来替换空格。
html标签、属性功能概览
a. 因为功能众多,在此不详细介绍,请自行查阅相关手册
• 基本标签
○ <!--这是注释-->
○ 文字标签<h1></h2> <p></p> <br> .etc
• 文本格式化
○ 粗体、代码、斜体、缩写、文字方向
• 链接
○ 网站链接、图片链接、邮件链接
○ 在本页面跳转到指定位置
○ 其他网页小窗口显示
• 图片
○ 图片引用的大小位置
• 列表
○ 有序
○ 无序
• 表格
○ 设计整体页面的时候,可以用表格操作,也可以用区块操作
• 样式/区块
○ 与css相结合达到对页面整体的美化等工作
• 表单
○ 选择操作等功能
建立html文档
• 找个位置新建.txt文档然后后缀名改成.html
编辑html文档
• 需要相关的开发工具,Vscode,sublime等软件,百度一抓一大把,推荐使用sublime,至于记事本,只有高手和傻子才会用记事本。
• 具体实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <title>666666</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
○ 开头<!DOCTYPE html> 的这个是说明了文档的类型
可以观察到整体由<html>标签括起来
○ 注意观察并且必须记住前后标签的成对出现!!!
○ <html>标签里面分为两个部分一个是<head>,一个是<body>
○ 我们在html文档里面编辑元素,添加内容,搭建网页主要是在<body>里进行操作
○ <head>标签里面的代码是用来编辑一些全局的东西,个人理解类似于c语言的#define
○ <meta charset="utf-8">声明编码方式,采用UTF-8的编码才不会让网站显示出乱码
○ <title>6666</title> 显示的是网页的标题
§
○ 这里的标签是具体的显示功能,详见参考手册
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
打开html文档
• 用浏览器打开!!!
如何在网上访问已经编辑好的html文档
• 上传文件到web服务器,通过访问web服务器进行访问
• 使用http-server,可以在局域网内部进行访问
网页浏览整体概况(便于理解网页的知识)
浏览网站的过程就是个人的电脑和web服务器通过互联网进行交互的过程,这个过程中有三个主要元素:
• 个人电脑
a. 准确的说是个人电脑上的浏览器(如360浏览器、谷歌浏览器等)这些浏览器我们称之为web浏览器,更透彻的说是web客户端(与服务器相对应)
• 网络
a. 网络就是web客户端与web服务器的交互介质
b. 网络包括内网与外网(外网可以理解为我们日常的互联网,即万维网),交换机搭建内网,路由器是内网与外网连通的大门
• web服务器
a. 服务器也是计算机,换个角度说,当计算机具备了某种服务其他计算机的功能的时候,这个计算机就变成了“功能名字+服务器”,比如,计算机具备了为其他计算机服务web的功能,它就变成了web服务器
b. 个人的电脑也可以变成服务器,只不过性能相对low
c. 计算机变成web服务器的方法——安装相关软件,并且进行一系列配置
d. 相关软件
微软:IIS(可以发布web网站和FTP站点)
linux:Apache/LAMP/Tomcat/nginx .etc
第三方:phpstudy、XAMPP
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。