HTML使用

最新推荐文章于 2022-10-11 17:53:19 发布
最新推荐文章于 2022-10-11 17:53:19 发布
阅读量911 收藏 1
点赞数
分类专栏： JavaWeb 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51409098/article/details/126171022
版权

目录

一、HTML 简介

1、网页的组成部分

2、HTML是什么

3、创建HTML

二、HTML的使用

1、书写规范

2、font 字体标签

3、标题标签

4、超链接

5、列表标签

6、img 标签

7、表格标签

8、跨行跨列表格

9、iframe 框架标签 (内嵌窗口)

10、表单标签

11、其他标签

一、HTML 简介

1、网页的组成部分

页面由三部分内容组成

分别是内容（结构）、表现、行为。

  • 内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容    我们使用 html 技术来展示。
  • 表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用 CSS 技术实现
  • 行为，指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现

2、HTML是什么

Hyper  Text Markup Language   （超文本标记语言）    简写：HTML

HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

3、创建HTML

1、创建一个  web 工程（静态的  web 工程）

2、在工程下创建  html  页面 

二、HTML的使用

1、书写规范

<html>                                表示整个html页面的开始
    <head>                            头信息
        <title>标题</title>           标题
    </head>
    <body>
        页面主体内容                   body 是页面的主体内容 
    </body>
</html>                               表示整个html面的结束

注：Java 文件是需要先编译，再由  java  虚拟机跑起来。但  HTML  文件它不需要编译，直接由浏览器进行解析执行。

2、font 字体标签

<body>
    <!-- 字体标签
        font标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
            color属性修改颜色 
            face属性修改字体 
            size属性修改文本大小
    -->
    <font color="red" face="宋体" size="7">我是字体标签</font> 
</body>

3、标题标签

<body>
    <!-- 标题标签
        h1 - h6 都是标题标签
        h1 最大
        h6 最小

        align 属性是对齐属性 
            left     左对齐(默认) 
            center   剧中
            right    右对齐 
    -->
    <h1 align="left">标题  1</h1> 
    <h2 align="center">标题  2</h2> 
    <h3 align="right">标题  3</h3> 
    <h4>标题  4</h4>
    <h5>标题 5</h5> 
    <h6>标题 6</h6> 
    <h7>标题 7</h7>
</body>

4、超链接

<body>
    <!-- a标签是超链接

            href属性设置连接的地址
            target属性设置哪个目标进行跳转
                _self    表示当前页面(默认值)
                _blank   表示打开新页面来进行跳转 
    -->
    <a href="http://localhost:8080">百度</a><br/>
    <a href="http://localhost:8080" target="_self">百度_self</a><br/> 
    <a href="http://localhost:8080" target="_blank">百度_blank</a><br/>
</body>

5、列表标签

<body>
    <!--
        ul 是无序列表
            type属性可以修改列表项前面的符号 
        li 是列表项
    -->
    <ul type="none"> 
        <li>赵四</li> 
        <li>刘能</li> 
        <li>小沈阳</li> 
        <li>宋小宝</li>
    </ul> 
</body>

6、img 标签

<body>
    <!--
        img标签是图片标签,用来显示图片 

            src属性可以设置图片的路径 
            width属性设置图片的宽度 
            height属性设置图片的高度 
            border属性设置图片边框大小
            alt属性设置当指定路径找不到图片时,用来代替显示的文本内容

        在 JavaSE中路径也分为相对路径和绝对路径. 
            相对路径:从工程名开始算
            绝对路径:盘符:/目录/文件名 

        在 web中路径分为相对路径和绝对路径两种
            相对路径:
                .      表示当前文件所在的目录 
                ..     表示当前文件所在的上一级目录
                文件名  表示当前文件所在目录的文件,相当于 ./文件名  ./ 可以省略
            绝对路径:
                正确格式是: http://ip:port/工程名/资源路径 
                错误格式是: 盘符:/目录/文件名
    -->
<img src="1.jpg" width="200" height="260" border="1" alt="美女找不到"/> 
<img src="../2.jpg" width="200" height="260" />
<img src="../imgs/3.jpg" width="200" height="260" /> 
<img src="../imgs/4.jpg" width="200" height="260" /> 
<img src="../imgs/5.jpg" width="200" height="260" /> 
<img src="../imgs/6.jpg" width="200" height="260" />
</body>

7、表格标签

