前端基础 HTML

最新推荐文章于 2024-07-25 11:26:35 发布

陈曦灵

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量497

点赞数

分类专栏： IT学习之旅前端 html 文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_57807561/article/details/128325846

版权

IT学习之旅同时被 3 个专栏收录

91 篇文章 3 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

前端基础 HTML

概述

HTML：Hyper Text Markup Language，超文本标记语言
- 超文本：包括文字、图片、音频、视频、动画等
HTML发展史：
- 1993年6月：HTML
- 1995年11月：HTML2.0
- 1996年1月14日：HTML3.2
- 1997年12月8日：HTML4.0
- 1999年12月24日：HTML4.01
- 2000年1月26日：XHTML1.0
- 2001年1月26日：XHTML1.1
- XHTML2.0
- 2013年5月6日：HTML5
  - HTML5提供了新的元素和特性，同时也建立了一些新的规则
  - 提供了许多新功能：
    - 网页实现动态渲染图形、图表、图像和动画
    - 无需安装插件可直接使用的网页播放视频
优势：
- 知名浏览器对HTML5的支持
- 市场需求大
- 跨平台
标准
- W3C：World Wide Web Consortium，万维网联盟
  - 成立于1994年，Web技术领域最权威和最具影响力的国际中立性技术标准机构
  - 网址：
    - http://www.w3.org/
    - http://www.chianw3c.org/
- W3C标准
  - 结构化标准语言：HTML、XML
  - 表现标准语言：CSS
  - 行为标准语言：DOM，ECMAScript
常见开发工具：
- 记事本
- DreamWeaver
- IDEA
- WebStorm
- Visual Studio Code
调试方法：浏览器->右键->查看网页源码 / 审查元素 / 检查
基本结构
- 其中：
  - 成对出现的标签为双标签，如< head>和< /head>，分别称为开放标签和闭合标签
  - 单个出现的标签为单标签

<!DOCTYPE html> <!--文档类型声明-->
<html lang="en">
<!--网页头部-->
<head>  <!--头部开放标签-->  
	<!--meta为描述标签，用于描述网站基本信息-->
    <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>

基本操作

基本标签

< meta>描述标签
- 描述网站基本信息
- 一般用于做SEO(网页优化）

 <!--编码方式--> 
    <meta charset="UTF-8">
    <!--搜索该网站的关键字-->
    <meta name="keywords" content="HTML学习">
    <!--对网站的描述-->
    <meta name="description" content="网页基本信息学习">

标题标签
- 一级标题：< h1>< /h1>
- 二级标题：< h2>< /h2>
- 三级标题：< h3>< /h3>
- 四级标题：< h4>< /h4>
- 五级标题：< h5>< /h5>
- 六级标题：< h6>< /h6>
段落标签：< p>< /p>
水平线标签 < hr/>
字体样式标签：
- 粗体：< strong></ strong>
- 斜体：< em>< /em>
特殊符号：
- 空格： 
- 大于号：>
- 小于号：<
- 版权符：©
注释：< !- -注释内容- ->
图像标签：< img />
- 属性：
  - src：地址
  - title：鼠标悬停提示文字
  - alt：图片失效替代文字
  - width：图片宽度
  - height：图片高度
超链接标签：< a>链接文本/图片< /a>
- 属性
  - href：跳转地址
  - target：打开方式
    - _self：在当前窗口打开
    - _blank：在新窗口打开下
- 锚点链接
  - 跳转目标位置：< a id=“value”>< /a>
  - 起始位置：< a href=“#value”>< /a>
```
<a id="top">点击我回到顶部</a>
<a href="#top"></a>
```
- 效果：点击我回到顶部
列表标签
- 无序列表：< ul>< /ul>
  - 子标签：< li>< li>
- 有序列表：< ol>< /ol>
  - 子标签：< li>< li>
- 自定义列表：< dl>< /dl>
  - 子标签：
    - 列表标题：< dt>< /dt>
    - 列表内容：< dd>< /dd>

表格标签：< table>< /table>

行：< tr>< /tr>
列：< td>< td>
跨列合并：colspan=“跨行数”
跨行合并：rowspan=“跨列数”

<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td colspan="2">跨2列</td>
    </tr>
    <tr>
        <td rowspan="2">跨2行</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
    </tr>
</table>

表单标签：< form>< /form>

metho：发送方法，get/post
action：发送地址
输入框：< input />
- name：标识名
- type：输入框类型
  - text：文本
  - password：密码
  - submit：提交按钮
  - reset：重置按钮
  - number：数字
  - file：文件上传
  - email：邮箱格式
- placeholder：提示文字
按钮：< button>< /button>
下拉框：< select>< /select>
文本域：< textarea>< /textarea>

<form method="post" action="index.html">
    <!--文本输入框-->
    名字:<input name="username" type="text" placeholder="请输入用户名"/>
    <!--密码输入框-->
    密码:<input name="password" type="password" placeholder="请输入密码"/>
    <input type="submit" name="sub" value="提交"/>  <!--提交按钮-->
    <input type="reset" name="reset" value="重置"/> <!--重置按钮-->
</form>

音/视频标签：
- 音频：< audio>< /audio>
- 视频标签：< viedo>< /viedo>
- 属性：
  - src：音频/视频地址
  - controls：控制条
  - autoplay：自动播放
内联框架标签< ifram></ ifram>
- src：地址
- name：标识名
- widht：宽度
- height：高度
- framboder：边框

基本元素

块元素：独占一行
- p，h1~h6
行内元素：并排显示
- a，strong，em

基本页面结构

header：网页头部区域
footer：网页尾部区域
section：页面独立区域
article：独立文章区域
aside：侧边栏
nav：导航栏

<!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> 
    <header>网页头部</header>
    <section>网页主体</section>
    <footer>网页尾部</footer>
</body>
</html>