(初识html)基本html标签

web标准***

主要包括:结构、表现、行为三个方面。

html-模板

<!DOCTYPE html>  文档类型申明,此处告诉浏览器使用html5版本显示网页

不是一个html标签,是文档类型申明标签,位于<html>标签之前。doc是document缩写

<html lang="en">  <html>标签通常成对出现,称为 双标签  ,由尖括号包围

lang是language缩写,意为语言,en表示English,zh-CN表示中文。

en文档也可以显示中文,zh-CN文档也可以显示中文。

<head>  头部标签,是<html>标签的儿子与<body>是兄弟,且都为双标签

    <meta charset="UTF-8">  <meta>标签中charset属性规定html中使用哪种字符

    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>  中间文字或字符表示文档标题

</head> 

<body> 为文档主体,基本所有内容都是放在body中的

</body>

</html>

模板vscode自动生成,输入!+enter即可。

注:ctrl+/添加或取消注释

<!--  -->

HTML常用标签

1、标题标签<h1>--<h6>

h-单词head缩写,意为头部、标题

eg、  <h1>我是一级标题</h1>

<h1 align="center"></h1> 标题向中对齐

left、right

省略align属性,则默认向左对齐

特点:1、加了标题的文字会变粗,字号也会变大。

           2、一个标题独占一行。

           3、从h1-h6字号依次减小

2、段落标签

<p>我是一个段落标签</p>

p-paragraph缩写意为:段落

特点:

1、文本在一个段落中会根据浏览器窗口大小自动换行

2、段落与段落间会保留空隙

3、换行标签

<br />   

break的缩写,意为:break打断、换行

特点

1、是个单标签

2、<br />标签只是开始新的一行,不会插入垂直空隙

4、文本格式化标签

1、加粗标签- -<strong> 加粗</strong>   or   <b></b>

2、倾斜标签--<em>倾斜</em>    or    <i></i>

3、删除线标签--<del>删除线</del>    or     <s></s>

4、下划线标签--<ins>下划线</ins>  or  <u></u>

5、特殊符号

1、 &nbsp;    空格符号

2、 &lt;    小于号<

3、 &gt;   大于号>

6、绘制水平线

<hr />

<hr align="center" color="red" size="3"  width="" />


7、路径

1、相对路径:相对于某一文件夹的位置

同级:     

下一级:    /

上一级:   ../

以此类推

2、绝对路径

eg:C:\Users\南弈书\Desktop\homyit\第一次培训demo

eg2:https://www.baidu.com

8、超链接

格式:

<a href="跳转目标" target="目标窗口弹出方式" >文本或图像</a>

弹出方式:

1、_self    默认,当前窗口打开

2、_blank   新窗口打开

链接分类:

1.外部链接:例如< a href="http:// www.baidu.com">百度</a>.
2.内部链接:

网站内部页面之间的相互链接 直接链接内部页面名称即可,例如< a href= "index.html">首页</a>.

3.空链接:如果当时没有确定链接目标时,<a href="#">首页</a>。
4.下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。
5.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
6.锚点链接:点我们点击链接,可以快速定位到页面中的某个位置.
●在链接文本的href属性中,设置属性值为#名字的形式,如<a href="#two">第2集</a>
●找到目标位置标签,里面添加一个id属性=刚才的名字,如: <h3 id="two" >第2集介绍</h3>

9、图像标签

<img src="图像URL" />

10、details元素

  <details>

    <summary>显示列表</summary>

    <ul>

      <li>1</li>

      <li>2</li>

    </ul>

  </details>

11、列表

  ul元素无序列表

  <ul>

    <li>春</li>

    <li>夏</li>

  </ul>

  ol元素有序列表

  <ol>

    <li>秋</li>

    <li>冬</li>

  </ol>

 自定义列表

 

12、mark标签

<mark> 文字  </mark>突出  文字  颜色

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值