CH3 HTML基础 1

最新推荐文章于 2022-05-23 11:06:51 发布
最新推荐文章于 2022-05-23 11:06:51 发布
阅读量6k 收藏 1
点赞数 1
分类专栏： 前端学习 文章标签： html css html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45707027/article/details/115828844
版权

CH3 HTML基础

html基本模板

！+Tab键

<!DOCTYPE html>
<html lang="en">             <!-- 页面语言说明 -->             
<head>
  <meta charset="UTF-8">     <!-- 字符集 --> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 
  meta  https://www.runoob.com/tags/tag-meta.html
   --> 
 <!-- 
  name="viewport" 是定义视域元信息
  content="width=device-width 初始宽度
  initial-scale=1.0 放大系数
  --> 
  <title>Document</title>
  
</head>
<body>
  
</body>
</html>

文字

<body>
  <p>今天开始学习<em>html</em></p>
</body>
<!-- 
em表示强调
例如，我们要修改默认em标签的样式，消去它的斜体设置
头部标签中，在head添加样式标签style，给em定义一个样式
 -->

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    em{
      color:red;
      font-style: normal;
    }
  </style>
</head>

<body>
  <p>今天开始学习<em>html</em></p>
</body>

</html>

在这里插入图片描述

标题

<body>
  <h1>标题1</h1>
  <h2>标题2</h2>
  <h3>标题3</h3>
  <h4>标题4</h4>
  <h5>标题5</h5>
  <h6>标题6</h6>
</body>

1.用标题来创建文档结构，而不是根据字号选择标题，标题大小可以用css来修改
2.一个网页只有一个h1标题
在这里插入图片描述

<body>
  <h1>这是一个大标题</h1>
  <h2>HTML</h2>
  <p>HTML tutorial</p>
  <h3>CSS</h3>
  <p>CSS tutorial</p>
  <h4>Code</h4>
  <p>Exercise</p>
  <h5>标题5</h5>
  <h6>标题6</h6>
  <p>今天开始学习<em>html</em></p>
</body>

在这里插入图片描述

特殊字符

  <p>今天开始学习 &lt;html&gt;! &copy;</p>

特殊字符对照表
https://tool.oschina.net/commons?type=2
在这里插入图片描述
 

<body>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta in quis sunt harum iste fuga id nisi voluptatum.
    Minima corporis, accusamus quos praesentium asperiores doloremque quae, odit ad illum cupiditate ipsa enim quam,
    nobis minus repellendus omnis provident? Est fuga obcaecati nam iste aut cupiditate porro consequuntur tempora sunt
    placeat.</p>
  <p>今天开始学习 &lt;html&gt;! &copy;</p>
</body>

在这里插入图片描述
要想第一第二行字母不换行，可以加入转移字符&nbsp;

<body>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta in quis sunt harum iste fuga id nisi voluptatum.
    Minima corporis, accusamus quos praesentium&nbsp;asperiores doloremque quae, odit ad illum cupiditate ipsa enim quam,
    nobis minus repellendus omnis provident? Est fuga obcaecati nam iste aut cupiditate porro consequuntur tempora sunt
    placeat.</p>
  <p>今天开始学习 &lt;html&gt;! &copy;</p>
</body>

在这里插入图片描述

超链接

<body>
    <a href="index.html"> About me</a>
</body>
<!-- 这里用的是相对地址 -->

在这里插入图片描述
在这里插入图片描述

<body>
    <a href="index.html"> 
        <img src="images/yy1.jpg" alt="">
    </a>
</body>

在这里插入图片描述
点击图片
在这里插入图片描述

<body>
    <a href="index.html"> About me</a>
    <a href="/images/yy1.jpg">这是pig</a>
</body>

<body>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta in quis sunt harum iste fuga id nisi voluptatum.
    Minima corporis, accusamus quos praesentium&nbsp;asperiores doloremque quae, odit ad illum cupiditate ipsa enim quam,
    nobis minus repellendus omnis provident? Est fuga obcaecati nam iste aut cupiditate porro consequuntur tempora sunt
    placeat.</p>
  <p>今天开始学习 &lt;html&gt;! &copy;</p>
  <a href="about.html"> 回到首页</a>
</body>

在这里插入图片描述
点击About me
在这里插入图片描述
点击pig
在这里插入图片描述

