Web前端开发技术——HTML5、CSS3、JavaScript

666HZ666

已于 2025-04-25 21:34:53 修改

阅读量1.3k

点赞数 18

分类专栏：前端文章标签：前端 html5 css3

于 2025-04-22 22:55:11 首次发布

本文链接：https://blog.csdn.net/2301_79690805/article/details/147432034

版权

前端专栏收录该内容

3 篇文章

订阅专栏

一、HTML

1.基本结构

<html lang ="en">
 <head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Web网页标题</title>
 </head>
 <body>
 ...
 </body>
</html>

2.meta

meta标记用来描述一个HTML网页文档的属性，也称为元信息

meta属性主要分为两组：

name属性与content属性。name属性用于描述网页，name属性的值所描述的内容通过content属性表示
http-equiv属性与content属性。http-equiv属性用于提供HTTP协议的响应头报文，http-equiv属性的值所描述的内容通过content属性表示

属性	值
name	author description keywords generator
http-equiv	content-type expires refresh set-cookie
content	some_text

3.标记类型

<br><br/>	换行
<hr><hr/>	水平分割线
<link>	链接标记
<strong></strong>	标准粗体
<p></p>	段落
<comment></comment>	注释
&nbsp	插入空格
<!DOCTYPE>	HTML或XHTML规范
<!-- -->	注释

4.标题字标记

由h1~h6共六种标记组成，h1标记定义最大的标题字，h6标记定义最小的标题字

5.对齐方式——align属性

left	向左对齐
right	向右对齐
center	居中对齐
justify	两端对齐

6.文本修饰标记

<b></b>或<strong></strong>	粗体
<i></i>或<em></em>	斜体
<small></small>	变小字号
<big></big>	变大字号

7.字体标记——font

<font face = "" size = "" color = ""></font>

size	字号（+，-）
color	颜色（rgb函数，十六进制数，颜色英文名称）
face	字体（可以有多个值，用逗号分隔，使用方式为从左向右依次选用）

8.段落标记——p

<p align = "left|center|right|justify">段落正文内容</p>

9.换行标记——br

10.水平分隔线标记——hr

<hr width = "" size = "" color = "" align = "" noshade>

width	像素或百分比	设置水平线宽度
size	整数，单位px	设置水平线高度
color	rgb或十六进制或英文	设置水平线颜色
align	left或center或right	设置水平线对齐方式

11.段落缩进标记——blockquote

该标记引用的内容能够向右缩进5个英文字符的位置，并在其内容的周围增加外边距

12.预格式化标记——pre

在html中利用成对的<pre></pre>标记对网页中的文字段落进行预格式化，浏览器会完整保留设计者在源文件中所定义的格式，包括各种空格，缩进以及其他特殊格式

13.无序列表——<ul></ul>

<ul></ul>两者之间插入若干个列表项<li></li>标记

<ul type = "">
    <li type = "">项目名称1</li>
    <li type = "">项目名称2</li>
</ul>

无序列表标记的type属性及其说明
disc	实心圆形
circle	空心圆形
square	实心正方形

14.有序列表——<ol></ol>

<ol></ol>两者之间插入若干个列表项值<li></li>标记

<ol type = "" start = "">
    <li type = "" value = "n">项目名称1</li>
    <li type = "" value = "n">项目名称2</li>
</ol>

列表 ol标记的属性
type	编号
start	定义有序列表起始编号，默认值为1

列表项 li标记的属性
type	只影响当前列表项前面编号类型
value	改变当前列表项前编号的值，并影响其后所有列表项编号的值

**type**用来定义有序列表中列表项前面的编号，有五种不同的类型：
1	数字列表
A	大写字母列表
a	小写字母列表
I	大写罗马字母列表
i	小写罗马字母列表

15.列表嵌套

<ul> <!-- 无序列表中嵌套有序列表 -->
    <li>项目名称
        <ol>
            <li>项目名称</li>
            <li>项目名称
                <ul>
                    <li>项目名称</li>
                    <li>项目名称</li>
                </ul>
            </li>
            <li>项目名称</li>
        </ol>
    </li>
    <li>项目名称</li>
    <li>项目名称</li>
</ul>

16.定义列表——<dl></dl>

定义列表中每一个元素的标题使用<dt></dt>标记定义，后面跟随<dd></dd>标记，用于描述列表中元素的内容

<dl>
    <dt>项目1</dt>
        <dd>描述1</dd>
        <dd>描述2</dd>
        <dd>描述3</dd>
    <dt>项目2</dt>
        <dd>描述1</dd>
        <dd>描述2</dd>
        <dd>描述3</dd>
    <dt>项目n</dt>
</dl>

17.超链接

<a href = "url" name = "" title = "提示信息" target = "窗口名称">超链接标题</a>

其中：

href 链接指向的目标文件
name 规定锚（anchor）的名称
title 指向链接的提示信息
target 指定打开的目标窗口

target
_self	在当前框架中打开链接
_blank	在一个全新的空白窗口中打开链接
_top	在顶层框架（根框架）中打开链接
_parent	在当前框架的上一层打开链接
framename	在指定的框架或者浮动框架内打开链接

18.超链接路径

绝对路径	文件的完整路径或者从协议开始定义的URL网址（外部链接）
相对路径	同一目录直接输入，上一目录"../"，下一目录"/"（内部链接）
根路径	域名下对应的文件夹

超链接分类
内部链接	网站内部文件之间的链接
外部链接	网站内的文件链接到站点内容外的文件

19.超链接的应用

1.创建HTTP文件下载超链接
<a href = "url">链接内容</a>
2.创建FTP站点访问超链接
<a href = "ftp://服务器IP地址或域名">链接的文字</a>
3.创建图像超链接
<a href = "URL"><img src = "" alt = ""></a>
4.创建电子邮件超链接
<a href = "mailto:E-mail地址"[ ?subject=邮件主题[&参数=参数值]] ">链接内容</a>
5.创建页面书签链接

书签是指文章内部的链接，可以实现段落间的任意跳转。实现这样的链接要先定义一个书签作为目标端点，再定义到书签的链接。链接到书签分为两种：链接到同一页面中的书签和链接到不同页面中的书签

①定义书签
<a name = "书签名">书签标题</a>
②定义书签链接
<a href = "#书签名">书签标题</a>  
<a href = "URL#书签名">书签标题</a>

20.浮动框架

浏览器窗口含有孤立的子窗口称为浮动框架，也称为内联框架

<iframe 属性名称 = "value" name = "iframename"></iframe>
<a href = "target.html" target = "iframename">链接标题</a>

浮动框架属性
src	设置源文件属性
name	设置框架名称
width	设置浮动框架窗口宽度
height	设置浮动框架窗口高度
frameborder	设置框架边框
scrolling	设置框架滚动条
marginwidth	设置框架左右边距
marginheight	设置框架上下边距