栏目分类:
子分类:
返回
终身学习网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
终身学习网 > IT > 软件开发 > 后端开发 > Java

前端学习基础-HTML

Java 更新时间:发布时间: 百科书网 趣学号
HTML学习笔记

本笔记参考了pink老师的前端基础教学视频提炼并整合,视频链接

HTML常用标签
  • 文档类型声明标签,采用html5版本显示页面

     
  • 语言标签(含有语言标签可以让浏览器翻译为该语言,但不翻译的话所有语言都可以正常显示)

     

    中文是zh-CN

  • 字符集

    在标签内,通过标签的charset属性规定html文件应该使用哪种字符编码

    UTF-8为万国码

  • 标题标签

    每个标签独占一行

    我是一级标题
  • 段落标签

    vscode中使用alt+z来自动换行

    文本在一个段落中会根据浏览器窗口的大小自动换行

    段落和段落中会有较大的空隙

    内容

  • 换行标签(break)

    单目标签,在一段中强制某个区域后的文字换行显示


    的明显区别就是没有大的空隙

HTML文本格式化标签
语义标签说明
加粗或者使用strong标签语义更加强烈
倾斜或者使用em标签语义更加强烈
删除线或者使用del标签语义更加强烈
下划线或者使用ins标签语义更加强烈

shift+alt+下方向键:可以直接复制这一行内容到下一行

无语义盒子标签

盒子用来装内容

这是头部
今日价格

divison指分割分区。span指跨度跨距

标签用来布局,一个独占一行,大盒子
不用占一行,可以有多个
图像标签和路径
 

图像标签的其他属性

属性属性值说明
src图片路径必须属性
alt文本如果图片无法显示,则代替图片的文字
title文本提示文本,鼠标放在图片上显示的文字
width像素设置图像的宽度
height像素设置图像的高度
border像素设置图像的边框粗细
 

宽度和高度一般修改一个,否则会变形。修改一个另一个会等比例改变。

属性之间以空格分开

边框一般在css中设定

目录文件夹和根目录
  • 目录文件夹:即为普通文件夹,但是存放了页面制作的相关素材

  • 根目录:打开目录文件夹的第一层就为根目录

    实际中会新建一个文件夹来存放这些图片

    相对路径:以文件所在位置为参考,建立出的目录路径。图片相对于HTML文件所在的位置

    相对路径分类符号说明
    同一级路径图像文件位于HTML文件同一级
    下一级路径/...下一级,如
    上一级路径../...上一级 ,如

    ../的作用可以看作是让他回到上一级

    绝对路径:在计算机中直接的位置

    一般引用网页的直接图片地址

超链接标签 1.语法格式

anchor n.锚

 文本或图像 

herf用于指定链接目标的url地址,为必须属性

target指定链接页面的打开方式,其中_self为默认在原页面打开替换,_blank为重新打开一个页面

2.链接分类

1.外部链接: 例如

 百度

2.内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如

 首页 

3.空链接: 如果当时没有确定链接目标时,可以先用一个空的来代替

 首页  

4.下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件

 

5.网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.

6.锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.

  • 在链接文本的 href 属性中,设置属性值为 #名字 的形式,如

 第2集 
  • 找到目标位置标签,里面添加一个 id 属性 = 刚才的名字 ,如:

第2集介绍

HTML 中的注释和特殊字符

1.HTML中的注释以“”结束。

注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的

可能写起来比较麻烦,直接用快捷键ctrl + /

2.在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代。

记住空格、大于和小于号即可

<和>分别译为less than和greater than

转载请注明:文章转载自 www.051e.com
本文地址:http://www.051e.com/it/986236.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 ©2023-2025 051e.com

ICP备案号:京ICP备12030808号