<body>
    <a href="index.html"> About me</a>
    <a href="/images/yy1.jpg" download>这是pig</a>
</body>

点击pig时开始下载
在这里插入图片描述

目录跳转

<body>
    <a href="index.html"> About me</a>
    <a href="/images/yy1.jpg" download>这是pig</a>
    <a href="#section-css">CSS</a>
    <h2>HTML</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati eligendi maiores voluptas voluptatum
        perferendis, laboriosam mollitia, at voluptates, harum fugiat quaerat suscipit omnis aspernatur. Voluptatum
        commodi quam odio obcaecati incidunt voluptatem sunt voluptates aliquid iusto sit quae harum consequuntur alias,
        eos, voluptatibus natus tempora necessitatibus illo et. Error maiores obcaecati saepe ullam nobis unde sapiente
        recusandae animi eum distinctio neque accusantium ipsum veniam iure esse numquam libero temporibus sequi nam
        debitis, itaque repellendus et soluta beatae? Sit maiores odit, amet officiis quas dolor doloribus aspernatur
        velit molestiae a provident fuga, fugiat numquam? Ea cumque laborum incidunt eius enim modi amet blanditiis!
        Eveniet dolore, praesentium in tempora ratione aut quod aperiam ea quidem itaque, vitae inventore adipisci
        repellendus, quam et? At explicabo recusandae rerum, perferendis officia quae facere aliquid vero unde quaerat.
        Obcaecati nesciunt assumenda quidem magnam recusandae, nemo maiores quas mollitia perferendis totam velit
        officia aperiam facere ex consequatur culpa? Provident aut quidem ducimus adipisci architecto non praesentium
        hic perferendis, eveniet voluptatem cum autem optio tempore necessitatibus esse tempora, consequatur quisquam,
        dolorum blanditiis ut id saepe eius accusamus vel? Consequatur deleniti tenetur nemo illum. Itaque, natus
        expedita, deleniti facere exercitationem aliquam eum enim, ratione sunt laboriosam facilis. Laboriosam, dolore
        iusto. Fugiat accusamus quas omnis aliquam illo commodi ipsa corrupti porro? Nesciunt nulla cumque, magnam harum
        nemo assumenda in ipsam quibusdam quam perspiciatis aut obcaecati doloribus sunt accusamus odit hic laboriosam
        facilis, consectetur, beatae accusantium fugit voluptatibus dolorem. Eligendi voluptates porro laborum hic
        voluptatum ab nam impedit ipsum odit nisi! Ducimus nulla perspiciatis ipsum, perferendis dignissimos inventore
        numquam! Mollitia obcaecati ratione similique provident molestias eligendi beatae fugiat placeat enim?
        Distinctio labore quos dolorum, praesentium sequi dolor iste cumque eligendi possimus architecto, perspiciatis,
        expedita voluptatem earum. Totam, at saepe, voluptatem beatae voluptate nisi soluta laboriosam earum cum, cumque
        sit eius maxime quam hic eos illo excepturi ab fugiat? Pariatur alias labore commodi voluptatibus corporis
        doloribus natus! Omnis deleniti architecto deserunt totam iste voluptatem dicta similique porro a quia.
        Inventore accusamus aspernatur laborum nisi id, perspiciatis natus consequuntur quibusdam quod facere adipisci
        neque beatae, unde asperiores! Odio, libero voluptas cupiditate excepturi temporibus repellendus inventore
        error. Reiciendis ex deserunt molestiae mollitia sunt omnis officia aliquam, cupiditate adipisci amet commodi
        ullam accusantium autem eaque quos? Rem quis unde ab sequi laboriosam corporis enim nobis eligendi similique sed
        cupiditate dolores, vel soluta laudantium consequatur ipsam tempore officia ipsum rerum magnam? Accusamus autem
        esse molestias fugit placeat temporibus delectus quas dolorum, nisi, cupiditate voluptatem error nam quod facere
        odio quos? Cum quo autem, nisi qui cumque sequi cupiditate beatae fugiat facere maiores incidunt. Repellat
        officiis eum dicta eos odit natus praesentium pariatur aspernatur doloribus vel laboriosam voluptas unde aperiam
        impedit ut incidunt modi exercitationem totam, consectetur fuga illo. Deserunt minus voluptatum earum suscipit,
        obcaecati rerum sed cupiditate explicabo qui. Esse voluptates perspiciatis cumque? Amet minima pariatur
        laboriosam labore iure necessitatibus vero officiis quasi quos repellat? Rem molestiae reprehenderit numquam
        adipisci culpa amet doloremque minima, eius dignissimos atque unde id recusandae qui quidem facere eligendi quas
        excepturi quod?</p>
    <h2 id="section-css">CSS</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias ipsa tempora cumque ad rerum minima id,
        cupiditate corrupti deleniti facere eligendi, corporis itaque quas numquam necessitatibus architecto assumenda
        nihil labore?
    </p>
    <a href="#">Jump to Top</a>
