前端学习之html Day01

最新推荐文章于 2023-12-24 13:24:04 发布
最新推荐文章于 2023-12-24 13:24:04 发布
阅读量2.7k 收藏 2
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40345107/article/details/87693618
版权

刚刚接触前端，了解的并不是很多

1.html 超文本标记语言

标准结构

<!DOCTYPE html>     声明文档类型
<html >						根标签
<head>						头标签
    <title>Title</title>		标题标签
</head>
<body>
									主题标签
</body>
</html>

html与htm是一样的
后缀名不能决定文件的格式，只能决定文件的打开方式

2.HTML标签分类

1>单标签

<!--换行标签-->
我就是我不一样的烟火 <br/>不一样的你我

<!--水平标签-->
<hr/>

2>双标签

段落标签

<p>增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置
    等功能，功能按钮位于编辑区域与预览区域中间；</p>

3>标题标签
h1–h6 取值到h6
h1在页面中只能出现一次

<h1>2019大吉大利</h1>
<h2>2019大吉大利</h2>
<h3>2019大吉大利</h3>
<h4>2019大吉大利</h4>
<h5>2019大吉大利</h5>
<h6>2019大吉大利</h6>

4>文本标签

<font size="6" color="#8b0000"></font>

文本格式化标签

<strong>2019大吉大利</strong>
    <b>2019大吉大利</b>

    <del>2019大吉大利</del>
    <s>2019大吉大利</s>

    <ins>2019大吉大利</ins>
    <u>2019大吉大利</u>

    <em>2019大吉大利</em>
    <i>2019大吉大利</i>
```◆文本加粗 <strong></strong> <b></b>
 ◆文本倾斜<em></em> <i></i>
 ◆删除线标签<del></del> <s></s>
 ◆下划线标签<ins></ins> <u></u>
 ★注意：之所以工作里使用
 <strong></strong>  <em></em> <del></del><ins></ins>  是因为更有语义化

5>图片标签


```<img src="../1.png" alt="哈哈" title="pig" width="300" height="500">

Src 图片的来源 必写属性
Alt 替换文本 图片不显示的时候显示的文字
Title 提示文本 鼠标放到图片上显示的文字
Width 图片宽度
Height 图片高度
◆图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。

3.路径
相对路径
相对于文件本身出发
◆文件（.html文档）和图片在同一文档下，直接写图片名
txt.html 和subtitle.png在同一文件下

<img src="subtitle.png" alt="">

◆图片在文件（.html文档）的下一级目录里。文件夹名+/图片名
subtitle.png的父文件（sub）和 txt.html在同一文件下

<img src="sub/subtitle.png" alt="">

◆图片在文件（.html文档）的上一级目录里。
…+/图片名

subtitle.png和txt.html的父文件在同一文件下

<img src="../subtitle.png" alt="">

◆图片在文件（.html文档）的上一级目录的其他文件里。
…+/文件夹名+/图片名
subtitle.png在txt.html父文件下的一个文件夹里

<img src="../csdnexercise2/subtitle.png" alt="">

★总结：找到下一级目录（文件夹）的图片（文件）用 /
跳出当前目录使用…/
绝对路径
全路径

4.超链接

<a href="01txt.html" title="" target="_self"></a>

href 去往的路径（跳转的页面） 必写属性
title 提示文本 鼠标放到链接上显示的文字
target=”_self” 默认值 在自身页面打开（关闭自身页面，打开链接页面）
Target=”_blank” 打开新页面 （自身页面不关闭，打开一个新的链接页面）
5.锚链接
1.先定义一个锚点
2.超链接到锚点

<p  id="sd">

<a href="#sd">回到顶部</a>

6.空链 不知道链接到那个页面的时候，用空链

<a href="#">空链</a>

超链接优化写法

让所有的超链接都在新窗口打开

7.列表
无序列表

<ul type="circle">
    <li>2019大吉大利</li>
    <li>2019大吉大利</li>
    <li>2019大吉大利</li>
</ul>

type=”square” 小方块
Type=”disc” 实心小圆圈
Type=”circle” 空心小圆圈

有序列表

<ol type="1" start="3">
    <li>2019大吉大利</li>
    <li>2019大吉大利</li>
    <li>2019大吉大利</li>
</ol>

◆type=”1,a,A,i,I” type的值可以为1,a,A,i,I
start=”3” 决定了开始的位置。

自定义列表

<dl>
    <dt>帮助中心</dt>    小标题
    <dd>购物指南</dd>   解释标题
    <dd>订单操作</dd>
   <dd>账号管理</dd>
    </dl>
