HTML入门笔记

zzzzmdzz

已于 2023-03-09 20:47:18 修改

阅读量29

点赞数

分类专栏：学习文章标签： html 前端

于 2023-03-09 20:46:28 首次发布

本文链接：https://blog.csdn.net/zzzzmdzz/article/details/129430826

版权

学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
//h5版本的文档类型，html超文本标记语言，向下兼容
//只要保存就可以热更新网页内容，不需要像后端那样重启服务器。
//这里不介绍快捷键嗷，不同环境不一样。

<html lang="en">
//html开始标签，网页内容要写进这里。
//lang就是language语言，lang=en英文
<head>
//头文件
    <meta charset="UTF-8">
//meta 提供有关信息针对搜索引擎内容或关键词
//字符集utf-8：万国码，通用语言字符集啥语言都有（大部分国家包括cn）
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
//处理兼容，兼容浏览器等等
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
//适配移动设备，像素分辨率/框体分割比例
    <title>网页标题</title>
//网页标题，浏览器上面会显示
</head>
//有<>就必有</>但是html语法不严格，有时候没有</>也行。

<body>
//html里包含了head，body等子标签，就是一个人的头和身体，类似后端语言，头文件和函数

  

</body>

</html>

下面的内容基本只写body里面的内容。
html简单直接朴素
css样式，代码繁琐但是写出来好看
js脚本语言，网页能动主要靠它
能用html优先用html，再用剩下两样加以修饰

html由标签组成

文档用的标签

标题标签，即文章标题<>里面写h123456越来越小，文档里的一级二级标题等等，这是office内容。实际上这个只是控制了文字的大小粗细，虽然确实可以用h标签来搜索文档内容，但是我们不在乎。
网页设计中为了样式设计，并不按照office限制几级标题的使用，只能说尽可能只用一个h1。
段落标签p：html输出字符作文档的时候是连续输出的不分段落，分段落就得加p标签。
br/标签换行
加粗b标签：如果用h标签加粗文字会换行，b就是单纯加粗，strong强大/强壮/也是加粗外加强调
倾斜i标签：斜体字不强调，em标签斜体强调。现在写网页没必要考虑强调了，强调太多了搜索引擎会屏蔽。
span style=“”区分样式标签，给某句话加样式。style=“background-color背景颜色font-size
字号”等等。
sub数学化学用的下标，sup上标，幂函数之类。<>+</>要写的
ul，li两个标签可以互相嵌套，用于无需列表
ol有序列表，列表我不咋用，到时候查wiki罢。

图像等多媒体标签

终于到img：
src图像url src=‘绝对/相对目录’
width图片宽 =‘像素’图像按比例缩放
height图片高
alt指定替换文字（图像未加载等）
title标记

a标签：超链接，《a href=‘链接’ target=‘选择窗口’》《/a》（英文尖括号，我的笔记软件自动识别代码，所以我用中文符号混淆一下）
(下划线)blank新窗口打开（下划线）self当前页面打开（记得加下划线，我下划线符号被笔记软件占用了）
原页面跳转：《a href=”#+标签id“》链接名《/a》
需要在要跳转的标签里加id=对应的id名

div画框框标签，简单又复杂，只要《div》框体名《/div》，框框就画好了
重点是给div加样式，在style里写样式，通过id引入div。id=‘div1’，#div1{heyght：像素；width：像素；background-color：颜色；}等等样式，这就要看设计能力了。