当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Web前端Day01：HTML基础之基本结构、标签、列表

Web前端Day01：HTML基础之基本结构、标签、列表

2020年07月17日  | 移动技术网IT编程  | 我要评论

文章目录

HTML、CSS、JS的关系

HTML是构建网页结构的->毛坯房
CSS是用于美化网页、制作简单的小动画->装修房子
JavaScript用于表单验证、特效、小游戏、与后端数据交互 ->拉网线

HTML版本

主流版本是HTML5: 2014发布

主流浏览器及其内核

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

HTML基本结构

使用软件：Visual Studio Code

<!DOCTYPE html>
<html>
    <head>
        <title>网页标题</title>
        <meta charset="utf-8"/>
        ...
    </head>
    <body>
    	...
    </body>
</html>

注意事项：
1.HTML不区分大小写
2.所有符号用英文输入法

路径

相对路径：以.或…或文件夹、文件开头
绝对路径：以盘符、/ 开头

标签

标签分类

1. 块级元素：
特点：可以用CSS设置宽高、独占一行（自动换行）
比如：h1~h6、p、div
2. 内联元素（行内元素）
特点：不能设置宽高、宽高由内容大小来决定、在一行显示
比如：b,strong,i,em,a

标题标签

h1~h6
h1最大、h6最小

<h1>内容</h1>
..........
<h6>内容</h6>

效果：
1.加粗
2.大小变化
3.语义化含义、重点的意思

段落标签

如果有很多文字的情况下,用p标签进行分段

<p>
    第一段文字.....
</p>
<p>
    第二段文字.....
</p>
...

文字修饰标签

<span>部分文字的样式调整</span>
<b>加粗</b>
<i>倾斜</i>
<strong>加粗、并且具有语义化效果</strong>
<em>倾斜、并且具有语义化效果</em>

换行标签

<br>

图片标签

<img src="图片路径" />

音频标签

controls:控制条
autoplay:自动播放（不稳定）
muted:静音
loop:单曲循环
单一来源：

<audio src="./所在文件夹名/音频名.mp3" controls autoplay muted loop></audio>

多个来源：

<audio controls>
    <source src="./所在文件夹名/音频名.mp3">
    <source src="./所在文件夹名/音频名.ogg">
    <source src="./所在文件夹名/音频名.wav">
</audio>

视频标签

<video src="./所在文件夹名/视频名.mp4"></video>
<video controls>
    <source src="./所在文件夹名/视频名.mp4">
    <source src="./所在文件夹名/视频名.webm">
    <source src="./所在文件夹名/视频名.flv">
</video>

HTML5去除了哪些旧标签？

<font>、<center>、<big>、<frame>、<s>

HTML5新增了哪些标签？

<header>描述头部信息</header>
<footer>描述尾部信息</footer>
<aside>侧边栏</aside>
<nav>导航栏(菜单)</nav>
<main>主要内容</main>
<article>一段独立文章</article>
<section>内容的主题</section>
<hgroup>放一些标题(h1-h6)</hgroup>
<time>放时间内容</time>
<address>放地址信息</address>
<figure>
    <figcaption>图片标题</figcaption>
    <img />
</figure>

HTML5新增标签在IE8中不兼容怎么办？

解决：在head中引入html5shiv.js

列表

有序列表

<ol type="1/a/A/i/I">
    <li>选项一</li>
    <li>选项二</li>
    ...
</ol>

无序列表

<ul>
    <li>选项一</li>
    <li>选项二</li>
    ...
</ul>

自定义列表

<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题N</dt>
    <dd>内容N</dd>
</dl>

网络小图标

<head>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
</head>

超链接

<h1>A:跳转到互联网上的某个页面</h1>
<a href="https://www.baidu.com/">百度页面</a>

<h1>A:跳转到自己到其他页面</h1>
<a href="04列表.html">跳转到列表页去</a>

<h1>A:拨打电话</h1>
<a href="tel:18729648017">打电话</a>

<h1>A:发信息</h1>
<a href="sms:18729648017">发短信</a>

<h1>A:死连接</h1>
<a href="javascript:;">死连接(点击之后不做任何行为)</a>

<h1>A:跳转到页面上的某个位置(锚链接)</h1>
<a href="XXX.html#xxx">跳转到xxx频道</a>

如何用手机浏览自己的网页？

  1. 一定要用服务器形式启动网页
  2. 打开CMD->ipconfig查询自己的IP
  3. 用IP替换掉网页上：127.0.0.1
  4. 复制整个地址到：草料二维码生成二维码
  5. 手机扫一扫（和电脑保持同一个WIFI下）

本文地址：https://blog.csdn.net/PILIpilipala/article/details/107381766

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网