HTML学习笔记-CSDN博客

本文链接：https://blog.csdn.net/CTIA_OPEN/article/details/137972754

一.HTML

1.语法规范

1.1基本语法概述

由尖括号包围关键词 <html>
大部分成对存在 <html> </html> 双标签
特殊标签必须是单标签 <br />

1.2标签关系

包含（父子）关系：

  <head>
      <title></title>
  </head>

并列(兄弟 )关系：

  <html>
      <head></head>
      <body></body>
   </html>

2.基本结构标签

2.1第一个HTML网页

每个页面都有一个基本的结构标签（骨架标签），页面内容在基本标签上书写。

  <html>
      <head>
          <title>第一个页面</title>
      </head>
      <body>
          键盘敲烂，工资过万
      </body>
  </html>

注意：后缀名必须是.html或.htm

效果：

2.2基本结构标签总结

2.3开发工具

2.4快捷键

快速复制某一行： shift +alt+下箭头
选中多个相同的词：ctrl+d
添加多个光标：ctrl+alt+箭头（上/下）
全局替换某个单词：ctrl+h
快速跳到某一行：ctrl+g
选择某个区块：shift+alt
放大/缩小：ctrl+/-

3.网页开发工具

VSCode的使用：

双击打开软件
新建文件（Ctrl+N）
保存（Ctrl+S），注意要保存为.html文件
Ctrl+加号键，Ctrl+减号键可以放大缩小视图
生成页面骨架结构。输入!（英文状态下）按下Tab键

3.1文档类型声明标签

<!DOCTYPE>:告诉浏览器HTML版本

 <!DOCTYPE html>

这句代码的意思是：当前页面采取的是HTML5版本显示网页

写到第一行（自动生成）
<!DOCTYPE>不是html标签是文档类型声明标签

3.2lang语言种类

用来定义当前文档的显示语言

1.en定义语言为英语（英文网站）
2.zh-CN定义语言为中文（中文网页）

对于文档显示不管选择什么语言都能正常显示

3.3字符集

字符集十多个字符的集合，以便计算机能够识别和存储各种文字

在<head>标签内，可以通过<meta>标签的<charset>属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8">

charst常用的值：GB2312、BIG5、GBK、和UTF-8,其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

注意：上面的语法是必须要写的语法，否则可能引起乱码。一般情况下统一使用“UTF-8”编码。

4.常用标签

4.1标签语义

记住标签含义！！！让页面结构更清晰

4.2标题标签 <h1> - <h6>(重要性递减)

<h1>-<h6>为六个等级的网页标签（head缩写）

<h1>我是一级标题</h1>

加标题字体加粗，字号变大
一个标题独占一行

效果：

4.3段落和换行标签（重要）

<p>定义段落，将整个网页分为若干个段落

  <p>我是一个段落标签</p>

文本根据浏览器窗口大小自动换行
段落与段落之间保有空隙
<br />强制换行

特点：

单标签
是简单的另起一行跟段落不一样

效果：

4.4文本格式化标签

效果：

4.5div和span盒子标签

<div>和<span>没有语义，就是一个盒子，用来装内容的

    <div>我是一个div标签我一个人独占一行</div>
    <div>我是一个div标签我一个人独占一行</div>
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐</span>

<div>标签用来布局，独占一行。大盒子
<span>标签用来布局，一行可以有多个<span>.小盒子

效果：

4.6图像标签和路径（重点）

4.6.1.图像标签

<img src="图像URL"/>

单标签
src是<img>标签的必须属性，用于指定文件的路径和文件名
属性即属于图像标签的特性

宽度和高度一般只修改一个

注意：

可以有多个属性，属性写在标签后面。
属性间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
属性采取键值对的格式，即key=“value”的格式，属性=“属性值”

4.6.2路径（前期铺垫）

目录文件夹：普通文件夹只不过放了我们做页面所需要的相关素材比如html文件图片等
根目录：打开目录文件夹的第一层

2. 相对路径

相对路径以引用文件所在的位置为参考基础，而建立出的目录路径（图片相对于ht的位置）

3. 绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径。

语法格式：

1.同一级路径

<img src="玫瑰.jpg">

2.下一级路径

 <img src="img/帕恰狗.jpg">

3.绝对路径

    <img src="C:\Users\lxy\Desktop\前端\案例\玫瑰.jpg">
    <img src="https://stu.ityxb.com/img/header_logo.527c8acc.png" />

4.7超链接标签

从一个页面连接到另一个页面

4.7.1链接语法格式

  <a href="跳转目标" target="目标窗口的弹出方式"> </a>

