HTML+CSS基础自制笔记

一、HTML笔记

文章目录

初识标签

<html></html>  :根标签
<head></head>  :文档的头部 
<title></title> :文档的标题
<body></body>:文档主体

<!DOCTYPE html> :表示当前使用的是html5的版本来显示网页,
它不是一个HTML标签,只是一个文档类型声明标签

<html lang="en"> :提示是英文网页,“zh-CN”表示中文网站,实际没有太大影响,英文网页也可以写中文
    
<meta charset="UTF-8"/> :表示万符码,包含基本所有国家的字符集

VScode代码快捷键:

1、! :自动写入框架

2、Alt+b :执行网页

标签语义

标题标签:
<h1><h6>分为六个等级
    如:<h1>一级标题</h1>
特点:每个标题独占一行,加了标题的文字会加粗,字体变大。
    
段落标签:
<p>我是一个段落标签</p>
	如:<p>我是朱昱崐</p>
		<p>我是地球人</p>
作用:将HTML文档分割为若干段落,换行时有很大空隙
换行标签:
<br/> 
	 如:我是朱昱崐<br/>我是地球人
作用:令文本换行
文本格式化标签:
文本加粗:1、<strong>加粗了</strong>
		2、<b>加粗了</b>
		推荐使用上者
文本倾斜:1、<em>倾斜了</em>
		2、<i>倾斜了</i>
		推荐使用上者
删除线 : 1、<del>删除线</del>
        2、<s>删除线</s>
		推荐使用上者
下划线:  1、<ins>下划线</ins>
		2、<u>删除线</u>
		推荐使用上者
盒子标签:
大盒子:<div>盒子标签</div>
	特点:一个盒子的内容独占一行
小盒子:<span>小盒子标签</span>
	特点:可以多个盒子在一行
图像标签和路径:
图像标签:
src是<img/>标签的必须属性,用于指定图像文件的路径和文件名
	如:<img src="pla.jpg"/>
alt:替换文本,图像异常显示时,用文字替换
	如:<img src="" alt ="图片异常"/>
title:提示文本,鼠标放在图片上,提示用户显示的文字
	如:<img src="pla.jpg" title="我是朱昱崐"/>
width、height:图像宽度、高度
	如:<img src="pla.jpg width="500" height="500"/>
border:设定边框,
        
※各个属性之间用空格分隔,没有前后顺序
路径可以分为:
1、相对路径:以当前html文件的路径做参照
	上一级路径:/
	下一级路径:../
		上级如:<img src="image/pla.jpg"  />
		下级如:<img src="../pla.jpg"  />
2、绝对路径
	1、网址路径
	2、磁盘完整路径
超链接标签:
语法:<a href="跳转目标" target="窗口弹出方式">超链接文本或图像</a>
	href用于指定目标连接地址(必须属性)
	target用于指定连接页面的打开方式,默认为_self本窗口跳转,_blank为新窗口打开
1、外部链接:href中必须带有http://
	如:<a href="http://www.qq.com" target="_blank">文本或图片</a>
2、内部链接:打开电脑路径下的其他html文件
	如:<a href="Untitled-1.html" target="_blank">
3、空链接:href="#",代表超链接为空,等想好具体网页再修改
4、下载链接:在超链接中存放可下载的文件
    如: <a href="pla.rar" target="_blank">
5、网页元素超链接:用音视频和图片当做超链接
    如:<a href="pla.rar" target="_blank">
        <img
  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值