01-html基础知识

一、html基础

1、html发展史:超文本标记语言

- 出现分歧点、分化点？

- 组织成员语言发展要考虑开发者=>写代码要规范 Xhtml

- 组织成员语言发展要考虑用户=>用户体验 html4.01 现在使用的版本

- 总结：Xhtml语言要比html语言更为严格严谨

- 记住这个时间点 2014年，由w3c推出正式开发版HTML5.0

2、网址建站流程

- 注册域名（网址）

- 租用空间

- 网站建设

- 确定网站主题

- 搜索资料

- 规划网站

- 制作页面

- 网站推广

- 网站维护

程序员的工作流程

3、网页的web标准在百度新闻页面你能看见哪些内容？

- 文字、图片、标题 => 网页的结构

- 文字有颜色大小、图片 => 网页的表现

- 点击跳转、输入等 => 网页的行为

网页的组成部分：

- 结构 html

- 表现 css

- 行为 js

4、HTML基础

网页和网站的概念

- 网页是一个个体，由后缀名为.html文件创建的

- 网站是一个整体由若干个网页使用超链接链接组成的

什么是html 超越了正常网页布局的一种标记语言

- 超文本标记语言

- 超：表示超越

- 文本：泛指表示页面中的所有内容

- 标记：坑占位置

- 语言：表示规范

解释：浏览器默认的排列方向是从左到右从上到下的使用了HTML中规范的标记就可以改变文本的初始位置

设置文件的后缀名显示

- win7：工具-文件夹选项-查看-去掉隐藏已知文件的后缀名

- win10

如何创建站点

- 什么是站点：规范网站的内容整合代码

- 如何去创建

- 结构 html

- 表现 css

- 行为 js

-相关的资源（图片、音视频、插件）images文件夹

一、编辑器的使用

1.下载好编辑器编辑器是默认英文的

- 下载汉译插件左侧菜单栏的第五个按键（拓展程序）

- Chinese 下载安装重启编辑器即可

2.在编辑器中打开浏览器

- 文件的后缀名一定是html的文件才可以使用这种

- open in browser 打开浏览器的插件在编辑器空白区域点击右键打开

- view in browser 在文件名上右键打开浏览器

3.如何在编辑器中写代码？

- 符合html语言的规范代码可以在.html后缀名文件中书写

- 基础结构代码（自动生成）规范结构

4.如何生产基础结构代码（输入法为英文状态下）

- shift+1=>生成感叹号回车 - html:5 回车

二、页面基础结构代码


<!DOCTYPE html><!-- 声明文档类型 符合HTML语言规范 -->
<html lang="en">
<!-- 代表浏览器 当前的文档对象 当前页面是否进行翻译 --><head><!-- 头部区域 引入资源 解析资源 描述区域：告诉浏览器当前页面有哪些内容 --><!-- meta 元标签 --><meta charset="UTF-8"><!-- 国际编码 对当前页面中的文字进行转义 --><!-- 当前页面的视口 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>\(^o^)/~</title><!-- 页面标题 -->
</head><body><!-- 身体 主体部分  建议将所有的结构代码全部写在body中 -->
</body></html><!-- html注释符合：写代码代码数量较多，提示文本
- 注释的快捷键  ctrl+/
- 单行注释
- 多行注释
- 部分注释 alt+shift+a
-->

三、html基础语法

1、超文本标记语言

<标记的名称属性1="属性值1" 属性2="属性值2"></标记的名称>

2、空标记/单标记

<标记的名称属性1="属性值1" 属性2="属性值2"/>

- 超文本标记语言有两种写法单标签和双标签

- 在尖角符合后面的第一个英文单词就是当前标记的名称习惯性的称为元素或者标签

- 双标签的结束名称前面要一个反斜杠，单标签结束的反斜杠可以不写

- 属性和属性值之间用等号相连属性值需要用引号引起来

- 当一个标签有多个属性的时候属性是不区分顺序的

案例：小米同学身高185cm 体重75kg 长相吴彦祖

- 双标签 <小米同学身高="185cm"><>

- 单标签

四、标题字体学习

标题字体的使用官方推荐使用h标签

标签名称：h1~h6

