标签：elit neque 第一天 consectetur 学习 HTML ipsum NET amet
查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 浏览器多个空格自动解析为一个
不能直接写大于小于以及一些特殊符号
如果需要使用则需要使用转义字符，也就是实体
空格
大于 >
小于 <
直接搜索w3c网站
-->
<h1>hello</h1>
<p>你好呀</p>
</body>
</html>
实体
meta
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--meta主要用于设置网络中的一些元数据，元数据不是给用户看的
charset 指定网页的字符集
name 指定数据的名称
content 指定的数据内容
keywords表示网站的关键字，可以同时指定多个关键字用逗号隔开
网页重定向http-equiv
-->
<meta name="keywords" content="HTML,前端,CSS">
<meta name="descreption" content="这是一个不错的网站">
<meta http-equiv="refresh" content="3,url=https://www.baidu.com">
<h1>hello</h1>
<p>你好呀</p>
</body>
</html>
语义标签
行内元素与块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
HTML负责网站的结构
应该关注标签的语义，而不是样式
标题标签：
h1~h6共六级标题
重要性递减，h1的重要性，仅次于title标签
所以一般一个页面只有一个h1,标题一般只会使用到h3
标题标签都是块元素
在页面中独占一行的元素叫做块元素
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--
p标签表示页面中的一个段落，也是块元素
-->
<!--
hgroup用来为标题分组，可以将相关的标题放入hgroup
-->
<hgroup>
<h1>回乡偶书</h1>
<h2>其一</h2>
</hgroup>
<!--
em标签语音语调加重,em不会独占一行，叫做行内元素
-->
<p>今天天气<em>真</em>不错！</p>
<!--
strong表示强调，重要，也是行内元素
-->
<p>你今天必须<strong>完成作业</strong></p>
<!--
blockquote表示一个长引用，独占一行，是块元素
-->
鲁迅说<blockquote>这句话我从来没说过！</blockquote>
<!--
q表示一个短引用，行内元素
-->
孔子说：<q>学而时习之，不亦说乎</q>
<br>
<!-- br标签表示换行 -->
今天天气真不错
</body>
</html>
语义标签2
p元素中不放块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
块元素
在网页中一般通过块元素对页面布局
行内元素
对文字设置特殊效果
块元素中放行内元素
块元素基本什么都能放
p元素中不能放任何块元素
浏览器解析网页时会自动对不符合规定元素修正
比如标签写在了根元素外面
p中写了块元素等
修正不一定符合预期以及增加不必要的工作
-->
<p>
<h1>哈哈</h1>
</p>
</body>
</html>
语义化标签3
查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
布局标签（结构化语义标签）
-->
<!--
header表示标签的头部
main表示网页主体部分，一般一个页面只有一个
footer网页底部
aside 和主体相关的内容（侧边栏）
article表示独立的文章
section表示独立的区块，以上标签都不能表示时用section
div没有语义，表示区块，可以代替以上所有
sapn行内元素，没有语义，一般用于网页中选中文字
-->
<header>aa</header>
<main>bb</main>
<footer>cc</footer>
<aside>dd</aside>
<article>ee</article>
<section>ff</section>
<div></div>
<span></span>
</body>
</html>
列表
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
列表（list）
列表三种，列表之间是可以相互嵌套的
无序列表ul用li表示列表项
有序列表ol
定义列表 使用dl来定义内容
dt对内容解释说明
-->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<dl>
<dt>结构</dt>
<dt>结构表示网页结构</dt>
<dt>结构表示网页结构</dt>
<dt>结构表示网页结构</dt>
</dl>
<ul>
<li>ww
<ul>
<li>
11
<ul>
<li>
ee
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>超链接
超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!-- alt+shift+向下箭头（向下复制）
超链接-页面跳转
使用a标签定义超链接，a标签是行内元素
a标签中可以嵌套除了a自身的任何元素
href指定跳转目标路径
值可以使外部网站
也可以是内部地址(在同一个目录下可以像以下这么写)
-->
<a href="https://www.baidu.com">超链接</a>
<br><br>
<a href="07.列表.html">超链接</a>
</body>
</html>超链接内部跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!--
当我们需要跳转到服务器内部时
一般使用相对路径，用./或者../开头
不写默认为./
./表示当前文件所在目录
../表示当前文件所在目录的上级
-->
<a href="./target.html">超链接</a>
<a href="../07.liebiao.html">超链接</a>
<a href="./inner/target.html">超链接</a>
<a href="../outer/target1.html">超链接</a>
</body>
</html>
跳转到文章任意位置
查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!--
target属性，指定超链接打开的位置
_self默认在当前页面打开
_blank在新的页面中打开超链接
lorem自动将中文生成英文版本
超链接
回到顶部
-->
<!--
在开发中可以将#作为超链接的路径的占位符使用
-->
<a href="#">这是一个新的超链接</a>
<!--
javascript:; 作为href属性，点击后什么也不会发生
-->
<a href="javascript:;">不会发生</a>
<a href="#bottom">去底部</a>
<a href="https://www.baidu.com" target="_blank">超链接</a>
<p>ASP.NET Core是一个免费且开放源代码的Web框架，以及由微软和社区开发的下一代ASP.NET。它是一个模块化框架，既可以Windows上的完整.NET Framework上运行，也可以在跨平台.NET Core上运行。</p>
<p>ASP.NET Core是一个免费且开放源代码的Web框架，以及由微软和社区开发的下一代ASP.NET。它是一个模块化框架，既可以Windows上的完整.NET Framework上运行，也可以在跨平台.NET Core上运行。</p>
<p>ASP.NET Core是一个免费且开放源代码的Web框架，以及由微软和社区开发的下一代ASP.NET。它是一个模块化框架，既可以Windows上的完整.NET Framework上运行，也可以在跨平台.NET Core上运行。</p>
<p>ASP.NET Core是一个免费且开放源代码的Web框架，以及由微软和社区开发的下一代ASP.NET。它是一个模块化框架，既可以Windows上的完整.NET Framework上运行，也可以在跨平台.NET Core上运行。</p>
<p>ASP.NET Core是一个免费且开放源代码的Web框架，以及由微软和社区开发的下一代ASP.NET。它是一个模块化框架，既可以Windows上的完整.NET Framework上运行，也可以在跨平台.NET Core上运行。</p>
<p>ASP.NET Core是一个免费且开放源代码的Web框架，以及由微软和社区开发的下一代ASP.NET。它是一个模块化框架，既可以Windows上的完整.NET Framework上运行，也可以在跨平台.NET Core上运行。</p>
<p>ASP.NET Core是一个免费且开放源代码的Web框架，以及由微软和社区开发的下一代ASP.NET。它是一个模块化框架，既可以Windows上的完整.NET Framework上运行，也可以在跨平台.NET Core上运行。</p>
<p>ASP.NET Core是一个免费且开放源代码的Web框架，以及由微软和社区开发的下一代ASP.NET。它是一个模块化框架，既可以Windows上的完整.NET Framework上运行，也可以在跨平台.NET Core上运行。</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempora, iure ullam laudantium officia earum neque magni autem in ipsa amet nemo nam suscipit deleniti, culpa necessitatibus quam voluptatibus voluptate?</p>
<!--
href="#"回到顶部
去底部等于去最底部那个位置,id是区分大小写的
也可以跳转到指定位置，只要设置id即可
-->
<a href="#" id="bottom">回到顶部</a>
</body>
</html>标签：elit,neque,第一天,consectetur,学习,HTML,ipsum,NET,amet 来源： https://www.cnblogs.com/evelei/p/16116047.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。