HTML基础

不是白羊座

已于 2023-02-28 18:16:37 修改

阅读量191

点赞数 1

文章标签： html 前端

于 2023-02-22 23:07:49 首次发布

本文链接：https://blog.csdn.net/xiaose10086/article/details/129158373

版权

一. 基础班学习路线

html5 -> CS33基础 -> H5C3提高 -> 品优购电商网站开发

二.HTML简介

1. 网页

(1). 什么是网页

网站：网页的集合
网页：网站中的一“页”，通常是HTML格式的文件，需要通过浏览器阅读，是构成网站的基本元素，通常由文字，图片，链接，声音等元素构成，俗称为HTML文件

(2). 什么是HTML

HTML指的是超文本标记语言（不是一种编程语言），是用来描述网页的一种语言
超文本的含义：
1.可以加入图片，声音。动画，多媒体等内容（超越了文本限制）
2.可以从一个文件跳到另一个文件，与世界各地主机的文件链接（超级链接文本）

(3). 网页的形成

网页由利用html标签描述的网页元素组成，通过浏览器解析展示给用户

前端人员开发代码 -> 浏览器显示代码（解析、渲染） -> 生成最后的Web页面

2. 常用的浏览器

3. Web标准

由W3C（万维网联盟）组织和其他标准化组织制定的一系列标准的集合

(1). Web标准的构成

主要包括结构，表现，行为三方面
结构：用于对网络元素进行整理和分类，现阶段主要学习HTML
表现：用于设置网页元素的版式，颜色，大小等外观样式，主要指的是CSS
行为：是指网页模型的定义及交互的编写，现阶段主要学习Javascript
Web标准提出的最佳体验方案：结构（写到HTML文件）、样式（写到CSS文件）、行为（写到JavaScript文件）相分离

三. HTML标签

1. HTML语法规范

(1). 基本语法概述

所有标签包含在 <> 中间且大部分情况下标签都是成对出现（双标签）
例如：

<html> 开始标签
</html> 结束标签

特例：
单标签 <br />

(2). 标签关系

包含关系和并列关系

2. HTML基本结构标签（也称为骨架标签）

(1). 第一个HTML

<!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>利用vscode创建的第一个页面</title>
</head>
<body>
    王旭凯天下第一
</body>
</html>

标签名	定义	说明
`<html></html>`	HTML标签	页面中最大的标签，我们称之为根标签
`<head></head>`	文档的头部	在head标签中必须要设置的标签是title
`<title></title>`	文档的标题	让页面拥有一个属于自己的标题
`<body></body>`	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的
`<!DOCTYPE>`	文档类型声明标签	告诉浏览器使用哪种HTML版本来显示网页必须位于文档中最前面的位置，处于 `html` 标签之前
`lang`	语言种类	用来定义当前文档显示的语言，例如en定义语言为英语，zh-CN就是中文网页，但定义为en也可以显示中文，反之同理
`<meta charset="UTF-8">`		规定HTML文档应该使用哪种字符编码，常用值有：GB2312, BIG5, GBK和UTF-8（万国码）

3. HTML常用标签