默认样式

- 文字的字体大小越来越小

- 加粗效果越来越弱

作用

- h1通常用来存放网页中最为重要的部分 logo seo搜索引擎优化唯一性的


<body><!-- 在vscode中写标签名称回车就可以自动生成标签 --><h1>4444</h1><h2>4444</h2><h3>4444</h3><h4>4444</h4><h5>4444</h5><h6>4444</h6><!--   第一种方法:快速选择添加文本- 选择到标签的共有部分- ctrl+d 有几个按几次- 按住键盘上的左右按键移动光标到合适的位置即可2方法：快捷生成法 h$*6{文本}- h 表示标签的名称- $ 表示序号 从1开始的- * 乘以- 6 生成6个- {里面写文本内容}--><h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>
</body>

五、段落标签的使用

段落标签名称：p

默认样式

- 段落标签默认独占一行换行显示

- 段落白起默认上下是有间距的

- 段落标签宽度会随着浏览器进行改变

编辑器中文本内容过多的情况下

<body>00000022222222222555<p>00000022222222222555</p>
</body>

六、加粗和倾斜标签的使用

加粗标签：b 、strong 有区别但是浏览器区分明显，但肉眼不可见

倾斜标签：i、em

下划线标签：u

常见两个单标签

- hr 横线

- br 强制性换行

Html中常用的转义字符：快捷键tab+shift

  不换行空格

> >右尖括号

< <左尖括号

& &

拓展两个标签

- sup

- sub

<body>小米是正常的<b>小米是正常的</b><strong>小米是正常的</strong><i>小米是正常的</i><em>小米是正常的</em><hr><br>小米是正常的小米 &nbsp; &nbsp;是正常的&lt;&gt;《》&copy;©&amp;12<sub>tm</sub><!-- 化学方程式 --><sub>H2O</sub><p><b>《悯农》</b></p><p>锄禾日当午，</p><p>汗滴禾下土。</p><p>谁知盘中餐，</p><p>粒粒皆辛苦。</p><hr><p><b>《静夜思》</b></p><p>床前明月光，</p><p>疑是地上霜。</p><p>举头望明月，</p><p>低头思故乡。</p><h2>《悯农》</h2><p>锄禾日当午，<br>汗滴禾下土。<br>谁知盘中餐，<br>粒粒皆辛苦。<br></p><hr><h2>《静夜思》</h2><p>床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。<br></p>
</body>

七、列表标签的使用

列表标签的使用：无序列表、有序列表、自定义列表

1.无序列表

标签名称：

- 父级标签 ul 表示列表

- 子级标签 li 列表的内容

默认样式

- 有黑色实心圆

- 独占一行换行显示

- 缩进效果

作用：导航，新闻列表页面

2.有序列表

- 标签名称：ol>li

默认样式

- 默认序号

- 独占一行换行显示缩进效果

作用：轮播图

拓展：

-type 类型默认值是1 a/A i/I

- start 开始属性值只能是数字，表示当前从第几个开始数

3.自定义列表：dl>dt+dd

- 父级标签 dl

- 子级标签


<body><ul><li>周末学习吗？我不要！</li><li>周末学习吗？我不要！</li><li>周末学习吗？我不要！</li><li>周末学习吗？我不要！</li></ul><hr><ol type="a" start="26"><li>周末学习吗？我不要！</li><li>周末学习吗？我不要！</li><li>周末学习吗？我不要！</li><li>周末学习吗？我不要！</li></ol><hr><dl><dt>名词或者是图片</dt><dd>名词图片解释</dd></dl><dl><dt>蔡徐坤</dt><dd>篮球rap</dd></dl>
</body>

八、超链接标签

超链接标签的使用

标签名称：a

属性

-href 跳转的相对路径

- target 控制打开窗口方式

_self 打开窗口会覆盖原窗口

_blank 打开到新的窗口页面

- title 用户鼠标移上去显示的一段提示文本

拓展：建议有a标签就设置打开新的窗口页面

- 在head标签内书写以后base标签

默认样式

- 字体有颜色

- 有下划线

- 鼠标移入的时候指针变手型引导用户点击跳转


