第三篇 -- HTML基础

买的课程学习

Web 前端标准

web前端技术指的不是某一项技术，而是一系列技术的集合，主要包括：

html -- 结构标准：负责网页结构的搭建

css -- 样式标准/表现标准：负责网页的美化工作

js -- 行为标准：负责网页的行为动作

行业词条

1、internet --> 互联网

2、www --> 万维网(资料空间)World Wide Web 万维网，简称WWW或3W

3、URL --> 统一资源定位器(网络地址)

4、HTTP --> 超文本传输协议

5、W3C --> 万维网联盟(它是一个组织不是某一个公司)

6、网站 --> 多个页面的集合(首页，内容页，列表页)

7、网页 --> 网页文件就是后缀名以.html或者.htm结尾的文件。文字，图片，超链接

8、浏览器 --> 观看网页最终效果的平台。

浏览器

五大浏览器厂商

谷歌

火狐

苹果

欧朋

需要安装的浏览器：

谷歌

火狐

谷歌和苹果的内核一样

一个简单的html页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>我的第一个网页</title>

</head>

<body>

    <h1>你好，世界！</h1>

</body>

</html>

1、<!DOCTYPE html> 描写当前文件版本信息，如果没有详细说明4.0还是x1.0，那么默认是html5版本

2、<html>html文件

3、<head>网页的头部

4、<meta charset="UTF-8"> utf-8是国际编码的意思，如果不写，或者写成其它都会有问题

5、<title>此处内容是网页的标题</title>

6、<body>我们自己写的代码都放在这里</body>

注意：html文档不能正常识别回车和换行，只能使用特定代码来实现。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>我的第一个网页</title>

</head>

<body>

    <h1>你好，世界！</h1>

    <h2>br标签代表换行</h2>

    <b>我是b，代表加粗</b><br>

    <strong>strong是加粗，可以代表强调语义</strong><br>

    <u>我是u，代表下划线</u><br>

    <i>我是i，代表倾斜</i><br>

    <em>我是em，也是倾斜，多了强调的语义</em><br>

    <s>我是s，代表删除线，这种写法渐渐被淘汰</s><br>

    <del>我是del，也代表删除线，这种写法是主流</del>

</body>

</html>

看一下img标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>我的第一个网页</title>

</head>

<body>

    <h1>h1是一级标题</h1>

    <h2>h2是二级标题</h2>

    <h3>h3是三级标题。。。</h3>

    <h2>br标签代表换行</h2>

    <b>我是b，代表加粗</b><br>

    <strong>strong是加粗，可以代表强调语义</strong><br>

    <u>我是u，代表下划线</u><br>

    <i>我是i，代表倾斜</i><br>

    <em>我是em，也是倾斜，多了强调的语义</em><br>

    <s>我是s，代表删除线，这种写法渐渐被淘汰</s><br>

    <del>我是del，也代表删除线，这种写法是主流</del>

    <h1>img 是图片标签--正常的图宽790，高422</h1>

    <img src="10.png"/><br>

    <h1>img 是图片标签--设置了宽高的图宽1000，高550</h1>

    <img src="10.png" width="1000" height="550"/><br>

    <h1>img 是图片标签--等比例缩放，宽高设置其中一个就可以了，宽500</h1>

    <img src="10.png" width="500"><br>

    <h1>有提示文本的 --- 鼠标悬停的提示文字</h1>

    <img src="10.png" title="我是鼠标悬停时显示的文字"><br>

    <h1>图片没有加载出来的时候才出现的文字</h1>

    <img src="11.png" alt="我是提醒文字"><br>

    <h1>可以让网页阅读器把alt中的文字念出来</h1>

    <img src="11.png" alt="描述这种图的文字（这是一个logo图片）"><br>

</body>

</html>

超链接

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>我的第一个网页</title>

</head>

