01-html基础知识

最新推荐文章于 2024-10-10 17:42:11 发布

jujujp

最新推荐文章于 2024-10-10 17:42:11 发布

阅读量178

点赞数

分类专栏：一、css+html基础文章标签： html5 html

本文链接：https://blog.csdn.net/qq_58069093/article/details/123693485

版权

一、css+html基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、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   -->
  <img
    src="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="images/kunkun.jpg" alt="">
  <!-- 下级找上级 -->
  <a href="../03-代码/基础站点.rar"></a>
</body>