<body><!-- 网络协议 --><a href="http://www.baidu.com">点击跳转到百度首页</a><a href="">点击跳转</a>
</body>

九、图片链接

图片标签的使用

标签名称：img

属性值

- src 地址

- alt 当图片加载失败或者网站不佳的时候的一段提示文本

了解属性

- title 鼠标移1上去图片会有一段提示文字

- width/height 盒子/图片的宽高大小px像素

-border 边框（复合属性；宽度；样式；颜色）

<body><!--ikun images   --><imgsrc="https://img0.baidu.com/it/u=258240604,2279734432&fm=26&fmt=auto"alt="某同学" width="100px" height="200px">
</body>

十、路径的选择

引用文件的方式可以使用在线路径和本地路径本地路径又分为绝对和相对

绝对路径

- 含有盘符的路径

- 写好项目之后都是需要打包到服务器上在工作中不推荐这种写法

相对路径

- 同级找同级目标文件的名称.后缀名

-上级找下级目标文件

- 下级找上级

../跳出当前文件夹

<body><img src="" alt=""><!-- 同级找同级 --><img src="kunkun.jpg" alt=""><!-- 上级找下级 --><img src="data:images/kunkun.jpg" alt=""><!-- 下级找上级 --><a href="../03-代码/基础站点.rar"></a>
</body>

01-html基础知识相关推荐

【计算机基础】01计算机基础知识
第1章计算机基础知识 1.1 概述 1.1.1 计算机的发展史 1942年2月,美国宾夕法尼亚大学研制出世界上第一台电子多用途数字计算机ENIAC. 5个发展时代: 1. 第一代计算机第一代 ...
01.软件测试基础知识整合
软件测试基础前言一.什么是软件测试二.软件测试的目的三.软件测试的基本流程四.测试分类五.测试用例 1.什么是测试用例 2.测试用例的重要性 3.测试用例的设计方法 4.测试点分析 5.如 ...
【笔记】网易微专业-Web安全工程师-01.WEB基础知识
课程概述: 本课是基础中的基础,通俗易懂的讲解了Web的本质和Web开发的基础知识.对于Web小白,建议从头开始抓紧学习:对于已经有一定Web基础知识的同学,建议快速的过一遍,夯实基础. 课程大纲: ...
电子计算机的基本结构基于存储程序,01计算机基础知识题(50道)
有答案的计算机基础知识测试题(带答案) 第一章计算机基础知识习题三.填空题 1.到目前为止,电子计算机的基本结构基于存储程序思想,这个思想最早是由提出的. 2.微型机硬件的最小配置包括主机.键盘 ...
密码算法学习笔记01：基础知识-公钥密码和混合密码系统
来自书籍<图解密码技术第三版.pdf> 密码算法基础知识-公钥密码和混合密码系统一.公钥密码公钥密码--用公钥加密,用私钥解密. 公钥密码无需向接收者配送用于解密的钥匙,只需向发送者 ...
微信公众号(01)---相关基础知识
本文主要普及一下微信公众号相关基本知识以及开发者模式的开启. 一.微信公众号分类微信公众号主要分为三类.订阅号.服务号.企业号. 首先看看官方对于它们的说明 (1) 订阅号: 为媒体和个人提供一种新 ...
Shell脚本编程01：基础知识
Shell脚本与Windows/Dos下的批处理相似,就是将各类命令预先放入到一个文件中,然后执行该文件,便可以达到与批处理类似的功能,主要是方便管理员进行设置或者管理用的. 换句话来说,shell脚 ...
【Python脚本入门】01、基础知识
视频链接:https://www.bilibili.com/video/BV1dV41127Sk 文章目录 1 安装第三方库方法1:终端pip install 库名方法2:pycharm命令行方 ...
如果用户计算机已接入,01计算机基础知识题(50道)
7.在Windows2000中,切换到MS-DOS方式后,返回Windows2000的命令是. 8.在"我的电脑"窗口中用鼠标双击"软盘A"图标,将会. 习题参 ...
01 Html基础知识
网站怎能没有前端网页,那就开始吧! Html 什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTM ...

01-html基础知识

01-html基础知识相关推荐

最新文章

热门文章