HTEL5+CSS3------>HPH

黑马程序视频

目的:能够复刻各种页面，并且能够快速过度到PHP

1.Web标准的构成

结构：HTML 没毛的鸟

表现：CSS 有毛的鸟

行为动作：JS 会飞的有毛鸟

文章目录

HTEL5+CSS3------>HPH
- 1.Web标准的构成
- 2.语法规范
- - 1.单标签
  - 2.双标签
  - 3.包含关系
  - 4.并列关系
  - ------->一些解释<---------
- 3.常用标签
- - 1.标题标签
  - 2.段落和换行标签
  - 3.标签格式化
  - 4.盒子标签
  - 5.图片标签
  - 6.图像路径
  - - 6.1相对路径
    - 6.2绝对路径
  - 7.链接
  - 8.注释 (快捷键：**ctrl+/** )
  - ------->分割线<---------
- 4.特殊字符

2.语法规范

1.单标签

<br/>

2.双标签

<html></html>

3.包含关系

<html><title></title>
</html>

4.并列关系

<html><head><title></title></head><body></body>
</html>

------->一些解释<---------

<!DOCTYPE html>    //告诉html的类型 这个是html5
<html lang="en">   //lang语言定义当前文档显示的语言//"en"是英文网页//"zh-CN"是中文网页<meta charset="UTF-8"> //字符集

3.常用标签

1.标题标签

<h1>————<h6>用法<h1>这里写第一标题的内容，并且独占一行</h1>

2.段落和换行标签

<p>这里写段落，也是放在Body里面
</p><br>换行强制

3.标签格式化

 <h1>格式化标签的使用</h1>这是一个<strong>加粗</strong>-这是一个<em>倾斜</em>这是一个<del>删除线</del>这是一个<ins>下划线</ins>

4.盒子标签

     <div>这是一个大盒子 独占一行</div><span>小盒子 可以在div里面</span>

5.图片标签

属性	属性值	说明
scr	图片路径	必要的属性
alt	文本	在图像的旁边备注文字（只有在图片加载不出来，损坏的时候文字才会出现）
title	文本	当鼠标碰到图像的时候，提示文字
width	像素	设置图像的宽（横着）
height	像素	设置图像的高（竖着）
border	像素	设置图像的边框粗细（外围）

  <img src="9.jpg" width="300" height="300" alt="胡桃" title="胡桃" border="15">src必须放在最前面 后面的没顺序

6.图像路径

6.1相对路径

<img src="9.jpg" width="300">
//同级路径  <img src="data:image/13.png " width="300">
//下一级的路径 <img src="下一级文件名/13.png "> 下一级文件就是本文件夹中包含的一个文件夹，类似套娃<img src="../9.jpg" width="300">
<img src="../../9.jpg" width="300">
//读取上级文件夹的图片 ../  多少个../就是返回多上个上级文件夹

6.2绝对路径

没啥好讲的知道有这么个东东格式和相对路径一样，至于属性值直接复制图片所在位置就好了，不过vscode目前打不开从本地计算机复制的图片

7.链接

<a herf="http://"  ></a>    属性herf是必要的，“属性值”放链接，其实现在的http:// 这个东东我个人认为可以不用了，复制链接的时候一起复制上去就好了啦<a href="https://ys.mihoyo.com/" target="_blank">原神 _blank</a> <br>_blank是在新的窗口打开<a href="https://ys.mihoyo.com/" target="_parent">原神 _arent</a> <br>
<a href="https://ys.mihoyo.com/" target="_self">原神 _self</a><br>
<a href="https://ys.mihoyo.com/" target="_top">原神 _top</a><br>在没有盒子的情况下  _self,_parent,_top 是在原窗口打开
---------------------------------------------------------------------------------------------------------空链接<br><a href="#">原神</a><br>下载压缩文件<br><a href="image.zip">原神</a><br>打开内部链接<br>就是用我们自己写的东西当成链接<a href="day002.html"> 原神</a><br>通过图片音频等打开链接<br><a href="https://ys.mihoyo.com/" target="_blank"><img src="9.jpg" width="300"></a>锚点这个锚点不局限于一下的例子嗷 可拓展性很高 主要的就是 `<a herf="#自定义名称"></a>` 与`<a id="自定义名称"></a>`
>>>其中嗷 id不一定是要存在与<a></a>里的，他可以用于<h1 id="自定义名称"></h1>也可以是<p id="自定义名称"></p>

8.注释 (快捷键：ctrl+/ )

------->分割线<---------

4.特殊字符

特殊字符	描述	字符代码
	空格	` ` 要几个空格,就输几个这个
<	小于号	`&lt`
>	大于号	`&gt`
	上标	`&sup1` `&sup2`

目前就搞那么多啦下面是用法

<h4>这是空格&nbsp; &nbsp;&nbsp;&nbsp;这是空格</h4>
<h4>这是&lt;p&gt;段落符号</h4>
<h4>这是上标 我是个好人&sup1;; </h4>

HTML----＞常用标签链接特殊符号相关推荐

HTML常用标签和特殊符号
HTML常用标签和特殊符号常用标签如下: 标签含义 <h1>至<h6> 标题标签 <p> 段落标签 <br>. <br/> 两者都可换 ...
html 常用标签、特殊符号
排版标签: 排版标签主要和css搭配使用,显示网页结构的标签,是网页布局最常用的标签. h 标签: 作为标题使用,并且依据重要性递减. 一行只能放一个标题 <h1> 标题文本 </ ...
html 正方形字符,HTML常用标签以及特殊符号
常用属性 : color 颜色 (#ff0000 #ff8000 #ffff00 #00ff00 #0080ff #0000a0 #8000ff #000000 #c0c0c0) width 宽度 % ...
HTML常用标签以及特殊符号
常用标签文本标题(h1-h6) 自带加粗,有自己的文本大小,独占一行,有默认间距. 段落文本(p) 换行(br) 水平线(hr/) 空标记加粗(b&strong) <b>加粗内 ...
【2022.7.11】HTML基础介绍语法常用标签超文本链接锚点定位
来自2022.7.11 今日学习一.HTML基础介绍 1.网页 1.1什么是网页 1.2什么是HTML 1.3超文本 1.4网页的形成 2.常用浏览器 2.1常用浏览器 2.2浏览器内核 3.web ...
html超级链接和常用标签
超级链接和常用标签超级链接超级链接超级链接锚点常用标签 1.图片标签 2.表格标签 3.音频标签 4.视频标签 5.框架标签图片圆角属性超级链接超级链接超级链接 a:完成多个页面跳转 ...
HTML 常用标签演示
HTML 常用标签演示本页演示的所有标签均为浏览器默认效果. [基础] <div> 定义文档中的节(块元素,无任何属性) <span> 定义文档中的节(内联元素,无任何属性) ...
全端开发——html简介与常用标签
1.html是什么? •超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则 •浏览器按顺序渲染网页文件 ...
HTML基础知识点（2）——常用标签
HTML基础知识点(2)--常用标签和小学妹一起学HTML 这里有:(转载)HTML标签简写及全称常用标签 HTML基础知识点(2)--常用标签一.HTML常用标签 1.效果显示二.HTML属 ...

HTML----＞常用标签链接特殊符号

HTEL5+CSS3------>HPH

1.Web标准的构成

文章目录

2.语法规范

1.单标签

2.双标签

3.包含关系

4.并列关系

------->一些解释<---------

3.常用标签

1.标题标签

2.段落和换行标签

3.标签格式化

4.盒子标签

5.图片标签

6.图像路径

6.1相对路径

6.2绝对路径

7.链接

8.注释 (快捷键：ctrl+/ )

------->分割线<---------

4.特殊字符

HTML----＞常用标签链接特殊符号相关推荐

最新文章

热门文章