一、软件的使用

1：软件名 VSCode

java实现亚马逊对象存储分页获取信息_java实现亚马逊对象存储分页获取信息

2：软件必备插件

Auto Rename Tag 自动重命名标签

Beautify 代码高亮工具

Chinese vscode中文语言包

二、基础知识

1：HTML是什么

  • 用来描述网页的一种语言
  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

2：HTML的模板

快捷键： ！+回车

<!DOCTYPE html> <!-- 声明：告诉浏览器这是一个HTML类型 -->
<html lang="en"> <!-- 根标签，所有的html代码都是写在html标签里面 -->
<head> <!-- head标签：元信息，引入js代码，css代码 -->
    <meta charset="UTF-8"> <!-- 设置编码格式，防止乱码 -->
    <title>html模版</title> <!-- 页面的标题 -->
</head>
<body> <!-- body标签，所有的html代码 都要写在body中 -->
    
</body>
</html>

3：常用标签

标题标签：

  <h1>h1标签</h1>
  <h2>h2标签</h2>
  <h3>h3标签</h3>
  <h4>h4标签</h4>
  <h5>h5标签</h5>
  <h6>h6标签</h6>

段落标签：

<p></p>

文本修饰标签：

<strong></strong> 表示强调，加粗文本

<em></em> 表示强调，文本斜体

<sup></sup> 上标标签

 <sub></sub> 下标标签

<del></del> 删除标签，在文本中间加一条横线表示文本删除

<ins></ins> 下划线，给文本内容添加下划线 

<br>换行

图片标签：

src：图片的地址 

alt：图片加载失败后会显示的文本内容 

title：所有标签都有的一个属性

如：  <img src="./练习.jpg" alt="图片加载失败" title="练习">

相对路径与绝对路径

相对路径：对应的是当前文件的路径
./当前的文件路径 
../当前的文件的上一级路径 
绝对路径：对应的是盘符开始的路径

跳转链接

 href：指的是跳转的目标地址 
target：页面的跳转方式 

_self当前页面直接跳转

 _blank打开新窗口 
 如果要所有窗口统一新开页面，可以使用<base target="_blank">

列表标签：

无序列表

<!-- ul和li是搭配的不能直接写一个li -->
    <!-- <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
     </ul> -->

有序列表

<!-- 有序列表(不常用) -->
    <!-- type：定义排序规则 -->
    <!-- <ol type="I">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol> -->

定义列表

    <!-- 定义列表 -->
    <!-- <dl></dl>声明一个定义列表 -->
    <!-- <dt></dt>声明一个定义项 -->
    <!-- <dd></dd>对定义项的解释 -->
    <!-- <dl>
        <dt>html</dt>
        <dd>html是…………</dd>
        <dt>css</dt>
        <dd>css是…………</dd>
    </dl> -->

表格标签

  <table></table> 定义表格的最外层容器
    <tr></tr> 定义表格的行
    <th></th> 定义表头
    <td></td> 定义单元格
    <caption></caption> 定义表格标题
    属性：
    border 表格边框
    cellpadding 单元格内文字距离单元格边框的距离
    cellspacing 单元格之间的距离
    align 左右对齐方式 left、right、center
    valign 上下对齐方式 top、middle、bottom

表单标签

 1：<form action=""></form> 表单的最外层容器
    action 用户点击提交后数据传的地址
    method 数据提交的方式

2：<input > 用于获取用户的输入，根据type展示不同的控件
    placeholder 输入框提示
    type：
        text 文本输入框
        password 密码输入框
        number 数字输入框
        date 日期选择
        file 上传文件
        range 范围选择
        hidden 隐藏控件
        submit 提交
        reset 重置
        radio 单选框  通过同样的name可以控制实现单选
        checkbox 多选框

3： <label for=""></label> 为input元素定义标注，label内元素点击可以触发控件,for与被触发的id相同

 div和span

<div></div> 盒子容器，可以容纳其他标签，也可以多层嵌套，用来将网页分为多块
    <span></span> 用来修饰文字
    没有默认样式需要通过CSS控制
    div 块级元素：每个块级元素算一行，第二个块级元素会另起一行，可以设置元素的宽、高等，
    内部可以容纳块级元素和内联元素
    span 内联元素：内联元素会在同一行显示，不可以设置宽、高等，内部不可以容纳块级元素

三：思维导图

由于我思维导图html和css是一起的，所以这张图下节css还能继续用