<!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>
    <h1>王旭凯</h1>
    <h2>王旭凯天下第一</h2>
    <p><a href="https://baike.baidu.com/item/%E5%B8%85%E5%93%A5/18510?fr=aladdin" target="_blank">王旭凯 百度百科</a>
    <p>王旭凯天下第一王旭凯天下第一王旭凯天下第一王旭凯天下第一王旭凯天下第一
    王旭凯天下第一王旭凯天下第一王旭凯天下第一王旭凯天下第一王旭凯天下第一
    王旭凯天下第一王旭凯天下第一王旭凯天下第一王旭凯天下第一王旭凯天下第一
    王旭凯天下第一王旭凯天下第一王旭凯天下第一王旭凯天下第一王旭凯天下第一</p>
    <p>王旭凯天下第一王旭凯天下第一王旭凯天下第一王旭凯天下第一王旭凯天下第一
    王旭凯天下第一王旭凯天下第一王旭凯天下第一王旭凯天下第一王旭凯天下第一
    王旭凯天下第一老子要换行<br />哦呵呵王旭凯天下第一王旭凯天下第一
    王旭凯天下第一王旭凯天下第一王旭凯天下第一王旭凯天下第一王旭凯天下第一
    王旭凯天下第一王旭凯天下第一王旭凯天下第一王旭凯天下第一
    <strong>王旭凯天下第一加粗版</strong>
    <em>王旭凯天下第一倾斜版</em>
    <del>王旭凯天下第一删除线版</del>
    <ins>王旭凯天下第一下划线版</ins>
    </p>
    <div>我是一个独占一行的盒子</div>123
    <div>我是一个独占一行的盒子</div>123<br />
    <span>我是一行可以放好多个的盒子</span>
    <span>我是一行可以放好多个的盒子</span>
    <span>我是一行可以放好多个的盒子</span><br />
    <img src="王旭凯.jpg" title="大帅逼王旭凯" width="600" height="750" border="30"/>
    <p>
        <img src="王旭凯1.jpg" alt="王旭凯太帅导致图片无法显示"/>
    </p>
</body>
</html>

标签	写法	语义	特点
标题标签 `<h1></h1> - <h6></h6>`	`<h1>我是一级标题</h1>`	作为标题使用，并且依据重要性递减	加了标题的文字会加粗变大；一个标题独占一行
段落标签 `<p></p>`	`html<p>我是一个段落</p>`	可以把html文档分割为若干个段落	文本在一个段落中会根据浏览器窗口大小自动换行；段落和段落之间保有空隙
换行标签 `<br />`	`我是一堆字<br />我是下一行的一堆字`	强制换行	是个单标签；只是简单的换行，不会像段落一样加入一些垂直的间距
文本格式化标签加粗 `<strong></strong>或<b></b>`	`<strong>我是被加粗的字</strong>`	突出重要性
文本格式化标签倾斜 `<em></em>或<i></i>`	`<em>我是倾斜的字</em>`	突出重要性
文本格式化标签删除线 `<del></del>或<s></s>`	`<del>我是加删除线的字</del>`	突出重要性
文本格式化标签下划线 `<ins></ins>或<u></u>`	`<ins>我是加下划线的字</ins>`	突出重要性
`<div></div>` 标签	`<div>我是一个独占一行的盒子</div>`	无语义	一个用来装内容的盒子，表示分割、分区；一行只能放一个的大盒子
`<span></span>` 标签	`<span>我是一行可以放好多个的小盒子</span>`	无语义	一个用来装内容的盒子，表示跨度、跨距；一行可以放好多个的小盒子
图像标签`<img>`	`<img src="图像url" alt="我是图片无法显示时替换的文本" title="我是鼠标移动到图片上时显示的文本" width="20" height="20" border="23" />`		src是 `<img>` 标签的必须属性，用于指定图像文件的路径和文件名；alt是替换文本，当图片无法显示时替换为此文本；title是鼠标移动到图片上时显示的文本；wigth是图像的宽度；height是图像的高度；border是图像边框的粗细
超链接标签 `<a></a>`	`<a herf="跳转目标" target="目标窗口的弹出方式">文本或图像</a>`	从一个页面链接到另一个页面	herf用于指定连接目标的url地址，是必须属性；target用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式
注释标签	`<!--我是注释-->`

特殊字符后面要加分号

图像标签扩展

路径：页面中的图片会非常多，通常我们会建一个文件夹来存放这些图像文件，这时再查找图像文件，就需要路径来指定图像的位置
路径分为相对路径和绝对路径
相对路径：图片相对于HTML文件的位置
绝对路径：目录下的绝对位置或完整的网络地址

