html基础篇（认识html，vscode安装，各种标签）

本文链接：https://blog.youkuaiyun.com/dergfg/article/details/113756610

保持对代码的热爱并保持怀疑态度

网页的组成：结构表现行为

        html      css       js
        xhtml
        (由w3c（万维网联盟规范)    （由ecma）

HTML 指的是超文本标记语言 (Hyper Text Markup Language) www万维网的描述性语言。

XHTML指可扩展超文本标记语言（标识语言）（EXtensible HyperText Markup Language）是一种置标语言，语法上更加严格。

HTML5指的是HTML的第五次重大修改（第5个版本）

站点的命名规范：小写英文，数字，下划线组成，开头必须英文，防止项目上线乱码
不能以中文，特殊符号和空格

站点（文件夹）：包括css，js，imgs，html（网页）
在这里插入图片描述

编辑器vscode

一个好的开发环境可以提高工作效率

装插件：点俄罗斯方块搜索 chinese 汉化包 open in browser 打开浏览器（ALT加B）快捷键打开浏览器
在这里插入图片描述

html基本结构

新建一个html文件，在HTML文件开头直接输入法英文模式打一个！即可出来完整的结构（当然也可以自定义结构，这个后面再说）


<!DOCTYPE html>
<!-- 声明html的文档类型 -->
<html >
 <!-- html表示设置标记语言 -->
 <head>
     <!-- 网页的头部 -->
     <meta charset="UTF-8">
     <!-- 设置编码格式为utf-8 万国码，防止中文内容乱码 -->
     <title>学习第一天</title>
     <!-- 设置文件的标题 -->
 </head>
 <body>
    <!-- 网页的身体部分，网页的内容全部写在body-->，代码往这写
 </body>
</html>

单标签和双标签的区别
在HTML基础中，单标签就是由一个标签组成的。
如
<br>、<hr>、<img>、<input>、<param>、<meta>、<link>
1.双标签
而双标签则是由“开始标签”和“结束标签”两部分构成（这两部分是相同的,但是结尾的时候需要加“/”）。。用到就会知道哪些是，这里就不一一例举

	<div></div>
    <script></script>
    <h2></h2>

特点
1.由尖括号包围的关键词，比如 <html>
2.通常是成对出现的，比如 <div> 和 </div>
3.标签对中的第一个标签是开始标签，第二个标签是结束标签；
4.开始和结束标签也被称为开放标签和闭合标签。
5.也有单独呈现的标签，如：<img src="百度百科.jpg" />等。
6.一般成对出现的标签，其内容在两个标签中间。单独呈现的标签
则在标签属性中赋值。如<h1>标题</h1>和 <input type="text" value="按钮" />。

常用标签

h1-h6 标题字体从大到小换行加粗 h1一般用于logo
（后面标签就不一一测试了，可以自己写，多写写就会了）
在这里插入图片描述

p，段落标签
div 圈一圈，这个很重要，会经常使用

div作用
让内容包裹在DIV内，实现各式各样的美化，比如对div设置边框，这样内容就区就有边框样式、对div设置字体颜色这样对应DIV内字体就有了各式各样的颜色；对div设置背景颜色或背景图片，这样内容就有了漂亮的css背景。

div标签内使用样式实现各式各样排版，对div设置不同的css样式，实现美工图布局样式

br 换行
hr 水平线
em，i 倾斜 em强调
b ，strong 加粗 strong强调
u 下划线
sub，sup 上标记，下标记
span 文本都是双标

嵌套规范
自动换行的标签可以嵌套不会自动换行的标签
（这里是区分块元素，内联元素，行类块元素，这个后面会说）

列表
ol 有序列表

喜洋洋
美洋洋
懒洋洋
沸洋洋

    ol的 属性
    type  定义有序列表的排序类型

    值：    1、A、a、I、i

    start  设置从几开始排序

    值：     数字


无序列表
   ul和li

   <ul type="square">
        <li>喜洋洋</li>
        <li>美洋洋</li>
        <li>懒洋洋</li>
        <li>沸洋洋</li>
    </ul>

自定义列表

 <dl>
      <dt>商品的图片</dt>
      <dd>商品的描述</dd>
      dt显示是在dd前面位置
</dl>

图片
网页插入图片的格式
jpg 普通图片
png 图片背景是透明的
gif 图片背景是透明的，动态图 -->

路径：文件的所在位置
同级文件：文件名
打开文件夹：文件名/
返回上一层： …/

图片标签 img 
   属性  
        src   设置插入图片的路径 
        alt   当图片路径错误无法显示，给用户一个提示信息，搜索引擎SEO优化的作用
        title 悬浮提示框（全局属性，在body里大多数标签都可以设置这个属性）
        width 宽度
        height 高度
<img src="../../images/c1.png" alt="蔡徐坤" title="蔡徐坤打篮球" width="200px" >

超链接 a标签
属性
href 设置连接跳转的
http://网址
或者是本地文件文件的路径

    target 超链接的打开方式
    
        _self   原网页覆盖
        _blank  新建打开

    title 


<!-- <a href="http://www.baidu.com" target="_blank"> 百度</a> -->


<a href="列表.html" target="_blank" title="二级分页">二级分页</a>