HTML入门（安装webstrom、常用标签、a标签、列表、表格）

最新推荐文章于 2023-06-09 00:00:00 发布
最新推荐文章于 2023-06-09 00:00:00 发布
阅读量534 收藏 4
点赞数
文章标签： html python web css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sjjsaaaa/article/details/118527487
版权
本文是一篇HTML5入门教程，介绍了如何安装WebStorm开发工具，并详细讲解了HTML的基础知识，包括定义、常用标签如标题、超链接、列表和表格的使用。同时，还涉及了WebStorm的配置，如浏览器设置、字体大小和主题颜色的调整。
摘要由CSDN通过智能技术生成

html入门

A.安装websteom开发工具

websteaom是一款开发前端技术的IDE（集成开发环境），目前比较的IDE还有Hbuilder、Dreamweaver、

下载地址：
https://www.jetbrains.com/webstorm/

B.html定义

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

目前的html版本是html5，简称H5,目前市面上的PC短的网站、webAPP、小程序等都离不开H5+css3。

W3C是万维网联盟组织，用于指定W3C标准，我们按照W3C标准编写html代码，通过浏览器内核解析就能够显示一个完成的网页！

C.webstrom配置

配置浏览器：

在这里插入图片描述

更改字体大小：

在这里插入图片描述

更改背景主题颜色：

在这里插入图片描述

