前端学习笔记---HTML介绍及基础语法1

HTML简介及语法

HTML

HTML一种超文本标记语言，是网页制作的骨架，没有什么修饰是最基本的结构体。。。就像钢筋水泥一样。若想要浏览器渲染出页面，则必须遵循HTML语法



HTML文件的基本结构

    <html>
        <head></head>:head内标签不是给用户看的 是定义配置给浏览器看的
        <body></body>:body内的标签是写什么渲染什么
    </html>

HTML语法的一些备注：
1.丑！！！！！
2.HTML文件没有格式，可以全部堆在一行
3.HTML文件打开方式为文件浏览器打开和利用集成开发环境打开


HTML语法的注释

HTML代码很多且杂乱，所以习惯用注释来划分出来代码的各个区域

<!--单行注释-->

<!--
多行注释
-->


HTML基础语法

HTML为标签类型语言，其代码由一条条标签组成，所以在下面的文章中将采用对标签介绍的方式进行叙述


标签分类:
1.双标签 (有头有尾)  如:<h1></h1>
2.单标签 (自闭合标签) 如:<br>

head内常用标签:

1.<title>网页标题</title>
效果如下:

image


2.略，其他的涉及到了css和js，在后面的文章中会补充

body内常用标签(比较重要的)

1.标题标签:
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
效果如下:

image


2.字体效果处理的标签
<b>加粗字体</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
效果如下:

image


3.分段标签（自己归的类emmm，其实这些不是一类的）
<br> 作用就是换行，相当于敲了个回车
<p>段落标签<\p> 作用就是在里面书写玩后，会在末尾自带一个回车
<hr> 就是一条线 水平分割线


代码如下（果然，HTML代码非常丑）:

<b>加粗字体</b><br>
<i>斜体</i>
  <p>
    <u>下划线</u>
  </p>
    <hr>
<s>删除线</s>'

效果如下:

image

4.占位标签
<div>这是一块<br>一块</div>
<span>这是二块<br>二块</span>
这两个标签是最常用的标签，主要用于占位然后再去调整样式
区别:div是占用完整的一行的位置，span是文本多少就占用多少

效果如下：

image

image


补充说明:

块级标签:独自占用一整行的标签 如:h1---h6 div p
除了p标签，块级标签都可以嵌套任意的块级标签和行内标签，p标签是特例，其只能嵌套行内标签(其都是完整的占用一块，是矩形的)

行内标签:文本多长就多长，如: i u s b span
其仅能嵌套行内标签，不能嵌套块标签

5.图片标签
<img src="" alt="" title="" height="" width="">
	(1). src放入图片路径，可以本地，也可以是网络的
	(2). alt图片访问失败时出现的图片
	(3). title鼠标放在图片上出现的描述
	(4). height width 高 宽 单位px 像素

代码如下:
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0128%2F6cd17366j00qnmnle008uc000vk00xcm.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643901659&t=717db44ca277480684594cdb8898010a"
 alt="注意身体" title="一个海报" height="500px" width="800px">

效果如下(1.失败时候2.成功时)：

image


image


6...未完待续
posted @ 2022-01-18 13:00  cc学习之路  阅读(208)  评论(0)    收藏  举报