相对路径分类	符号
图片位于HTML同一级	`<img src="wangxukai.jpg" />`
图片位于HTML下一级	`<img src="kaikaituku/wangxukai.jpg" />`
图片位于HTML上一级	`<img src="../wangxukai,jpg">`

超链接标签扩展

外部链接：<a href="http://www.baidu.com">百度</a>
内部链接：网站内部页面之间相互链接 <a href="直接填写内部页面名称">我是文本</a>
空链接：当没有确定连接目标时<a href="#">我是文本</a>
下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件
网页元素链接：网页中各种元素都可添加超链接
锚点链接：点击后快速定位到页面中的某个位置
href属性中设置属性值为“#名字”的格式
找到目标位置标签，添加id属性 = 刚才的名字

4.HTML表格标签

表格是用来展示数据的

(1). 表格的基本语法与相关标签

在这里插入图片描述

(2). 表格的相关属性

这些属性写在table里面，即<table align=""> </table>

(3). 合并单元格

在这里插入图片描述

5. HTML 列表标签

列表是用来布局的
在这里插入图片描述

(1).无序列表

在这里插入图片描述

(2). 有序列表

在这里插入图片描述

(3). 自定义列表

在这里插入图片描述

6. HTML表单标签

在这里插入图片描述

(1). 表单域

在这里插入图片描述

(2). 表单元素

在这里插入图片描述

input输入表单元素

在这里插入图片描述

radio和checkbox包含的各选项必须拥有同样的name属性，才能实现多选一

select下拉表单元素

在这里插入图片描述

textarea文本域元素

在这里插入图片描述

<!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>
    <h4>青春不常在，快找凯凯谈恋爱</h4>
    <table width="700">
        <!-- 第一行 -->
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" id="man"><label for="man">男</label>
                <input type="radio" name="sex" id="woman"><label for="woman">女</label>
                <input type="radio" name="sex" id="othersex" checked="checked"><label for="othersex">其他</label>
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日：</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>1999</option>
                    <option>2000</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                    <option>2004</option>
                    <option>2005</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                </select>
                <select>
                    <option>--请选择日期--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                </select>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区：</td>
            <td><input type="text" value="请输入您的住址"></td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况：</td>
            <td>
                <input type="radio" name="ms" id="yihun" checked="checked"><label for="yihun">已婚</label>
                <input type="radio" name="ms" id="liyi"><label for="liyi">离异</label>
                <input type="radio" name="ms" id="sangou"><label for="sangou">丧偶</label>
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>学历状况：</td>
            <td><input type="text" value="请输入您的学历状况"></td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>您欣赏凯凯哪一点？（可多选）</td>
            <td>
                <input type="checkbox" name="love" id="smart"> <label for="smart">机智勇敢，证明递归的错误</label>
                <input type="checkbox" name="love" id="rich"> <label for="rich">富有多金，剪视频一个月三千</label>
                <input type="checkbox" name="love" id="handsame"> <label for="handsame">帅气逼人，没什么好说的</label>
                <input type="checkbox" name="love" id="sb"> <label for="sb">手工能力极强，三小时自制网线</label>
            </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>个人简介：</td>
            <td><textarea>请进行简要概述您认为您能吸引到凯凯的亮点</textarea></td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <td><input type="submit" value="免费登记"></td>
        </tr>
        <!-- 第九行 -->
        <tr>
            <td></td>
            <td><input type="checkbox" checked="checked"> 我同意登记条款</td>
        </tr>
        <!-- 第九行 -->
        <tr>
            <td></td>
            <td><a href="#" target="_blank">我是会员，免登记与凯凯联系</a></td>
        </tr>
        <!-- 第十行 -->
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>我是一个辫太</li>
                    <li>我会把凯凯折磨失禁</li>
                    <li>永远不把凯凯放回宿舍</li>
                </ul>
            </td>
        </tr>
        <p>
            附赠凯凯玉照一张，<a href="王旭凯.jpg" target="_blank">点击查看</a>
        </p>
    </table>
</body>
</html>