成分有点复杂
要开始接触网页开发了
开发工具的下载链接:https://code.visualstudio.com/
安装好后,我们开始入门吧,废话就不多说了
一、基础知识大家了解一下
1、文本类标签
文本结构
一级标题<h1> Heading 1</h1>
二级标题<h2> Heading 2</h2>
三级标题<h3> Heading 3</h3>
四级标题<h4> Heading 4</h4>
五级标题<h5> Heading 5</h5>
六级标题<h6> Heading 6</h6>
段落标题<p> Paragraph </p>
2、文本修饰
<em> Emphasis </em>强调
加粗<strong>Strong</strong>
下划线<u>underline</u>
插入<ins>insert</ins>
删除<del>delete</del>
上标<sup>superscript</sup>
下标<sub>subscript</sub>
换行<br> Line Break
横线<hr>Horizontal Rule
长引用<bockquote>blockquote</blockquote>
短引用<q>quote</q>
3、通用
<span> span </span>
4、列表
------这里是一块一块的哦
无序标签<ul>
标签元素<li>unordered list </li>
<li> unordered list </li>
<ul>
-------
排序标签<ol>
标签元素<li>ordered list</li>
<li> ordered list </li>
<ol>
-------
5、其他
换行<br>( line break)
横线<hr>( horizontal rule)
-----------------认识一些常见的标签-------------------------
<header>:表示页面或页面片段的页眉,通常包含网站的标志、导航链接和其他元素。
<nav>:表示导航链接的区域,通常包含指向网站各个部分的链接。
<main>:表示页面的主要内容区域,通常包含主要的文章、产品列表或其他主要内容。
<article>:表示独立的文章、博客帖子、评论或其他类似的内容块。
<section>:表示文档中的一个通用区块,通常包含一组相关的内容,如章节、页脚或侧边栏。
<aside>:表示文档中的一个附加区块,通常包含与主要内容相关但不是必须的内容,如侧边栏、广告或引用。
<footer>:表示页面或页面片段的页脚,通常包含版权信息、联系方式和其他元素。
--------------------------------------
安装好后,可以下载几个插件,方便我们后续更好的学习
二、举个栗子
first:新建一个文件
最好命名为index.html
至于为什么
后面你就知道了
如何跳出html的模板呢?
这里有两种方法
一种是 !,注意是要英文的 !
另一种就是在代码框里敲html就会有提示
我们选择html:5
两种方式都会形成同样的模板
极大的方便我们进行网页设计
就上面的基础知识,做一些例子
最好的例子就是实践了嘛
前面几句代码都容易理解,最后一句
<a href="www.baidu.com" target="_blank">go to baidu</a>
<a>一个HTML超链接标签
target="_blank" 属性,这意味着当用户点击这个链接时,链接将在新的浏览器窗口或标签页中打开。
href="www.baidu.com":就是我们点击链接后将访问的网页
go to baidu:这部分是链接的可见文本
-------------附录----源码--------------
给那些不想敲代码的朋友点福利,但真心想学好的就得好好敲代码了
世界就是这么残酷呜呜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link> 标签可以引入css文件等
<style>标签是 可以直接在这里写css代码
<script>标签可以直接写js代码,还可以使用src属性引入js文件-->
</head>
<body>
<h1>标题一 header</h1>
<em>斜体emphasis</em><br>
<u>下划线underline</u><br>
<a href="www.baidu.com" target="_blank">go to baidu</a>
<!-- <h2>注释</h2>
<strong>加粗</strong>
<span>通用文本</span>
<li>unordered list</li>标签要放到<ul></ul>或<ol></ol>里面-->
</body>
</html>