<body>

    <h1>h1是一级标题</h1>

    <h2>h2是二级标题</h2>

    <h3>h3是三级标题。。。</h3>

    <h2>br标签代表换行</h2>

    <b>我是b，代表加粗</b><br>

    <strong>strong是加粗，可以代表强调语义</strong><br>

    <u>我是u，代表下划线</u><br>

    <i>我是i，代表倾斜</i><br>

    <em>我是em，也是倾斜，多了强调的语义</em><br>

    <s>我是s，代表删除线，这种写法渐渐被淘汰</s><br>

    <del>我是del，也代表删除线，这种写法是主流</del>

    <!--下面是img标签的相关方法-->

    <h1>img 是图片标签--正常的图宽790，高422</h1>

    <img src="10.png"/><br>

    <h1>img 是图片标签--设置了宽高的图宽1000，高550</h1>

    <img src="10.png" width="1000" height="550"/><br>

    <h1>img 是图片标签--等比例缩放，宽高设置其中一个就可以了，宽500</h1>

    <img src="10.png" width="500"><br>

    <h1>有提示文本的 --- 鼠标悬停的提示文字</h1>

    <img src="10.png" title="我是鼠标悬停时显示的文字"><br>

    <h1>图片没有加载出来的时候才出现的文字</h1>

    <img src="11.png" alt="我是提醒文字"><br>

    <h1>可以让网页阅读器把alt中的文字念出来</h1>

    <img src="11.png" alt="描述这种图的文字（这是一个logo图片）"><br>

    <!--下面是超链接-->

    <h1>跳转到百度</h1>

    <a href="http://www.baidu.com">百度一下</a><br>

    <!--alt+? 代码提示功能-->

    <a href="http://www.taobao.com">我想跳转到淘宝</a><br>

    <!--target="_blank"可以设置新窗口打开-->

    <a href="http://www.baidu.com" target="_blank">新窗口打开</a><br>

    <p>p是段落</p>

    <p id="haha">p是段落11111111</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <!-- 暂时不知道些什么要用#代表空链接-->

    <a href="###">我还不知道点击之后跳转到哪里###</a><br>

    <a href="javascript:;">我还不知道点击之后跳转到哪里javascript:;</a><br>

    <a href="javascript:void(0)">我还不知道点击之后跳转到哪里javascript:;</a><br>

    <!--以上三种写法都可以，不要提bug，只有写1个或2个#号或不写才提bug-->

    <!--锚点链接-->

    <a href="#haha">我想跳转到某位置</a><br>

</body>

</html>

form表单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>我的第一个网页</title>

</head>

<body>

<!--所有用户输入的内容都要放在form标签中-->

<!--Action 代表数据给那个后台程序-->

<!--Method 代表传输数据的方法1.post(加密) 2.get(不加密)-->

<form action="" method="post">

<!--    input代表文本框标签 type是类型的意思-->

<!--    如果设置text 代表最标准的输入框-->

<!--    name 代表此输入框的名字-->

<!--    id 代表输入框的id编号-->

<!--    value 代表默认文字-->

<!--    placeholder 属于html5最新的属性，它不兼容ie低版本浏览器(6-8)

        此效果虽然ie低版本不支持，但不会造成页面的混乱，我们就认为此属性没有问题

        以渐进增强（随着浏览器版本的升高，用户体验越来越好）、优雅降级（保证低版本浏览器不混乱）

-->

    <!--昵称：<input type="text" name="" id="" value="hahah">-->

    昵称：<input type="text" name="" id="" placeholder="hahah"><br>

<!--    input的type类型如果是password 代表密码框，用户输入文字会加密-->

    密码：<input type="password">

</form>

    <h1>h1是一级标题</h1>

    <h2>h2是二级标题</h2>

    <h3>h3是三级标题。。。</h3>

    <h2>br标签代表换行</h2>

    <b>我是b，代表加粗</b><br>

    <strong>strong是加粗，可以代表强调语义</strong><br>

    <u>我是u，代表下划线</u><br>

    <i>我是i，代表倾斜</i><br>

    <em>我是em，也是倾斜，多了强调的语义</em><br>

    <s>我是s，代表删除线，这种写法渐渐被淘汰</s><br>

    <del>我是del，也代表删除线，这种写法是主流</del>

    <!--下面是img标签的相关方法-->

    <h1>img 是图片标签--正常的图宽790，高422</h1>

    <img src="10.png"/><br>

    <h1>img 是图片标签--设置了宽高的图宽1000，高550</h1>

    <img src="10.png" width="1000" height="550"/><br>

    <h1>img 是图片标签--等比例缩放，宽高设置其中一个就可以了，宽500</h1>

    <img src="10.png" width="500"><br>

    <h1>有提示文本的 --- 鼠标悬停的提示文字</h1>

    <img src="10.png" title="我是鼠标悬停时显示的文字"><br>

    <h1>图片没有加载出来的时候才出现的文字</h1>

    <img src="11.png" alt="我是提醒文字"><br>

    <h1>可以让网页阅读器把alt中的文字念出来</h1>

    <img src="11.png" alt="描述这种图的文字（这是一个logo图片）"><br>

    <!--下面是超链接-->

    <h1>跳转到百度</h1>

    <a href="http://www.baidu.com">百度一下</a><br>

    <!--alt+? 代码提示功能-->

    <a href="http://www.taobao.com">我想跳转到淘宝</a><br>

    <!--target="_blank"可以设置新窗口打开-->

    <a href="http://www.baidu.com" target="_blank">新窗口打开</a><br>

    <p>p是段落</p>

    <p id="haha">p是段落11111111</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <p>p是段落</p>

    <!-- 暂时不知道些什么要用#代表空链接-->

    <a href="###">我还不知道点击之后跳转到哪里###</a><br>

    <a href="javascript:;">我还不知道点击之后跳转到哪里javascript:;</a><br>

    <a href="javascript:void(0)">我还不知道点击之后跳转到哪里javascript:;</a><br>

    <!--以上三种写法都可以，不要提bug，只有写1个或2个#号或不写才提bug-->

    <!--锚点链接-->

    <a href="#haha">我想跳转到某位置</a><br>

</body>

