0
点赞
收藏
分享

微信扫一扫

HTML笔记(一)

生态人 2022-11-29 阅读 151


主体:


<html>
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>

<body>
</h1> <p> <a> <img>
</body>
</html>




分段:<p> </P>


<!--注释文字 -->


<img src = "1.jpg">




Html和CSS的关系

学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的:

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。


认识html标签
<h1></h1>就是标题标签,它在网页上的代码写成<h1>勇气</h1>。

“三年级时...我也没勇气参加。” 是网页中文章的段落,<p></p>是段落标签。它在网页上的代码写成 <p>三年级时...我也没勇气参加。</p>

网页上那张小女生的图片,由img标签来完成的,它在网页上的代码写成<img src="1.jpg">

,<h1></h1>就是标题标签,它在网页上的代码写成<h1>勇气</h1>。

“三年级时...我也没勇气参加。” 是网页中文章的段落,<p></p>是段落标签。它在网页上的代码写成 <p>三年级时...我也没勇气参加。</p>

网页上那张小女生的图片,由img标签来完成的,它在网页上的代码写成<img src="1.jpg">



标签的语法


1. 标签由英文尖括号<和>括起来,如<html>就是一个标签。

2. html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多了一个/。

如:

(1) <p></p>

(2) <div></div>

(3) <span></span>

3. 标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:<div>里嵌套<p>,那么</p>必须放在</div>的前面。如下图所示。

4. HTML标签不区分大小写,<h1>和<H1>是一样的,但建议小写,因为大部分程序员都以小写为准。



认识html文件基本结构


这一节中我们来学习html文件的结构:一个HTML文件是有自己固定的结构的。

<html>
<head>...</head>
<body>...</body>
</html>




代码讲解:



1. <html></html>称为根标签,所有的网页标签都在<html></html>中。



2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等标签,头部标签在下一小节中会有详细介绍。



3. 在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。




<head> 标签



<head>


   <title>...<title>


   <meta>


   <link>


   <style>...</style>


   <script>...</script>


</head>


在<title></title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中,告知搜索引擎这个网页的主要内容





HTML中的代码注释


语法<!--注释文字-->




语义化,让你的网页更好的被搜索引擎理解——标签的用途、标签在浏览器中的默认样式


语义化:明白每个标签的用途




<body>标签:网页上显示的内容放在里面



<p>标签:添加段落


语法:<p>段落文本</p> ;注意一段文字一个<p>标签,如在一篇新闻中有3段文字就要把这3个段落分别放到3个<p>标签中




<hx>标签,为你的网页添加标题


用<hx>标签来制作文章的标题,标题一共有6个,h1,h2,h3,h4,h5,h6 分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。


语法:


<hx>标题文本</hx>   (x为1-6)




强调语气


<em>需要强调的文本</em>  默认斜体表示


<strong>需要强调的文本</strong> 默认粗体表示


以后可以用CSS更改他们的样式





使用span标签为文字设置单独样式(注意与强调的区别)


语法:


<head>


<style>


span{


    color:blue;


    ... ...


}


<style>


</head>



<body>


<span>文本</span>


</body>





<q>标签,短文本引用(表示引用别人的话,用于简短文本)


语法:


  <q>引用文本</q>


  注:注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号




<blockquote>标签,长文本的引用(引用的文本比较长)


语法:


  <blockquote>引用文本</blockquote>


  注:浏览器对<blockquote>标签的解析是缩进样式。




<br/>标签


在需要加回车换行的地方加入<br/>,<br/>标签的作用相当于word文档中的回车。



&nbsp;


在html代码中输入空格、回车都是没用的。要想输入空格,必须写入&nbsp;


例子:


  来源:作文网&nbsp;&nbsp;作者:为梦想而飞


  来源:作文网  作者:为梦想而飞




<hr/>标签


作用:添加分隔线;


注:<hr/>标签和<br/>标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。


(样式以后可以在CSS中再改)




<address>标签,给网页加入地址信息


语法:


  <address>地址信息</address>


  默认样式为斜体,以后可以在CSS中更改样式。



<code>标签


在网页中显示一些计算机专业的编程代码,当代码为一行代码时,使用<code>标签


例:


  <code>var i=i+300;</code>


而插入多行代码则使用<pre>标签


语法:


   <pre>语言代码块<pre>


主要作用:


   针对预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。


   *有时<pre>不仅仅是为了显示计算机源代码时用的,你需要在网页中预显示格式时都可以使用它。




使用ul,添加新闻信息列表()


语法:


<ul>


<li>信息</li>


<li>信息</li>


<li>信息</li>


......


</ul>


(网页中显示的默认样式每li前都自带一个圆点)

举报

相关推荐

HTML学习笔记一

HTML冲浪笔记(一)

HTML笔记

HTML 笔记

html笔记

0 条评论