<body> 
    <!--
        table 标签是表格标签 

            border 设置表格标签 
            width 设置表格宽度 
            height 设置表格高度
            align 设置表格相对于页面的对齐方式
            cellspacing 设置单元格间距
            align 设置单元格文本对齐方式  

        tr 是行标签
        th 是表头标签
        td 是单元格标签
        b 是加粗标签
    -->
    <table align="center" border="1" width="300" height="300" cellspacing="0">
        <tr>
            <th>1.1</th> 
            <th>1.2</th>
            <th>1.3</th> 
        </tr>
        <tr>
            <td>2.1</td> 
            <td>2.2</td> 
            <td>2.3</td>
        </tr> 
        <tr>
        <td>3.1</td> 
        <td>3.2</td> 
        <td>3.3</td>
        </tr>
    </table> 
</body>

8、跨行跨列表格

<body>
    <!--
        新建一个五行，五列的表格， 
        第一行，第一列的单元格要跨两列， 
        第二行第一列的单元格跨两行， 
        第四行第四列的单元格跨两行两列。

            colspan 属性设置跨列 
            rowspan 属性设置跨行 
-->
    <table width="500" height="500" cellspacing="0" border="1">
        <tr>
            <td colspan="2">1.1</td> 
            <td>1.3</td>
            <td>1.4</td> 
            <td>1.5</td>
        </tr> 
        <tr>
            <td rowspan="2">2.1</td> 
            <td>2.2</td>
            <td>2.3</td> 
            <td>2.4</td> 
            <td>2.5</td>
        </tr> 
        <tr>
            <td>3.2</td> 
            <td>3.3</td> 
            <td>3.4</td> 
            <td>3.5</td>
        </tr> 
        <tr>
            <td>4.1</td> 
            <td>4.2</td> 
            <td>4.3</td>
            <td colspan="2" rowspan="2">4.4</td> 
        </tr>
        <tr>
            <td>5.1</td> 
            <td>5.2</td> 
            <td>5.3</td>
        </tr>
    </table> 
</body>

9、iframe 框架标签 (内嵌窗口)

<body>

    我是一个单独的完整的页面<br/><br/>

    <!--
        ifarme标签可以在页面上开辟一个小区域显示一个单独的页面 

        ifarme和 a标签组合使用的步骤:
            1、在iframe标签中使用name属性定义一个名称
            2、在a标签的target属性上设置 iframe的 name的属性值
    -->

    <iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe> 
    <br/>

    <ul>
        <li><a href="0-标签语法.html" target="abc">0-标签语法.html</a></li> 
        <li><a href="1.font标签.html" target="abc">1.font标签.html</a></li> 
        <li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li>
    </ul> 
</body>

10、表单标签

<body>
    <!--
        form标签就是表单

        input type=text     是文件输入框   value设置输入框默认显示内容
        input type=password 是密码输入框  value设置输入框默认显示内容
        input type=radio    是单选框   name属性可以对其进行分组  checked="checked"表示默认选中                          
        input type=checkbox 是复选框     checked="checked"表示默认选中
        input type=reset    是重置按钮     value属性修改按钮上的文本
        input type=submit   是提交按钮     value属性修改按钮上的文本
        input type=button   是按钮      value属性修改按钮上的文本
        input type=file     是文件上传域
        input type=hidden  是隐藏域    当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）

        select 标签是下拉列表框
        option 标签是下拉列表框中的选项    selected="selected"设置默认选中 

        textarea 表示多行文本输入框    （起始标签和结束标签中的内容是默认值）
            rows 属性设置可以显示几行的高度 
            cols 属性设置每行可以显示几个字符宽度
    --> 

    <form>
        用户名称：<input type="text" value="默认值"/><br/> 
        用户密码：<input type="password" value="abc"/><br/> 
        确认密码：<input type="password" value="abc"/><br/>
        性别：<input type="radio" name="sex"/>男<input type="radio" name="sex" checked="checked" />女<br/> 
        兴趣爱好：<input type="checkbox" checked="checked" />Java
                 <input type="checkbox" />JavaScript
                 <inputtype="checkbox" />C++<br/> 
        国籍：<select>
                <option>--请选择国籍--</option>
                <option selected="selected">中国</option> 
                <option>马来西亚</option>
                <option>俄罗斯</option> 
             </select><br/>
        自我评价：<textarea rows="10" cols="20">我才是默认值</textarea><br/> 
        <input type="reset" value="重置" />
        <input type="submit"/> 
    </form>
</body>

表单提交细节

