当前位置： 首页>编程语言>正文

html 制作架构图 html基本架构

编程语言2024-04-29 23:21:41


文章目录

  • HTML、CSS、 JS的关系
  • 主流浏览器及其内核
  • HTML介绍
  • 路径
  • HTML标签
  • HTML标签结构
  • HTML标签分类
  • 常用标签
  • 标题标签
  • 段落标签
  • 分割线(水平线)
  • 换行标签
  • 文字修饰标签
  • 超链接标签
  • 图片标签
  • 音频标签
  • 视频标签
  • 特殊字符
  • 列表
  • 无序列表
  • 有序列表
  • 定义列表


HTML、CSS、 JS的关系

  • HTML是网页的骨架主要负责网页的结构
  • CSS为网页提供样式用来美化修饰网页
  • JavaScript是一种脚本语言用来控制dom元素，主要用于前端页面的 DOM 处理

主流浏览器及其内核

  • Firefox(火狐)->Gecko
  • Chrome(谷歌)->Webkit->Blink
  • IE(IE6,IE7,IE8,IE9,IE10,IE11)->Trident
  • Opera(欧朋)->Webkit
  • Safari->Webkit

HTML介绍

HTML超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。html专门负责网页的结构骨架，所以应关注他的语义，而不是他的样式。

路径

当我们跳转到另一个服务器内部的页面时。一般我们都会使用相对路径相对路径都会会使用.或…开头。
相对路径 ：./表示当前文件所在目录 …/表示当前文件所在目录的上一级目录
绝对路径：从磁盘根目录开始的路径

HTML标签

HTML标签结构

<!DOCTYPE html> ：表示当前的html文件是html5的文档(html5的规范)
<html lang="en"> ： lang表示开发语言（en表示英语）
<meta charset="UTF-8"> ：charset表示使用的字符集。UTF-8支持中文
gbk、GB2312、iso-8859-1
<html></html> : 页面的根标签。
<head></head> ：头部标签，页面的常规信息，可用于引入为外部css文件等
<body></body>：主体标签，页面的主体信息，用户可以看到的部分

HTML标签分类

  • 单标签：<标签名 />
  • 双标签：<标签名></标签名>
  • 块级元素：在页面中独占一行的称为块元素，可以设置宽高。
  • 行内元素（内联元素）：在页面中不能独占一行，不能设置宽高、宽高由内容大小来决定。

常用标签

标题标签

标题标签：h1~h6 数字越小字体越大，并且自动加粗、自动换行

<h1>一级标签</h1>
         <h2>二级标签</h2>
         <h3>三级标签</h3>

段落标签

段落标签：表示一段内容，可以自动换行

<p>p标签中内容就表示一个段落</p>

分割线(水平线)

<hr color="颜色" size="粗细" width="宽度"/>

换行标签

<br />

文字修饰标签

<span>部分文字的样式调整</span>
<ins>内容增加下划线</ins>
<del>内容增加删除线</del>
<b>加粗</b>
<strong>加粗、并且具有语义化效果</strong>
<i>倾斜</i>
<em>倾斜、并且具有语义化效果</em>
<mark>高亮显示</mark>

超链接标签

超链接可以让我们从一个页面跳转到其他页面或者是当前页面
某一位置 ，href 指定跳转的目标路径。

target属性用来指定超链接打开的位置。
-可选值
_self 默认值 在当前页面打开超链接
_blank 在一个新页面打开超链接

<a href="https://www.baidu.com" target="_blank">超链接</a>

超链接也是一个行内元素，在a标签中可以嵌套除自身外任何元素

<a href="跳转路径" target="_blank">
    <img src="图片路径" />
</a>

图片标签

<img src="./图片路径/图片名称.png" alt="图片未加载出来时显示的信息" />

音频标签

controls 控制播放
autoplay 自动播放
loop 循环播放

<audio src="./音频文件目录/音频文件.mp3" controls autoplay loop></audio>

也可以用这种形式

<audio controls autoplay loop>
     <source src="./source/故梦.mp3">
</audio>

视频标签

<video width="320" height="240" controls autoplay>
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
</video>

特殊字符

(1)空格：  
	
	(2)小于： <
	
	(3)大于：">>
	
	(4)版权符号：©
	
	(5)注册商标：®
	
	(6)摄氏温度：°
	
	(7)乘号：×
	
	(8)除号：÷
	
	(9)平方：²

列表

html也可以创建列表，html列表一共有三种

  • 无序列表
  • 有序列表
  • 定义列表

无序列表

<ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
        ······
</ul>

有序列表

<ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
        ······
</ol>

定义列表

<dl>
        <dt>标题</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
        <dd>内容3</dd>
</dl>



https://www.xamrdz.com/lan/59x1938445.html

相关文章：