前端之HTML内容

前端之HTML内容

HTML介绍

HTML简介

超文本标记语言 Hypertext Markup Language, HTML
如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法
我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)

HTML文档结构

<html>
	<head>引入css/js/其它信息/定义配置</head>
    <body>标签/给浏览器渲染内容/自定义js</body>
</html>

注意: HTML代码是没有格式的，但是建议写代码时，保持代码缩进的习惯
    <meta charset="UTF-8"> # 中文页面 需要设置编码
    <title>css样式优先级</title> # 页面标题

HTML推荐书写标准

# 注释:注释是代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->

打开HTML文件的方式

  • 找到文件所在的位置右键选择浏览器打开
  • 或者在某些工具中配置浏览器插件，如vscode

常用标签

标签的分类

1.双标签
2.单标签(自闭合标签)

# 1 块儿级标签:独占一行
		h1~h6	p div
    总结:
      	只要是块级标签都可以嵌套任意的块儿级标签和行内标签
        但是p标签只能嵌套行内标签（HTML书写规范）
# 2 行内标签:自身文本多大就占多大
		i u s b span
  	行内标签不能嵌套块级标签 可以嵌套行内标签

head内常用标签

<title>Title</title>  网页标题

<style>
        h1 {
            color: greenyellow;
        }
</style>  内部用来书写css代码

<script>
        alert(123)
</script>  内部用来书写js代码

<script src="myjs.js"></script>  还可以引入外部js文件

<link rel="stylesheet" href="mycss.css">  引入外部css文件

meta标签的使用

<!--  根据关键字 优先展示-->
<meta name="keywords" content=""> 

<!-- 网页的描述性信息-->
<meta name="description" content=""> 

<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">  

<!--2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">

<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

body内常用标签

基本标签

<h1>我是h1</h1>  标题标签 1～6级标题 - 常用
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落</p>  - 常用
<br>  换行   - 可考虑
<hr>  水平分割线 - 可考虑

特殊符号

&nbsp;  空格 - 常用
&gt;   大于号
&lt;   小于号
&amp;  &
&yen;  ¥
&copy;		©
商标&reg;  ®

常用标签

div  块儿级标签 - 相当于又给容器
p    块儿级标签 - 独占一行
span  行内标签  - 文本有内容出现，文本没有内容不出现

一般来说，页面的布局会先用div和span占位之后，然后去调整样式.
div 可以用来提前对规定所有区域
普通文本先用span标签

img标签

# 图片标签
<img src="" alt="",title="",height="" width="">

src 图片路径:本地 / url(get请求)
alt 无图片时，描述性信息
title 鼠标悬浮后，自动提示信息
height/width 一般设置一个就行，否则图片失真
posted @   派森的猫  阅读(19)  评论(0)  编辑  收藏  举报
相关博文：
· 前端课程介绍
· day13 前端开发
· 前端之HTML
· 前端之HTML
· 前端基础之HTML基础
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）
点击右上角即可分享
微信分享提示