前端基础—HTML

最新推荐文章于 2023-01-09 21:26:54 发布

tong666ge

最新推荐文章于 2023-01-09 21:26:54 发布

阅读量114

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_57138526/article/details/125850658

版权

一.什么是HTML、CSS？

1.是做网站的编程语言
2.浏览器代码解析后的样子就是我们看到的网站，如何看到网站的原始代码呢？通过鼠标右键选择查看网页源代码。
3.一个网站由N多个网页组成的。每一个网页 .html文件

Web前端的三大核心技术

HTML：结构
CSS ：样式
JavaScript : 行为

HTML基础结构与属性

HTML：超文本标记语言

超文本：文本内容 + 非文本内容（图片、视频、音频等)
标记：<单词>
语言：编程语言
标签可以上下排列，也可以组合嵌套
标签的属性：来修饰标签的，设置当前标签的一些功能。

<标签 属性=“值” 属性2=“值2”>

HTML初始代码

每个.html文件都有的代码叫做初始代码，要符合html文件的规范写法
注释写法

<!-- 注释内容 -->在浏览器中看不到，只能在代码中看到

意义：

1.把暂时不用的代码注释起来，方便以后使用
2.对开发人员进行提示

快捷添加注释与删除注释：

1.ctrl + /
2.shift + alt +a

<!DOCTYPE html>  文档说明：告诉浏览器这是一个html文件
<html lang="en"> html最外层标签：包裹着所有html文件。lang="en"表示是一个英文网站 lang="zh-CN"表示一个中文网站
<head>
    <meta charset="UTF-8"> 元信息：是编写网页中的一些辅助信息。charset="UTF-8"是国际编码，让网页不出现乱码的情况
    <title>Document</title> 设置网页的标题
</head>
<body>
    显示网页内容的区域
</body>
</html>

HTML语义化

好处：

1.在没有CSS的情况下，页面也能呈现出很好的内容结构
2.有利于SEO，让搜索引擎爬虫更好的理解网页
3.方便其他设备解析（如屏幕阅读器、盲人阅读器）
4.便于团队开发和维护

标题与段落

标题 —> 双标签（p标签) < p >…< /p >

在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签

段落 —> 双标签（h标签）< h >…< /h >

文本修饰标签

强调 —> 双标签
< strong >：表示强调，会对文本就行加粗
< em > ：表示强调，会对文本进行斜体
< sub > 、< sup > ：下标文本、上标文本
< del > 、< ins > ：删除文本、插入文本（配合使用）

图片标签与图片属性

< img > ：图片（单标签）
src ：引入图片的地址
alt ：当图片出现问题的时候，可以显示一段友好的提示文字
title ：提示信息
width、height ：图片大小

       <p>
            <strong>下标示例：</strong>H<sub>2</sub>O
        </p>
        <p>
            <strong>上标示例：</strong>a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
        </p>
        <p>
            <strong>删除文本和插入文本示例：</strong>原价：<del>300</del>，折扣价：<ins>100</ins>
        </p>

引入文件的地址路径

相对路径

"./"在路径中表示当前路径
"…/"在路径中表示上一级路径

绝对路径：就是直接引入

跳转链接

a —> 双标签 < a >< /a >
href属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下：在当前页面打开 _self 新窗口打开 _blank
base —> 单标签：改变链接的默认行为的

跳转锚点

实现一

#号
id属性

        <a href="#html">THML</a>
        <a href="#css">CSS</a>
        <a href="#javascript">JavaScript</a>

		<h2 id="html">html超文本标记语言</h2>
		...
		<h2 id="css">css层叠样式表</h2>
		...
		<h2 id="javascript">js脚本</h2>

实现二

#号
name属性（注意name属性加给的是a标签）

        <a href="#html">THML</a>
        <a href="#css">CSS</a>
        <a href="#javascript">JavaScript</a>

        <a name="html"></a>
        <h2>html超文本标记语言</h2>
        ...
        <a name="css"></a>
        <h2>css层叠样式表</h2>
        ....
        <a name="javascript"></a>
        <h2>js脚本</h2>

特殊符号

编写一些文本时，经常会遇到输入法无法输入的字符，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。（用&符号）

& + 字符
解决冲突

列表标签

无序列表

< ul >、< li > : 列表的最外层容器、列表项（符合嵌套规范）

注：ul和li必须是组合出现的，他们之间是不能有其他标签的
type属性：改变前边标记的样式

有序列表

< ol >、< li > : 列表的最外层容器、列表项

有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表

定义列表

列表项需要添加标题和对标题进行描述的内容

< dl > ：定义列表
< dt > ：定义专业术语或名词
< dd > ：对名词进行解释和描述

        <dl>
            <dt>HTML</dt>
            <dd>超文本标记语言</dd>
            <dt>CSS</dt>
            <dd>层叠样式表</dd>
            <dt>JavaScript</dt>
            <dd>网页脚本语言</dd>
        </dl>

嵌套链表

列表之间可以互相嵌套形成多层级列表

	<dl>
		<dt>中国</dt><dd>
		<dl>
		<dt>辽宁省</dt><dd>沈阳</dd><dd>大连</dd><dd>丹东</dd></dl>
		<dl>
		<dt>山东省</dt><dd>济南</dd><dd>青岛</dd><dd>烟台</dd></dl>
		</dd>
		<dt>美国</dt><dd>
		<dl>洛杉矶</dd><dd>纽约</dd>
		</dl>

表格标签

< table > :表格的最外层容器
< tr > :定义表格行
< th > :定义表头
< td > :定义表格单元
< caption >:定义表格标题

注：之前是有嵌套关系的，要符合嵌套规范

语义化标签

< tHead >//表头只能一个
< tBody >//可多个
< tFoot >//表尾只能一个

注：在一个table中，tBody是可以出现多次的，但是tHead、tFoot只能出现一个

表格属性

boder：表格边框（用于table标签）
cellpadding：单元格内的空间（用于table标签）
cellspacing：单元格之间的空间（用于table标签）
rowspan：合并行（用于td标签）
colspan：合并列（用于th标签）
align：左右对齐方式（用于tr标签） left、center、right
valign：上下对齐方式 top、middle、bottom（用于tr标签）

表单标签

< form action=“” >:表单的最外层容器
属性：action：提交页面的地址
< input type=“” > -> 单标签：用于搜集用户信息，根据不同的type属性值，展示不同的控件,如输入框、密码框、复选框等

type属性

< textarea >：多行输入字段（文本域）
< select >、< option >：下拉菜单
< label >：辅助菜单，可扩大鼠标选中的范围
属性：

selected：默认被选中
size：显示的数量
multiple：可多选

< div >与< span >

div标签
div全称为division，“分割、分区”的意思，< div >标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在< div >标签中，< div >中还可以嵌套多层< div >，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span标签
用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行