</html>

第三篇 -- HTML基础的更多相关文章

【0728 | 预习】第三篇 Python基础
第三篇 Python基础预习 Part 1 变量一.什么是变量? 二.为什么要有变量? 三.定义变量四.变量的组成五.变量名的命名规范六.变量名的两种风格 Part 2 常量 Part 3 P ...
前端第三篇---前端基础之JavaScript
前端第三篇---前端基础之JavaScript 一.JavaScript概述二.JavaScript的基础三.词法分析四.JavaScript的内置对象和方法五.BOM对象六.DOM对象七 ...
前端开发【第三篇: JavaScript基础】
JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...
第三篇 JavaScript基础
知识预览 BOM对象 DOM对象(DHTML) 实例练习转:https://www.cnblogs.com/yuanchenqi/articles/5980312.html#_label2 一.Ja ...
进击python第三篇：基础
基础拾遗序列解包例: >>>x,y,z=1,2,3 >>>print x,y,z 1 2 3 交换变量也是没问题 >>>x,y=y,x > ...
4.第三篇 PKI基础概念、cfssl工具介绍及kubernetes中证书
文章转载自:https://mp.weixin.qq.com/s?__biz=MzI1MDgwNzQ1MQ==&mid=2247483787&idx=1&sn=08dd3404 ...
Membership三步曲之入门篇 - Membership基础示例
Membership 三步曲之入门篇 - Membership基础示例 Membership三步曲之入门篇 - Membership基础示例 Membership三步曲之进阶篇 - 深入剖析Pro ...
[转]Membership三步曲之入门篇 - Membership基础示例
本文转自:http://www.cnblogs.com/jesse2013/p/membership.html Membership三步曲之入门篇 - Membership基础示例 Members ...
JS--我发现，原来你是这样的JS（三）（基础概念--灵魂篇）
一.介绍这是红宝书(JavaScript高级程序设计 3版)的读书笔记第三篇(灵魂篇介绍),有着剩下的第三章的知识内容. 红宝书这本书可以说是难啃的,要看完不容易,挺厚的,要看懂更不容易,要熟练js ...

随机推荐

linux远程和软件包的管理
远程管理 ssh 用户名@对方IP地址 -X 在本地可以运行对方的图形程序端口 22 [root@room9pc01 ~]# ssh root@172.25.0.11 [root@serve ...
【逆向实战】ES文件浏览器未授权访问漏洞(CVE-2019-6447)具体分析及利用
/作者:Kali_MG1937 CSDN博客号:ALDYS4 QQ:3496925334 未经许可,禁止转载/ 漏洞简介 CVE-2019-6447是Android端上的一个知名软件:ES文件浏览器的 ...
利用 Bean Validation 来简化接口请求参数校验
团队新来了个校招实习生静静,相互交流后发现竟然是我母校同实验室的小学妹,小学妹很热情地认下了我这个失散多年的大湿哥,后来... 小学妹:大湿哥,咱们项目里的 Controller 怎么都看不到参数校验 ...
Django（66）admin后台管理注册用户
前言我们使用django创建用户可以使用注册接口的方式,也可以使用django自带的后台管理系统,这里就介绍使用后台管理系统创建用户 admin后台管理系统在使用之前我们可以使用第三方的插件,来美 ...
想自己写框架？不了解Java注解机制可不行
无论是在JDK还是框架中,注解都是很重要的一部分,我们使用过很多注解,但是你有真正去了解过他的实现原理么?你有去自己写过注解么? 概念注解(Annotation),也叫元数据.一种代码级别的说明.它 ...
DG duplicate报错:RMAN-05001:auxiliary file name /u01/app/oracle/oradata/fratbs01.dbf conflicts with a file used by the target database
问题:rman duplicate时报错: RMAN-05001:auxiliary file name /u01/app/oracle/oradata/fratbs01.dbf conflicts ...
对图数据库（Nebula）进行单元测试时的坑
通过Nebula提供的Java Client完成代码开发后,使用JUnit对其进行单元测试,需要注意几点: 一.不确定性 1.Nebula创建图空间是异步实现的,Nebula将在下一个心跳周期内(默认 ...
4、VMware虚拟机相关配置
4.1.VMware虚拟机开启模块snapshot失败: 1.非正常VMware关闭虚拟机(例如开关机过程中关掉VMware等操作),再次启动虚拟机可能会出现提示:"锁定文件失败虚拟机开 ...
11、gitlab和Jenkins整合(2)
5.补充: (1)构建说明: 1)Jenkins会基于一些处理器任务后,构建发布一个稳健指数 (从0-100 ),这些任务一般以插件的方式实现. 2)它们可能包括单元测试(JUnit).覆盖率(Cob ...
44、djanjo工程（介绍）
44.1.什么时web框架: 1.框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用看框架可以帮助你快速开发特定的形同,简单的说,就是你用别人搭建好的舞台来做 ...

第三篇 -- HTML基础

第三篇 -- HTML基础的更多相关文章

随机推荐

热门专题