4.7.2 链接分类

1. 外部链接：

 <a href ="http://www.baidu.com">百度</a>

2.内部链接：

 <a href="gongsijianjie.html">公司简介</a>

3.空链接：

 <a href="#">公司地址</a>

4.下载链接

<a href="玫瑰.zip">下载文件</a>

5.网页元素链接

<a href="http://www.baidu.com"><img src="玫瑰.jpg" alt=""></a>

6.锚点链接：可去往页面中的不同位置

<a href="#live">个人生活</a><br />
      <h3 id="live">个人生活</h3>

5.HTML中的注释和特殊字符

注释：便于阅读理解不显示在页面中

  <!--巴拉巴拉-->

快捷键：ctrl+/

特殊字符：

6.表格标签

6.1表格作用：

用来显示数据让数据规整

6.2表格的基本语法

  <table>
      <tr>
          <td>
          单元格内的内容
          </td>
      </tr>
  </table>

<table>定义表格
<tr>定义行，必须嵌套在table内
<td>定义单元格嵌套在<tr>中内容

6.3表头单元格标签

常用于表格第一行文字会加粗居中显示

效果：

6.4表格属性

6.5表格结构标签

表格分为表格头部和表格主体
<thead>标签表格头部区域内部必须有<tr>标签一般第一行
<tbody>表格主体区域
都是放在<table>标签中的

作用：可以更好地分清表格结构

6.6合并单元格

把多个单元格合并为一个

方式：

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

步骤：

确定是跨行还是跨列
找到目标单元格。写上合并方式=合并的单元格数量。比如：<td colspan="2"></td>
删除多余单元格

语法格式：

    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>

效果：

7.列表标签

用来布局——整齐整洁有序

分类：有序、无序、自定义

7.1无序列表

<ul>无序列表 <li>列表项

      <ul>
          <li>榴莲</li>
          <li>草莓</li>
          <li>芒果</li>
      </ul>

各个列表项无顺序
只能放<li>标签
<li>标签里可以放任何元素
带有自己的样式属性，实际使用时，用css设置

7.2有序列表

只能放li标签

li标签里可以放任何元素

带有自己的样式属性，实际使用时，用css设置

  <ol>
      <li>刘德华1000</li>
      <li>刘德100</li>
      <li>刘10</li>
  </ol>

7.3自定义列表（重点）

使用场景：

常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<dl>用于定义描述列表，与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用

语法格式：

  <dl>
      <dt>名词1</dt>
      <dd>名词解释1</dd>
      <dd>名词解释2</dd>
      <dd>名词解释3</dd>
  </dl>
  <dl>
      <dt>关注我们</dt>
      <dd>新浪微博</dd>
      <dd>官方微信</dd>
      <dd>联系我们</dd>
  </dl>

<dl>里面只能含<dt>和<dd>
一个<dt>常有多个<dd>进行描述，<dt>和<dd>个数没有限制，是兄弟关系

7.4总结

8表单标签

8.1为什么需要表单

收集用户信息

8.2表单的组成

表单域、表单控件（表单元素）、提示信息

8.3表单域

包含表单元素的区域

<form>标签用于定义表单域，实现用户信息的收集和传递，可将表单元素的信息提交给服务器

  <form action="url地址" method="提交方式" name="表单域名称">
      各种表单元素控件
  </form>

暂时不需要提交数据

在写表单元素前，应有表单域把他们进行包含
表单域是form标签

8.4表单控件

允许用户输入或选择的内容控件

input输入表单元素
select下拉表单元素
textarea 文本域元素

8.4.1 input 表单元素

用于收集用户信息
单标签，包含type属性，type属性设置不同的属性值用来指定不同的控件类型

<input type="属性值">

name和value 是每个表单元素的属性值，主要给后台人员使用
name表单元素的名字，单选按钮和复选框要有相同的name值
checked属性主要针对单选按钮和复选框，主要作用一打开页面就可以默认选中某个表单元素
maxlength是用户可以在表单中输入的最大字符数，一般较少使用

8.4.2 label表单

<lable>标签为input元素定义标注（标签），可绑定一个表单元素，点击标签内文本时，浏览器会自动将焦点转到或选择对应的表单元素上，用来增加用户体验

<lable for="sex">男</lable> <input type="radio" name="sex" id="sex">

8.4.4 select表单元素

<select>下拉表单元素

使用场景：

作用：节约页面空间

语法：

  <form>
          籍贯：
          <select>
              <option>山东</option>
              <option>广东</option>
              <option>陕西</option>
          </select>
  </form>