前端基础HTML

最新推荐文章于 2024-07-10 14:03:37 发布

彭于晏爱编程

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量305

点赞数

分类专栏：前端文章标签：前端 html css

本文链接：https://blog.csdn.net/m0_59708269/article/details/122473790

版权

day01

1，web标准基于浏览器

c/s客户端到服务器

b/s浏览器到服务器

网页的划分

1.基本的结构 html 毛胚

2.表现： css 样式装修的实现

3.行为： js 网页动起来功能实现

2.HTML简述

官方：W3C万维组织。

1.Hyper text markup language（超文本标记语言）

2.特征：简单不是一个编程语言。单纯的标记语言

3.基本结构语法

<!DOCTYPE html> 	表示当前的文档类型是html
<html>				包裹作用   所有的内容
<head>				头
    <meta charset="UTF-8"> utf8格式  支持中文
    <titile>Tile</titile>  网页的标题
</head>
<body>
	核心代码（网页的骨架）写在这里    
</body>
</html>

4.语法

<标签/标记名称>

<></>双标签一对对的

<> 单标签一个孤零零的

元素=标签+内容

5.标签默认自带的功能

h1-h6	标题			特点:大 粗		独占一行
p		段落			特点:上下间距	   独占一行
i		斜的			特点:下面几个都是  共享一行
u		下划线			
s		删除线
b		加粗			如果一行文本只有部分加粗用b
<hr>	线			 一行显示
<br>    换行

下面是开发中常见的

div		布局			特点:独占一行
span	布局			特点:共享一行

语法特点

默认编辑器敲n个空格回车浏览器只会当一个解析

转义字符解决

&nbsp;		空格
&lt;		<
&gt;		>
&copy;

注释:

用来给程序员自己看的.浏览器不会看

注意:注释不能嵌套

<!--注释的内容	说明文档	-->

6.公共属性和值(重要)

作用:用来修饰元素的(加背景加颜色加边框…)

语法	属性名="值"
	id属性	就是当前标签在页面中的身份标志		身份证号码	唯一的
	结合js使用
	class属性	 类名		css中选择器使用
	title属性	 鼠标移入的文本提示
	style	  样式属性	修饰当前的元素
	style="样式1;值1;样式2:值2;..."

day02

1.分类

独占一行的元素可以随意地修改宽高 块级元素

h1-h6 div p hr ul li table

独占一行的元素才可以居中显示

共享一行的元素默认不能随意的修改框 行内元素

i u s b span a

img是一个特殊的行内元素(自带宽高属性)

02.图像的引入

属性:

src:	引入图像的地址
alt:	图像没有引入成功显示的文本
width:	宽度设置
height:	高度设置
	图片的宽高设置		只设置一个值	让图片呈现等比缩放
	1000*400	500高自动变200

<img src="2.jpg" alt="" width="200" height="400">

路径:

<!--
相对路径1,--图像和网页在同一个文件夹中
	直接引入图像的名称即可
-->
<img src="2.jpg" alt="">
<!--
	相对路径3	如果图像在上一级文件夹中
	先返回上一级	在引入图像名称		一个../表示一级
-->
<img  src="../libai.jpg" alt="">

03.超链接

作用:主要实现用户可以点击操作实现页面跳转等功能

语法:

<a>文本</a>

属性:

href:跳转的页面  需要加全称
target: 实现页面之间的跳转方式
		_self	当前页面跳转
		_blank	新的标签页跳转
name	名称

功能

<a href="http://www.baidu.com" target="_blank">百度</a>
<!--其他功能-->
<!--下载	必须是压缩文件直接下载-->
<a href="2.zip">你懂得</a>
<!--js代码执行-->
<a href="Javascript:alter('还可以')">甩锅</a>
<!--返回页面顶部-->
<div style="height:3000px;"></div>
<a href="#">返回页面顶部</a>

href表示超链接访问的地址域名

遵循http协议访问线上地址必须加上http://

a超链接---------3种状态
	1--------访问前	:link		默认蓝色
	2--------激活		 :active	 默认红色
	3--------访问后	 :visited	默认紫色
	4--------		   :target	   针对锚点进行超链接跳转后 触发的状态

注意: 超链接有默认的状态.如果想该变超链接自身样式需要自己定义,顺序:LAHA

锚点补充

<!--步骤1	先定义一个锚点
	方式1	可以是a的name属性
	方式2	可以是任意标签的id属性值
-->
<!--步骤2	实现跳转-->
<a href="#n">男神专区</a>
<a href="03_homework.html#li">libai</a>
<!--步骤1 定义-->
<div style

最低0.47元/天解锁文章

彭于晏爱编程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端基础HTML

day011，web标准基于浏览器c/s客户端到服务器b/s浏览器到服务器网页的划分1.基本的结构 html 毛胚2.表现： css 样式装修的实现3.行为： js 网页动起来功能实现2.HTML简述官方：W3C万维组织。1.Hyper text markup language（超文本标记语言）2.特征：简单不是一个编程语言。单纯的标记语言3.基本结构语法<!DOCTYPE html> 表示当
复制链接

扫一扫