HTML基础

Aiwei petter

于 2024-05-21 21:22:16 发布

阅读量495

点赞数 10

分类专栏：前端文章标签： html 前端 web安全 python 网络安全安全 apache

本文链接：https://blog.csdn.net/m0_70389551/article/details/139102065

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML定义

HTML：超文本标记语言(HypeText Mark-up Language)
特点：
- html是一种标记语言(而不是向python、c等编程语言)。
  - 标记：即HTML标签
- 用于：描述网页(构建网页的结构和内容)。

HTML基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>：文档说明(用来指定页面所用的html的版本)
- 此处为：声明一个html5的文档。
<html>、</html>标签：
- 向浏览器声明，整个页面从哪里开始，到哪里结束。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：
- 在移动设备浏览网页时，网页不缩放
<meta charset="UTF-8">：
- 设置网页编码格式为‘utf-8’，避免出现中文乱码情况。
<head>、</head>标签：定义网页的头部。
- 对网页标题、编码格式、css和js文件的引入进行设置
<body>、</body>标签：编写网页上的显示内容

HTML文件命名

文件扩展名为.html或.htm
文件名中不能包含特殊符号(如空格、$等)
(在Windows的VSCode中)文件名不区分大小写。
网站首页文件名默认为index.htm或index.html

HTML文件打开方式

直接双击.html文件
在VScode中安装Live Server插件
- 鼠标右建/运行Open with Live Server

常用的HTML标签

1、成对出现的标签
- h标题标签
  - h1(一级标题标签)、h2(二级标题标签)、h3(三级标题标签)、h4……
- div容器标签
  - div容器标签，可以嵌套其他标签
  - 仅是用于布局的，没有特殊语义
- p段落标签
- em字体倾斜标签
- b字体加粗标签
- a超链接标签
  - href属性：填写链接地址
2、单个出现的标签
- br换行标签
- img标签：用于存放图片
  - src属性：图片的路径(相对或绝对路径)
  - alt属性：图片加载不出来时，显示的提示信息的文字
- hr标签：输出一条水平线
3、列表标签
- 无序标签：ul + li (成对使用)
  - ul标签：定义无序列表
  - li标签：定义无序列表的列表项
- 有序标签：ol + li (成对使用)
  - ol标签：定义有序列表
  - li标签：定义有序列表的列表项
- 注意：ul与li(或ol与li)需要成对使用。
4、table表格标签
- table标签：定义一个表格
- caption标签：定义表格的名称
  - tr标签：定义表格中的一行
    - td标签：定义表格中的列
    - th标签：定义表格的表头
5、form表单标签
- 表单：将前端用户的输入，提交到后端的web服务器。
- form标签：定义整体的表单区域
  - label标签：表单元素的文字标注标签(即文字标注)
  - input标签：表单元素的用户输入标签(即义不同类型的用户输入数据方式)
    - placeholder属性：提示用户输入的
      - 当用户输入文字后，提示文字被输入的文字覆盖
    - type属性
      - type='text'：定义文本输入框
      - type='password'：定义密码输入框
      - type='radio'：定义单选输入框
      - type='checkbox'：定义复选框
      - type='file'：定义上传文件
      - type='submit'：定义提交按钮
      - type='reset'：定义重置按钮
      - type='button'：定义一个普通按钮
    - 例如：定义一个提交按钮
      - <input type="submit" value="提交">
    - 例如：定义一个性别的单选输入框
      - <input type="radio">男
      - <input type="radio">女
    - 例如：定义一个密码输入框
      - <input type="password">
  - textarea标签：定义多行文本输入框
    - 例如：定义一个多行文本输入框
      - <textarea></textarea>
  - select标签：定义下拉列表
    - option标签：定义下拉列表选项
    - 注意：select标签与option标签需成对使用。
    - 例如：定义一个籍贯的下拉列表
      - <select>
        <option>北京</option>
        <option>河北</option>
        <option>河南</option>
      - </select>

Aiwei petter

关注

10
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

HTML：超文本标记语言，描述网页(构建网页的结构和内容)、HTLM基本结构、HTML文件命名、HTML文件的打开方式、常用的HTML标签，例如成对出现的标签、单个出现的标签、列表标签、table表格标签、form表单标签
复制链接

扫一扫