HTML与前端开发基础详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_49302285/article/details/125286764

1.网页组成

网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）

2.前端开发语言

html（Hypertext Markup Language）—— 结构超文本标记语言
css（Cascading Style Sheets）—— 样式层叠样式表
js（javascript）—— 行为

3.HTML默认结构

<!doctype html> 声明文档类型

<html> 根文件，表示要写的东西是html

<head> 头部信息

<title></title> 提示信息（显示在标题栏）

</head>

<body> 页面主体 (可以是图片、文字等)

</body>

</html>

html超文本标记语言

< 标记

超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素

了解：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

有三种： Strict（严格型)、 Trasitional（过渡型）、 Frameset（框架型）

4.HTML基础

HTML基本语法

1、常规标签（双标签）

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

2、空标签（单标签）

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

说明：

1.写在<>中的第一个单词叫做标签，元素。

2.标签和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内。

3.一个标签可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。

4.空标签没有结束标签，用“/”代替。

常用标签-文本

1、文本标题

……

2、段落标记

<p>段落文本内容</p>

3、空格(实义字符)

 （所占位置没有一个确定的值, 这与当前字体字号都有关系）

4、强制换行

<br />

5、加粗

6、倾斜

<i></i>

7、水平线/删除线/下划线

8、上标／下标

常用标签-列表

1、无序

<ul>

<li>列表项内容</li>

．．．．．．

</ul>

2、有序

<li>列表项内容</li>

．．．．．．

</ol>

type 规定列表中的列表项目的项目符号的类型

语法：<ol type=“ a"></ol>

1 数字顺序的有序列表（默认值）（1, 2, 3, 4）

a 字母顺序的有序列表，小写（a, b, c, d）

A 字母顺序的有序列表，大写（A,B,C,D)

i 罗马数字，小写（i, ii, iii, iv）

I 罗马数字，大写（i, ii, iii, iv）

start 属性规定有序列表的开始点。(start的属性值必须是数字)

语法：<ol start="5"></ol>

3、自定义

<dl>

</dl>

图片

<img src=“图片地址” alt=“标签实例带有指定替代文本的图像” title="文本提示" width="" height="" border=""/ > （单标签）

图片 title 和 alt区别：

alt:

1、alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户，以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候，图片的替换文字。

2、alt属性值得长度必须少于100个英文字符

3、alt属性是img标签的必须属性，如果没有特别意义的图片，可以写alt=""

4、alt属性是搜索引擎判断图片与文字是否相关的重要依据，alt属性添加到img主要的目的才是为了SEO

title:

1、title属性并不是必须的。

2、title属性规定元素的额外信息，有视觉效果，当鼠标放到文字或是图片上时有文字显示。

3、title属性并不作为搜索引擎抓取图片的参考，更多倾向于用户体验的考虑。

网页上常用的图片格式（压缩图片）

jpg :有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )如果网页中
gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;
png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的源文件格式，适用于颜色数量较少的图像;

超链接

属性：

target 链接打开方式

_blank 新窗口

_self 当前窗口

布局元素

文档区域

文本结点（某一小段文本，或是某一个字）

表格

作用：显示数据

组成： <table>

<tr>

</tr>

</table>

table表格标签 tr行标签 td单元格标签

width="表格的宽度"

height="表格的高度"

border="表格的边框"

bgcolor="表格的背景色"

bordercolor="表格的边框颜色"

cellspacing="单元格与单元格之间的间距"

cellpadding="单元格与内容之间的空隙"

水平对齐方式：align="left/center/right"

垂直对齐方式：valign="top/middle/bottom"

colspan=“所要合并的单元格的列数" 合并列

rowspan=“所要合并的单元格的行数” 合并行