15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > HTML语言基础

HTML语言基础

时间:2023-09-26 07:12:01 | 来源:网站运营

时间:2023-09-26 07:12:01 来源:网站运营

HTML语言基础:

前言

通过浏览器可以访问服务器上的信息,包括文本数据以及图片、声音、视频等多媒体数据。而HTML的出现,能有效的帮助浏览器传递过来的信息,有好的形式呈现给用户。

一、HTML概述

1、HTML是什么?

二、HEAD元素

1、title 元素

<!DOCTYPE html><html lang="en"><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>页面的标题</title></head><body> </body></html>2、meta 元素

三、文本元素

1、标题标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>关于标题标签</title></head><body> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签 与默认文本大小基本相同</h4> <h5>五级标签</h5> <h6>六级标签</h6></body></html>

2、文本修饰标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>关于语义标签</title></head><body> <p>你好</p> <p><strong>你好</strong></p> <p><em>你好</em></p> <p><del>你好</del></p> <p><ins>你好</ins></p> <p>HTML 语言是一门 <ins>""</ins> 的语言</p></body></html>

3、转义字符

四、文档结构元素

1、段落标签< p>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>关于段落</title></head><body><!-- 所有的 空格包括 /t 还有 /n;最终在浏览展示中都被视为一个空白 --><p>Click Duplicate The Duplicate button on the toolbar. A new template item is added to the same group as the original, and selected.</p><p>Click Duplicate The Duplicate button on the toolbar. A new template item is added to the same group as the original, and selected.</p></body></html>

2、换行标签< br />

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>关于段落</title></head><body><!-- 所有的 空格包括 /t 还有 /n;最终在浏览展示中都被视为一个空白 --><p>Click Duplicate The Duplicate<br> button<br> on the toolbar. A new template item is added to the same group as the original, and selected.</p><p>Click Duplicate The Duplicate button on the toolbar. A new template item is added to the same group as the original, and selected.</p></body></html>

3、水平线标签< hr />

<!DOCTYPE html><html> <head> <title>你好世界</title> </head> <body> <h1>我去春游</h1> <p>我玩得<em>很开心</em></p> <p>明天接着去!</p> <hr> </body></html>

五、列表元素

1、有序列表< ol>

<h1>有序列表</h1><ol> <li>cc</li> <li><a href="https://www.baidu.com/">百度</a></li> <li><img src="cc.jpg" height="120"></li></ol>

2、无序列表< ul>

<h1>无序列表</h1><ul> <li>cc</li> <li><a href="https://www.baidu.com/">百度</a></li> <li><img src=".jpg" height="120"></li></ul>

3、自定义列表< dl>

<h1>自定义列表</h1><dl> <dt>标题</dt> <dd>项1</dd> <dd>项2</dd> <dd>项3</dd></dl>

六、div与span标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>关于 div 和 span</title></head><body> <!-- 每个 div 都是独立的,结束后必须跟换行 --> <div>111</div><div>222</div> <!-- span 不换行 --> <span>AAA</span> <span>BBB</span> <span>CCC</span></body></html>

七、URL简介

八、图像标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>关于图片</title></head><body> <!-- 浏览器取到的资源还是原图资源,只是最终显示的时候缩放 --> <img src="cc.jpg" height="300" alt="这是一个头像"></body></html>

九、超链接标签< a>

1、文本链接

<a href="target.html">本地的一个资源页</a><a href="https://www.baidu.com/">在当前页打开百度</a>

2、锚点链接

3、target 属性

总结

主要记住一些常用的标签,如标题系列、段落、换行等文本标签以及一些语义标签还有重要的图片标签等,在使用过程中可以查看W3school网站、mdn文档使用。

我是云鹿,一个从事前端五年的码农,积累了一些学习资源学习方法等等,在自学的伙伴也可以加入我组建的零基础前端学习营,我会督促大家打卡学习,遇到问题可以一起探讨解决;需要学习资料的伙伴也可以找我免费领取;平时还会组织小项目,大家可以练习巩固基础。

关键词:基础,语言

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