前端基础----html

冥龙的小光崽

已于 2022-09-29 22:00:39 修改

阅读量284

点赞数

文章标签：前端 html java

于 2022-09-28 23:25:01 首次发布

本文链接：https://blog.csdn.net/weixin_68151375/article/details/127094746

版权

HTML 编辑器

Visual Studio Code

基础知识

实例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我利用vscode创建第一个页面</title>
</head>
<body>
    写代码

</body>
</html>

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。（<head></head>头部元素）
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=>, initial-scale=1.0">
    <title>标题标签</title>
</head>
<body>
    <h1>标题标签</h1>
    <h1>标题一共六级显</h1>
    <h2>文字加粗一级显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>

</body>
</html>

网页展示：

段落标签<p>

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

换行标签<br />

<p>这是一个段落<br />然后被强制换行了</p>

链接标签 <a>

<a href="https://www.baidu.com">这是一个链接</a>

空链接用 # 代替

图像标签 <img>

    <img src="img.jpg" alt="我的姐姐和奶奶" title="这是我的奶奶和姐姐"/>

图像标签的使用


    <img src="img.jpg"/>

alt 替换文本，图像显示不出来时用文字替换


    <img src="img1.jpg" alt="我的姐姐和奶奶"/>

title 提示文本，鼠标放到图像上显示文字

    <img src="img.jpg" alt="我的姐姐和奶奶" title="这是我的奶奶和姐姐"/>

width 给图像设置宽度

    <img src="img.jpg" alt="我的姐姐和奶奶" title="这是我的奶奶和姐姐" width="500"/>

height 给图像设置高度

    <img src="img.jpg" alt="我的姐姐和奶奶" title="这是我的奶奶和姐姐" height="100"/>

border 给图像设置边框：

    <img src="img.jpg" alt="我的姐姐和奶奶" title="这是我的奶奶和姐姐" height="500" border="15"/>

超链接

外部链接

    <a href="http://www.qq.com" target="_self">腾讯</a>
    target 打开窗口的方式 默认的值是 _self 当前窗口打开页面 _blank 新窗口打开页面
    <a href="http://www.itcast.cn" target="_blank">传智播客</a>

内部链接：网站内部页面之间的相互链接

 <a href="gongshijianjie.html" target="_blank">公司简介</a>

空部链接：#

<a href="#" target="_blank">公司地址</a>

下载链接：地址链接的是文件 .exe 或只是 zip 等压缩包形式

<h4>4.下载链接：地址链接的是 文件 .exe 或只是 zip 等压缩包形式</h4>
    <a href="img.zip" target="_blank">下载文件</a>

网页元素链接

<a href="http:/www.baidu.com"> <img src="img.jpg"/></a>

锚点链接：点击链接，快速定位页面中某一个位置

    <a href="#名字">名字</a>
    <h3 id="名字">123</h3>

冥龙的小光崽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端基础----html

知识总结
复制链接

扫一扫

前端基础----html

HTML 编辑器

基础知识

标签

标题（Heading）

段落标签<p>

换行标签<br />

链接标签 <a>

图像标签 <img>

图像标签的使用

alt 替换文本，图像显示不出来时用文字替换

title 提示文本，鼠标放到图像上显示文字

width 给图像设置宽度

height 给图像设置高度

border 给图像设置边框：

超链接

外部链接

内部链接：网站内部页面之间的相互链接

空部链接：#

下载链接：地址链接的是 文件 .exe 或只是 zip 等压缩包形式

网页元素链接

锚点链接：点击链接，快速定位页面中某一个位置

下载链接：地址链接的是文件 .exe 或只是 zip 等压缩包形式