HTML学习笔记

喜欢c艹的小白

已于 2022-03-03 15:26:42 修改

阅读量248

点赞数 2

文章标签： html 学习前端

于 2022-03-03 15:06:19 首次发布

本文链接：https://blog.csdn.net/qq_58265926/article/details/123251507

版权

前端书写编辑器

前端编辑器有很多，比如说Sublime Text,Vs code,Notepad++等等，其中前端程序员最常用的就是Vscode，号称宇宙最强编辑器。

附上Vscode的下载网址

Visual Studio Code - Code Editing. Redefined

初始HTML

HTML:超文本标记语言（Hyper Text Markup Language）值得注意的是HTML不是一门编程语言，而是一门标记语言，是网页制作必不可少的一门语言。

HTML的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <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>Document</title>
</head>
<body>
    
</body>
</html>

（直接在vscode上敲！+Tab键自动生成，这是通过Emmet语法实现的，Emmet是一个能大幅度提高前端开发效率的工具，能够实现 HTML、CSS 的快速编写。vscode已经集成了该语法）

下面就来介绍一下HTML的基本结构

<!DOCTYPE> 是 Document Type Declaration 的简称，只是用来声明文档，也就是告知 web 浏览器当前页面使用了哪种 HTML 版本编写代码，此处使用的是 HTML 5 的版本。声明文档必不可少，而且必须位于 HTML 文档的第一行；
<html> 表示页面编写的代码都是 HTML 代码。它是成对出现的标签，直到 </html> 结束。除了声明文档外的所有代码都必须写在 <html></html> 中间；
<head> 表示页面的"头部"，页面的 title（标题）一般写在 <head></head> 中间；
<meta charset="UTF-8">是告知浏览器此页面属于什么字符编码格式，UTF-8也称“万国码”，可以显示世界上绝大部分国家和地区的文字，是前端程序员最常用的字符集；
<title> 表示页面的标题；
<body> 表示页面的"身体"，页面中的绝大部分内容都可以写在 <body></body> 之间。

HTML的常用标签

<br/>（break打破的意思，强制换行）换行标签，是单标，在需要换行时添加。备注：单标签的“/”都是在后面。
<hr/>(水平线标签，单标签) <hr size=”厚度值” noshade（用来去掉3D效果） width=”宽度值” align”对齐方式，比如center” color=”颜色”/>
<>尖括号内的所有内容都不会在网页内显
<p>段落标签，双标签，使用方式：<p>内容</p>，p标签有align属性，可以通过设置align的属性来设置对齐方式，使用方式：<p align=center></p>。换行标签，和<br/>标签的区别为：段与段之间的间距更大，<p>标签的属性是align，属性值为：left;right;center。
<center>，居中标签，双标签，使用方式：<center>网页内容</center>。
<h1></h1>是一级标题：字体最大，只能使用一次。<h2></h2>至<h6></h6>，h2至h6可以重复使用。标签标题hn有6个等级。
<b></b>bold（加粗）。<strong></strong>（强调加粗）strong是具有优先级。
<i></i>( italic斜体)斜体标签。
<cite></cite>（cite，引用）斜体引用标签。
<em></em>（emphasized，强调的意思）斜体强调标签。
<u></u>下划线标签。
<styike></styike>、<s></s>、<del></del>(这三个都是删除线)。
<font></font>，HTML中使用<font>标签的使用方式：<font color=”颜色” size”数字”></font>。
<pre>该标签内可以识别空字符，比如空格或换行（回车）
<table></table>(定义单元格标签)。<caption></caption>）。<tr></tr>（行标签，代表一行表格，t是table的缩写，r是row的缩写：行的意思）。<th></th>（表格表头标签，表头标签有加粗居中的效果）。<td></td>（定义一个单元格的标签）。例子：<table width="400px"（设置表格的宽度）height="200px"(设置表格的高度) align="center"（设置表格的水平对齐）border="1"(设置表格的表框) cellspacing="0"（设置表格表框与边框的距离）cellpadding="20"（设置表格中文字与边框的距离）bordercolor="blue"（设置表格边框颜色）background="路径"（设置表格背景图片）bgcolor=”red”（设置表格背景颜色）valign=”top、middle、bottom”（设置表格内容垂直对齐方式）type=”solid;边框样式实线，dotted;边框样式点状，dashed;边框样式虚线”。
img（插入图片标签）使用方法：<img src（来源的意思）=”图片路径” alt=”图片显示不出的提示文字，有给搜索引擎看的用意” title=”鼠标移动到图片上显示的文字提示” width=”属性值” height=”属性值” border=”属性值” bordercolor=”边框颜色/>。注：如果图片路径和HTML文件位于同一级，则如<img src="ahh.gif"/>,如果位于HTML文件的上一级，则如img src="images/ahh.gif"/>,如果位于HTML文件的上一级，则如img src="../ahh.gif"/>
<a href=”#” target="_self在原窗口中打开，为默认值。_blank在新窗口打开”>
<form></form>表单标签，标签对内的是控件。

喜欢c艹的小白

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML学习笔记

前端书写编辑器前端编辑器有很多，比如说Sublime Text,Vs code,Notepad++等等，其中前端程序员最常用的就是Vscode，号称宇宙最强编辑器。附上Vscode的下载网址Visual Studio Code - Code Editing. Redefined初始HTMLHTML:超文本标记语言（Hyper Text Markup Language）值得注意的是HTML不是一门编程语言，而是一门标记语言，是网页制作必不可少的一门语言。HTML的基本结构&lt
复制链接

扫一扫