<body>
    <!--
        action属性设置提交的服务器地址
        method属性设置提交的方式  GET(默认值)或  POST 

        表单提交的时候，数据没有发送给服务器的三种情况：
            1、表单项没有  name属性值
            2、单选、复选（下拉列表中的  option标签）都需要添加  value属性，以便发送给服务器
            3、表单项不在提交的  form标签中

        GET请求的特点是：
            1、浏览器地址栏中的地址是：action属性[+?+请求参数] 
                请求参数的格式是：name=value&name=value
            2、不安全
            3、它有数据长度的限制

        POST请求的特点是：
            1、浏览器地址栏中只有  action属性值
            2、相对于  GET请求要安全
            3、理论上没有数据长度的限制
    -->
    <form action="http://localhost:8080" method="post"> 
        <input type="hidden" name="action" value="login" /> 
        <h1 align="center">用户注册</h1>
        
        <table align="center">
            <tr>
                <td> 用户名称：</td> 
                <td>
                    <input type="text" name="username" value="默认值"/> 
                </td>
            </tr> 
            <tr>
                <td> 用户密码：</td>
                <td>
                    <input type="password" name="password" value="abc"/>
                </td> 
            </tr>
            <tr>
                <td>性别：</td> 
                <td>
                    <input type="radio" name="sex" value="boy"/>男
                    <input type="radio" name="sex" checked="checked" value="girl" />女 
                </td>
            </tr> 
            <tr>
                <td> 兴趣爱好：</td> 
                <td>
                    <input name="hobby" type="checkbox" checked="checked" value="java"/>Java 
                    <input name="hobby" type="checkbox" value="js"/>JavaScript
                    <input name="hobby" type="checkbox" value="cpp"/>C++ 
                </td>
            </tr> 
            <tr>
                <td>国籍：</td> 
                <td>
                    <select name="country">
                        <option value="none">--请选择国籍--</option>
                        <option value="cn" selected="selected">中国</option> 
                        <option value="usa">马来西亚</option>
                        <option value="jp">俄罗斯</option> 
                    </select>
                </td> 
            </tr> 
            <tr>
                <td>自我评价：</td>
                <td>
                    <textarea name="desc" rows="10" cols="20">我才是默认值</textarea>
                </td> 
            </tr>
            <tr>
                <td>
                    <input type="reset" />
                </td>
                <td align="center">
                    <input type="submit"/>
                </td> 
            </tr>
        </table> 
    </form>
</body>

11、其他标签

<body>
    <!--
        div标签          默认独占一行
        span标签         它的长度是封装数据的长度
        p段落标签         默认会在段落的上方或下方各空出一行来（如果已有就不再空） 
    -->
    <div>div标签  1</div> 
    <div>div标签  2</div> 
    <span>span标签  1</span> 
    <span>span标签  2</span> 
    <p>p段落标签  1</p>
    <p>p段落标签  2</p> 
</body>