小菜鸟fighting
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学习前端-HTML-day01
08-17
学习前端-HTML-day01
前端学习day01-HTML标签01
06-21
端学习day01--HTML标签01源码
前端学习day01：基础认知+HTML标签学习
qq_46244116的博客
05-02 1060
文章目录前言一、基础认知Web标准的构成HTML初体验1、HTML的感知2、HTML骨架结构HTML骨架结构由哪些标签组成3、开发工具的使用VS Code的基本快捷键语法规范1、 HTML的注释注释的作用和写法2、 HTML标签的构成HTML标签的结构二、HTML标签学习1. 排版标签1. 标题标签2. 段落标签3. 换行标签4. 水平线标签2. 文本格式化标签3. 媒体标签1. 图片标签图片标签的介绍图片标签的src属性图片标签的alt属性图片标签的title属性图片标签的width和height属性➢
前端学习笔记_Day 01
weixin_61145501的博客
06-26 71
mongodb 数据库。Uniapp Hybrid 混合开发。Typescript JS的超集。Nodejs – 后端语言。
系统学习前端之CSS---day01
weixin_63522291的博客
12-24 1307
和
Web前端学习day01(HTML)
weixin_42135811的博客
10-22 1462
教学导航 了解什么是标记语言 了解HTML主要特性，主要变化以及发展趋势 了解HTML的结构标签 掌握HTML的主要标签（字体，图片，列表，链接，表单等标签） ### 1.网站信息页面 #### 1.1需求分析: 我们公司的需要一个对外宣传的网站介绍,介绍公司的主要业务,公司的发展历史,公司的口号等等信息 #### 1.2技术分析: ##### HTML概述: HTML: Hyper Tex...
前端学习--Day01
Cure The World的博客
08-22 4268
Web前端基础知识 HBuilder中Chrome无法运行问题 一、Web基本概念 Web：网页、公众号、动画 H5：html5 URL：网络资源的地址 服务器：一个性能比较高（内存大、运行速度快）的电脑，安装了提供服务的软件（Apache，tomcat，ISS，Nginx） 云服务器：阿里云、腾讯云、百度云、华为云 有专门的团队提供维护工作 浏览器：能帮我们打开网页，Google Chrome、IE、火狐 二、标记语言 用各种标签将相关的信息或者关键字包裹起来，方便搜索引擎的抓
Day01：尚硅谷前端HTML+CSS学习笔记
qsybh的博客
07-15 106
如何学习前端？
前端基础之html：day01
eve_gf的博客
12-02 1302
       序言：从2018年6月23号大学毕业之后，顺利进入一家上市公司，也是从事软件开发，但是自己对前端的学习却热衷不已，想着能够掌握前端的技术并且从事前端工作，因为它会给人带来一种前所未有的成就感，其实此前已经学过一遍前端的知识，但是由于从事的工作不是前端，长时间不用导致一些基础都已经忘得差不多了，所以从今天开始想通过博客来记录自己的前端学习之路。     正文： 1.什么是html?...
大前端学习笔记-day01-HTML
qq_41692467的博客
04-04 628
HTML学习笔记-day01 1. 大前端课程体系 三要素：HTML CSS Javascript 1） 重构 html5 3天 3小时 css3 10天 项目驱动，项目内容融入到授课中（网易严选首页） 2）dom驱动阶段 linux操作系统 5天 mac系统、ubuntu16.04(8G + 固态硬盘)、阿里云服务器（腾讯云、百度云）10元/月 js、jav...
前端学习打卡Day06
Narcissus__的博客
03-16 1027
1.浮动元素高度自适应 1）设置父盒子高度为定值，缺点：如果浮动过多，换行，就出现问题 2）在子盒子后加一个空div，clear：both，缺点：增加了新的空标签，降低了浏览器性能 3）溢出隐藏 overflow：hidden，缺点：会隐藏溢出的元素，例如下拉二级菜单 4）伪元素 ：：双冒号，代码如下 .box::after{ content: ""; clear: both;...
【前端学习笔记day13】2.9. html表格
01-08
html表格html表格 2.9. html表格 html表格 1、 标签：声明一个表格，它的常用属性如下： - border属性 定义表格的边框，设置值是数值 - cellpadding属性 定义单元格内容与边框的距离，设置值是数值 - cellspacing...
HTML5大前端学习过程第二周（Day10）
01-08
今天没学什么新知识，主要是练习昨天学习的定位。 一. 本节课学习目标。 掌握定位的应用。 重点 二. 定位练习1-小米官网1。 小米官网 手机 电话卡 > 手机 电话卡...
Web前端基础day01.zip
08-09
HTML 学习如何搭建页面结构和内容 (盖房子 毛坯房) CSS 学习如何美化页面 (装修) JavaScript 学习如何给页面添加动态效果 ...Bootstrap 前端框架对html/css/JavaScript/jQuery进行封装,目的是提高前端页面的开发效率
grpcio-1.3.0-cp35-cp35m-win_amd64.whl
06-13
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
ASP.NET多语种网络硬盘系统的设计(源码)
06-13
网络硬盘系统是计算机网络中比较流行的一种应用软件，但是一般的网络硬盘系统只适用于使用单一语种的人群。为满足不同语种人群对网络硬盘系统的需求，设计了多语种网络硬盘系统。采用ASP.NET 2.0开发语言，利用ASP.NET中的三层结构、B/S模式结构以及ASP.NET网页资源的设计思路，实现了包括文件夹的操作、文件的操作、网页的多语种化三个功能模块；通过文件夹功能模块，可以添加、删除、更改名字、移动、浏览文件夹；通过文件功能模块，可以查看文件属性、上传、下载、更改名字、移动文件；通过系统的多语种化模块，能够自动识别客户端的默认语言并反馈给客户端相应语言的网页。通过应用多语种网络硬盘系统，可以满足不同语种人群共享一个网络硬盘系统的需求，具有一定的应用价值。
pyzmq-22.0.0-cp38-cp38-win_amd64.whl
06-13
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
pyzmq-22.0.2-cp39-cp39-manylinux2010_i686.whl
最新发布
06-13
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
一次解压 文件 day01.txt.gz.tar
05-30
可以使用以下命令解压文件 day01.txt.gz.tar： ``` tar -zxvf day01.txt.gz.tar ``` 其中，选项 `-z` 表示解压后对 gzip 格式的压缩文件进行解压，选项 `-x` 表示解压文件，选项 `-v` 表示输出详细信息，选项 `-f`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值