</body>

1.在需要跳转的目录标题里加id 标识号
2.添加<a href="#section-css">CSS</a>跳转链接，注意要加#号
3.在需要跳转回顶部的地方加入<a href="#">Jump to Top</a>

跳转到外部链接

<a href="https://www.baidu.com/"></a>

在这里插入图片描述
打开链接时用新标签打开

<a href="https://www.baidu.com/" target="_blank">Baidu</a>

target="_blank"新建空白页

链接到邮箱

<a href="mailto:879112214@qq.com">给我发邮件</a>

格式为<a href="mailto:xxxxxxxx">给我发邮件</a>
点击，自动打开客户端

在这里插入图片描述

余秀华。
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
CH02 HTML5基础.ppt
03-26
HTML5课件，做网页必备
SPA项目开发之登录注册
weixin_44557427的博客
08-30 617
一、打开Powershell窗口 1.1 在新建的项目里、安装开发需要的模块 npm install element-ui -S npm install axios -S npm install qs -S npm install vue-axios -S 1.2 安装好之后 在src里面找到 main.js 添加3行代码 import ElementUI from ‘...
Centos 安装 mysql5.7 示例教程
we
05-23 6万+
创建mysql 用户组和用户 groupadd mysql useradd -r -g mysql mysql 从官网下载 MySQL wget https://cdn.mysql.com/archives/mysql-5.7/mysql-5.7.36-linux-glibc2.12-x86_64.tar.gz 解压 tar -zxvf mysql-5.7.36-linux-glibc2.12-x86_64.tar.gz 将解压的文件重命名，并移动到/usr/local目录 mv mysql-
base64加密解密
热门推荐
weixin_49265805的博客
02-08 19万+
记录小白的成长---------------个人笔记 from base64 import b64decode import base64 lis=[] for i in range(1,6): m='yuanrenxue'+"{}".format(i) m = base64.b64encode(m.encode('utf-8'))#base64加密 m = m.decode('utf-8') print(m) lis.append(m) # base64解密 for
2015广州强网杯--小心猪圈
weixin_44110537的博客
08-11 3690
encrypt R29kIGpvYjo1NzY1NkM2QzIwNjQ2RjZFNjUzQTRBMzU1ODQ3NTkzNjRBNDE0RTM1NTg0NzRCNDk0NDU0NEY1MjUzNTg0MTQ5NDQ0MjRGMzU1MTU4NTM0RjUzNTI0NzQ5MzQ1ODRCNTc1MjU0NEE0QTU1NDc0OTUzNDM1NzRGNEU0RDU2NTE1NTU0NTE0RDQ5NUE0NDRCMzY1MzUwNEU1NTM0NTc1NTU5NEM0RjQ5NDkzMzU3NEIzMzR
【Python3】RSA公钥解密
Test20201990的博客
02-10 14万+
使用python进行公钥加密私钥解密，网上方法很多，这里就不再介绍了。 因公司项目测试需要，要使用rsa公钥加密后的数据请求服务器，服务器使用私钥解密，并将响应使用私钥加密后返回，再使用公钥进行解密，对响应结果进行校验。** 以下为核心代码 根据这位大佬的方法增加了128位的分段，以便用于超长数据的解密 https://blog.csdn.net/weixin_33910434/article/details/88672911 import rsa import base64 class Decr.
北大青鸟ch05html上机.zip
08-28
1. **HTML基础结构**：包括HTML文档的头部（head）和主体（body），以及如何声明文档类型（<!DOCTYPE html>）。 2. **HTML标签**：如标题标签（到）、段落标签（）、强调标签（和）、链接标签（）和图像标签（）等...
北大青鸟ch09html上机.zip
08-28
1. **HTML基础语法**：HTML是网页制作的基础，包含一系列标签，如`<html>`, `<head>`, `<title>`, `<body>`等，用于构建网页结构。上机练习可能涉及这些基本标签的使用。 2. **HTML元素与属性**：HTML元素由开始...
北大青鸟ch08html上机.zip
08-28
总的来说，“北大青鸟ch08html上机.zip”提供的教学资料旨在帮助学生掌握HTML的基本语法和应用，通过实际操作来提升网页制作技能，为后续更复杂的Web开发打下坚实基础。在这个过程中，学生将学会如何创建静态网页，...
MTK 指令大全
迷路飞虫
12-03 13万+
*#*#4636#*#* 显示手机信息、电池信息、电池记录、使用统计数据、WiFi信息 *#*#7780#*#* 重设为原厂设定，不会删除预设程序，及SD卡档案。 *2767*3855# 重设为原厂设定，会删除SD卡所有档案。 *#*#34971539#*#* 显示相机相机韧体版本，或更新相机韧体 *#*#7594#*#*6 当长按关机按钮时，会出现一个切换手机模式的窗口，包括:静音模式、
VueSPA（项目登陆前后台实现）
weixin_45067120的博客
05-10 3万+
（一路踩坑的博主）：一定要细心不然BUG会让你活活气死 SPA项目流程1.vue+elementUI完成注册及登陆2. Vue+ElementUI设计登陆页面3. 后台交互(axios/qs/vue-axios)4.后台实现流程：后台util工具类提供： 1.vue+elementUI完成注册及登陆 1.1. vue怎么引入和配置使用element-ui框架 1.1.1 使用vue-cli脚手架工具创建一个vue项目 vue init webpack pro01 1.1.2 npm安装elementUI c
vue+elementUI完成注册及登陆
weixin_46705150的博客
08-22 2万+
打开cmd输入下面这些命令一个一个下载 npm install element-ui -S npm install axios -S npm install qs -S npm install vue-axios -S 打开你项目的src找到package打开就会看到你下载的东西
java序列化
xmh_sxh_1314的博客
05-20 2万+
Java 提供了一种对象序列化的机制，该机制中，一个对象可以被表示为一个字节序列，该字节序列包括该对象的数据、有关对象的类型的信息和存储在对象中数据的类型。 将序列化对象写入文件之后，可以从文件中读取出来，并且对它进行反序列化，也就是说，对象的类型信息、对象的数据，还有对象中的数据类型可以用来在内存中新建对象。 整个过程都是 Java 虚拟机（JVM）独立的，也就是说，在一个平台上序列化的对象可以在另一个完全不同的平台上反序列化该对象。 1）Java序列化就是把对象转换成字节序列，而Java反序列化就是把.
可能是全网最详细的 Spring Cloud OAuth2 单点登录使用教程了
小梦爱Java的博客
08-03 5万+
OAuth 2 有四种授权模式，分别是授权码模式（authorization code）、简化模式（implicit）、密码模式（resource owner password credentials）、客户端模式（client credentials），具体 OAuth2 是什么，可以参考这篇文章。(http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html) 本文我们将使用授权码模式和密码模式两种方式来实现用户认证和授权管理。 OAuth2 .
vue、element结合实现表单的增删改查
weixin_43837268的博客
06-19 1万+
1.在plugins/element.js中按需引入element组件 import Vue from 'vue' import { Button, Form, FormItem, Input, Message, Container, Header, Aside, Main, Menu, Submenu, MenuItem, Breadcrumb, BreadcrumbItem, Card, Row, Col, Table, TableColumn, Switch, Tooltip, Pag
hadoop简介
xmh_sxh_1314的博客
01-16 3万+
Hadoop是一个由Apache基金会所开发的 分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。[1] Hadoop实现了一个 分布式文件系统（Hadoop Distributed File System），简称HDFS。HDFS有高 容错性的特点，并且设计用来部署在低廉的（low-cost）硬件上；而且它提供高吞吐量（high throughput）来访问 应用程序的数据，适合那些有着超大数据集（large data set）的应用程序
《多媒体制作技术及应用》ch9网站设计.ppt
最新发布
11-12
"《多媒体制作技术及应用》ch9网站设计.ppt主要涵盖了网站设计的基础知识，包括HTML语言、网站结构、网页文件规划与创意，以及网页制作软件的使用。" 在网站设计中，HTML（超文本标识语言）是创建网页的基础，它是...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值