小鲁蛋儿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML简单介绍和使用
lmz的博客
12-19 377
HTML简单介绍和使用
HTML超详细教程
weixin_60535956的博客
03-27 9056
详细介绍HTML相关基础知识（含大量实例）
html的基本使用
m0_72694993的博客
10-11 1316
a标签中的内容可以被点击进行跳转到指定页面，href中填入的是点击后跳转的页面，其中可以用#代替本页面,额外参数target="_blank"，写入后再次点击a标签的内容不会从当前页面进行跳转，而是打开一个新的窗口并跳转到指定页面。3.单选框（type是radio,值得注意的是，具有相同name属性的才具有单选框的特性，也就是选一个）12.table tr td th元素，其中table是表格，th是表头元素，td是列，tr是行。示例：（第一行用的是绝对路径，第二行是相对路径，第三行第四行是错误的路径）
HTML的使用方法
weixin_58744201的博客
01-09 3022
1.HTML 标签的语法格式 一般情况下，一个 HTML 标签由开始标签、属性、内容和结束标签组成，标签的名称不区分大小写，但大多数属性的值需要区分大小写（为了规范和专业，建议在定义标签时一律采用小写），如下所示： 除了 class 属性外，开始标签中还可以包含其它属性信息，比如 id、title 等，这些我们会在后面进行讲解。 一个 HTML 文档中必须具有一些基本的标签，以便浏览器区分普通文本和 HTML 文档。您可以根据想要实现的效果使用任意数量的标签，但有以下几点需要注意： 所有 HTM
如何使用html制作网页
热门推荐
LOVEGOOD1的博客
09-12 5万+
如何使用html制作网页 一、html简介 1.1概念 HTML即HyperText Mark-up Language ，意思是超文本标记语言。HTML不是一种编程语言，而是一种标记语言。超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，这种语言制作的文件保存的是一个文本文件，文件的扩展名为 .html 或者 .htm。html文档也叫 Web页面 ，其实就是一个网页。如果用浏览器打开 ，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外
【HTML】HTML语言的使用方式和详细说明___完整教程（总结）
04-19 3440
什么是 HTML？ HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页
winform 使用html做界面
01-05
9. **自定义渲染**：对于更高级的场景，可以使用`WebBrowser control`的`WebBrowser DocumentCompleted`事件，结合`AxInterop.SHDocVw`库，直接操作IE的COM接口，以实现更复杂的HTML渲染和交互。 通过以上方法，...
圣诞树HTML.html
12-17
圣诞树HTML，下载点击即可使用，表白神器
html使用百度地图，显示指定坐标点，并提示坐标点信息
02-17
html使用百度地图，显示指定坐标位置，并提示坐标点信息
HTML动态爱心代码爱心满屏
11-07
HTML动态爱心代码满屏爱心免费下载
一套后台管理html模版
08-04
通常，HTML模版的使用涉及到HTML、CSS（层叠样式表）和JavaScript的熟练掌握，特别是对于响应式设计和交互元素的理解。 【标签】：“后台”、“html” 后台通常指的是服务器端处理业务逻辑和数据的部分，而HTML...
CSS使用方法
我爱编程持之以恒
05-07 1596
css就是规定各种显示风格样式的名称和设置值的规则。它有4种方式可以将样式加入到HTML中，分别是内联样式表、嵌入样式表、外联样式表、输入样式表。        ①内联样式表：在html标签中直接使用style属性。它适用于只需要将一些简单的样式应用于某个独立的元素的情况。在使用时，需要在head标签中添加meta标签，如下： 使用方法如下：        ②嵌入样式表：在
html代码要怎么使用,HTML代码怎么使用
weixin_33425215的博客
07-05 1741
一、基本框架如同人一样，网页也包括了“头部”和“身体”，＜head＞标记内包含着诸如、语言编码、网页描述等基本信息，而平时我们真正见到的网页内容均放在＜body＞标记内。现在先介绍一下＜head＞里的基本信息。网页标题(标记格式为＜title＞＜/title＞)创建网页标题文字：＜title＞标题＜/title＞ //此处书写的文字会显示在IE的标题栏上。网页文档信息(标记格式为＜meta＞)描述...
HTML的怎么使用，开发工具以及常用标签。
冰山一树Sankey的博客
03-09 8852
HTML的怎么使用，开发工具以及常用标签。 前端学习：学习地址：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动，下面这些都是一些学习笔记。临渊羡鱼，不如退而结网！！愿我自己学有所成，也愿每个前端爱好者学有所成 一. HTML语法规范 1.1 基本语法概述 HTML 标签是由尖括号包围的关键词，例如 <html> HTML 标签通常是成对出现的，例如<html>和 </html>称为双标签。标签对中的第一个标签是 开始标签，第
html使用
悲欢离合
04-25 777
1.html说明 1.1<!--注解 --> 注释:解释说明，对代码的说明；注释浏览器不解析 2html:超文本标签语言 浏览器解析； 弱语言：偶尔写错浏览也能解析；程序员编写的时候尽量规范； 3标签的作用：让html页面语义化 4标准的html格式 文档声明：<!doctype html> html标签：包括所有内容 head标签：文档头，包括一些关于页...
HTML基础代码用法大全,html基础(示例代码)
weixin_28683689的博客
06-07 1014
讲解html得常用基础知识，建议阅读时间10分钟html基本概念：HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML文件的扩展名为.html 或 .htm基本...
C# 仿VS2012的设计界面
遇见--专栏
03-02 8620
1 使用开发语言C# 2 实现效果，如图 3 支持项目文件支持，保存，编译 4 支持导入到apple ipad 5 支持导入图片，解析等 6 支持布局，拖拽控件，设置大小，改变背景，字体大小，对齐方式等 完整的效果观看请到百度网盘区看 :https://pan.baidu.com/s/1dGrEvE5 文章末尾有测试demo，欢迎下载 demo下载地址:......
html代码 如何使用方法,如何使用html代码
weixin_39618574的博客
06-07 833
如果你正在学习网页制作，就一定会跟HTML打交道。虽然有很多编辑工具可以简化操作，避开复杂的网页代码，但是想要成为一名真正的网页设计师，学好HTML、看懂网页代码才是迈向成功的第一步。HTML，中文译为超文本标记语言。简单理解为某些字句加上标志的语言，从而实现预期的特定效果。网页正是由这种HTML语言所编写出来的。作为一套标记语言，基本上只要明白各种标记的用法就算学会了HTML.HTML的语法格式...
html使用SVGA
最新发布
09-08
HTML本身不支持直接使用SVG动画格式（SVGA），但是可以通过使用SVG标签和CSS来展示静态的SVG图像。SVG（可缩放矢量图形）是一种基于XML的矢量图形格式，可以用于创建矢量图形和动画效果。要在HTML中展示SVG图像，你...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小鲁蛋儿

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

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

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

打赏作者

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

抵扣说明：

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

余额充值