D.WS代码：(常用标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网站</title>
</head>
<body>
    <!--注释，对代码进行说明解释-->
    这是普通文本
    <h1>这是一级标提标签</h1>
    <h2>这是二级标题</h2>
    <h6>这是最小的标题标签</h6>
    我们是<br/>我们爱<br/>
    我是伙计
    我爱喝醋
    <p>p标签是一个人段落标签</p>
<hr/>
    <p>我们是<strong>科技</strong>公司</p>
    <p>我们>&gt;是&nbsp;人</p>
    <img src="D:images/hetao.jpg">
    <img src="images/hetao.jpg"
     alt="当图片显示不了代替文字"
     width="200px"
     height="200px"
     title="核桃">
    <!--
    /根路径
    ./当前路径
    ../上一级目录
    ../../上上级目录
    -->
<img src="../第二天/images/xdt.jpg">
    <!--
    总结：
    标题标签：h1
    换行：br
    段落：p
    加粗：strong b
    水平线：hr
    图片标签：img
    特殊符号：&gt；&lt;
    -->
</body>
</html>

代码总结：
标题标签：h1
换行：br
段落：p
加粗：strong b
水平线：hr
图片标签：img
特殊符号：&gt；&lt；

E.超链接

a.页面连接

1.文本链接

  • href: 跳转的目标地址

  • target 属性：

  • ​ _blank：新的窗口打开新页面。

  • ​ _self:当前窗口打开新页面 。

<!-- 文本连接 -->
    <a href="INDEX.html">点击</a>
    <a href="INDEX.html" target="_blank">点击</a>

2.图像链接

<!-- 图片连接 -->
<a href="INDEX.html" target="_blank">点击<br/><img src="images/hetao.jpg"></a>
最低0.47元/天 解锁文章
黎明之道
关注
「HTML和CSS入门指南」a 标签详解
a451319296的博客
06-04 6338
标签是 HTML 中用于定义超链接的标签，可以用来实现网页间的跳转、下载文件等功能，并且可以与其他 HTML 元素配合使用。通过灵活运用 标签和属性，我们可以帮助用户更好地浏览页面内容，同时也可以美化和装饰页面。在实际应用中需要注意遵循 HTML 的规范，合理设置各种属性，并且避免滥用嵌套其他元素。
C++常用软件分析工具从入门到精通案例集锦汇总
最新发布
dvlinker的技术专栏
06-26 11万+
C++软件分析工具案例分析集锦！根据近几年C++软件异常排查的项目实践，详细地讲述如何使用PE工具、Dependency Walker、GDIView、Process Explorer、Process Monitor、API Monitor、Clumsy、DebugDiag、Windbg、IDA Pro等常用分析工具，以及如何使用这些工具去巧妙地分析和解决日常工作中遇到的问题，有很强的实战参考价值！
WebStorm练习笔记
人生每一步都书写在自己的历史上
01-17 2057
overflow是css代码 最主要的用法有两种<div style="width:500px;height:22px;line-heihgt:22px;overflow:hidden">这里有一大长串文字</div>作用是当宽度文字超出500px，高度超出22px的时候，超出的部分隐藏起来……overflow:auto;作用是当超出设定的长宽时，出现滚动条 list-style 简写属性。用
jetBrains webstorm 时间表格
weixin_30319097的博客
09-04 251
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #clock{ width: 200px; ...
webstorm html设计表格,WebStorm学习HTML杂记
weixin_29530803的博客
06-05 515
option +拖拽鼠标:可以同时输入多行command + 左右键: 可以跳到行头行尾command+d:快速复制粘贴command+x :快速删除command+alt+t:选中文字插入标签文字过长自动换行:preferences->Editor->General之后找到Soft Wraps,选中Use soft wraps in editor注释:command+ /br标签 作...
webstorm快速输入标签
Cool的博客
07-26 4795
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;webstorm快键键&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;
「HTML和CSS入门指南」p 标签详解
a451319296的博客
06-04 5655
标签是 HTML 中用于定义段落的标签，常用于标记文章、新闻等长篇内容中的段落，并且可以与其他 HTML 元素配合使用。通过灵活运用 标签和属性，我们可以帮助用户更好地理解页面内容，同时也可以美化和装饰页面。在实际应用中需要注意遵循 HTML 的规范，避免滥用 标签，并且不要在 标签中嵌套其他 HTML 元素。
「HTML和CSS入门指南」article 标签详解
a451319296的博客
06-09 4320
article 标签是一个重要的标签，用于表示独立的、完整的文章或内容块。在使用 article 标签时，请注意选择正确的属性和方法、语义化和独立性，并避免兼容性问题。
「HTML和CSS入门指南」datalist 标签详解
a451319296的博客
06-04 3064
datalist 标签是一个重要的标签，在 HTML 中用于创建预定义选项列表。使用 datalist 标签可以帮助您提供更快、更方便的用户输入体验。在使用 datalist 标签时，请注意选择正确的属性和方法、提供适当的标签、描述文本和无障碍功能、验证表单数据，并避免兼容性问题。
在WebStorm中怎样让表格显示出来
weixin_44431951的博客
05-29 1413
在WebStorm中怎样让表格显示出来 开始的时候，我直接就使用table，没有加任何属性，运行后发现根本显示不出来表格形状： 加上以上属性之后就可以看见表格了。 ...
前端 12、有序列表
Xhj_1314的博客
10-06 435
1.什么是列表标签? 列表标签的作用: 给一堆数据添加列表语义, 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体 2.HTML中列表标签的分类 2.1无序列表(最多)(unordered list) 2.2有序列表(最少)(ordered list) 2.3定义列表(其次)(definition list) 3.无序列表作用: 给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分 ...
前端学习 : webstorm ide快速输入html等标签
火星男孩的分享空间
01-25 1万+
参考： 前端学习总结（二十）那些你可能不知道却强大方便的WebStorm快捷键 webstorm批量编辑快捷键【跳转到指定行，批量输入】 Intellij idea 快捷键(1)–生成for循环代码块 WebStorm快捷键收集 html lang="en"> head> meta charset="UTF-8"> title>webstorm快键键title> h
js ide WebStorm 使用总结
sdfhncfw的博客
11-08 593
js ide WebStorm 使用总结
使用Chrome开发者工具精确定位网页元素位置
hymsticker的博客
07-24 8759
使用chrome浏览器开发者工具精确定位元素位置，简单修改XPATH路径达到快速检索的目的
使用webstorm创建vue文件写表格
qy88666的博客
03-20 733
1.mian.js import Test from ‘./table.vue’ 2.table.vue <table border="1px"> <tr> <th>ID</th><th>姓名</th><th>性别</th><th>电话号码</th> ...
webstorm+vue+tailwind制作小表单
qq_28085257的博客
09-29 464
1.创建vue项目使用webstorm 2.安装 tailwind 3.创建tailwind.config.css ,postcss.config.js module.exports = { purge: [], darkMode: false, // or 'media' or 'class' theme: { minWidth: { '0': '0', '1/4': '25%', '1/2': '50%', '3/..
webStorm 2018 编写第一个html
weixin_42418774的博客
03-27 7501
第一次打开是什么项目都没有，所以需要新建项目： Location为新建项目位置，左侧可以选择新建项目类型，即空项目或指定框架下的项目，这里我们选择建立空项目(Empty Project). 如果进去过的，就File菜单栏下，选择New->Project新建项目 建好文件后就新建文件，把你想建的文件放在里面，比如我现在建一个放Css的文件： 接下来就是你想创建其他类型文件（...
webstorm怎么运行调试html
每一件自己觉得值得的事都要不留余力的去做
02-24 4万+
WebStorm教程（一）HTML5搭建：Hello，World！一.WebStrom 简介三.建立一个HTML文件1.打开WebStorm——Creat New Project——（左边栏）Empty Project——（给项目命名）——（选择）Creat（确认建立一个工程）2.进入编辑工程界面： 1） 在命名处右键——New——HTML File 2）（给页面命名）——OK如图： We
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黎明之道

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值