前端（第十九天）：HTML网页技术；

最新推荐文章于 2023-02-21 20:43:25 发布
最新推荐文章于 2023-02-21 20:43:25 发布
阅读量51 收藏
点赞数
分类专栏： Java基础 文章标签： html html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56036033/article/details/120041935
版权

一，什么是前端

前端位于程序的首要开发内容，直接和用户打交道，是超文本标记语言，用来完成一个静态网页，

二，基本架构

结构：由大量的标签组成，标签都是成对出现的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" /><!-- 设置了编码值 -->
        <title></title><!-- 设置了标题 -->
    </head>
    <body><!-- 体部分，指定网页要展示的内容 -->
        
    </body>
</html>

三，标签

1.<br/>:换行(自闭标签)

2.&nbsp;:换行

3.<h1></h1>(1~6):标题

4.     <ul>
            <li>唐僧</li>
            <li>孙悟空</li>
            <li>猪八戒</li>：无序列表
            <li>沙悟净</li>
        </ul>

5.<ol>
            <li>唐僧</li>
            <li>孙悟空</li>
            <li>猪八戒</li>：有序列表
            <li>沙悟净</li>
        </ol>

6.<img src="img/8534059.jpg" width="400px" height="400px">：引入图片，及设置大小；

7.<a href="most.html" target="_blank">点</a>：超链接，跳转，target="_blank"：用新窗口打开；

8.<a href="#dop">回到底部</a>
    <a name="top">我是顶部</a>锚定

<a href="#top">回到顶部</a>
        <a name="dop">我是底部</a>

9.<!-- input 输入框 -->
        <input type="text" /></br><!-- 普通文本框 -->
        <input type="password" /></br><!-- 密码 -->
        <input type="radio" /></br><!-- 单选框 -->
        <input type="number" /></br><!-- 数字值 -->
        <input type="week" /> </br><!-- 日历-->
        <input type="checkbox"/></br><!-- 复选框 -->
        <input type="button" /></br>
        <input type="submit" />

10.表格

<table border="cellspacing">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
        </table>

11，合并单元格

<body>
        <!-- colspan：列合并 rowspan 行合并 -->
        <table bgcolor="bisque" border="2px" widtd="300px">
           <tr>
                <td colspan="2">1</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td rowspan="9">6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
            </tr>
        </table>

12.表单标签应用

<h1>注册表单</h1>
        <form method=“post” action=“#”>
            <table width="500px" border="2px" bgcolor="azure" cellspacing="0">
                <tr>
                    <td>用户名</td>
                    <td><input type="text" /></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" /></td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td><input type="password" /></td>
                </tr>
                <tr>
                    <td>昵称</td>
                    <td><input type="text" /></td>
                </tr>
                <tr>
                    <td>邮箱</td>
                    <td><input type="email" /></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td><input type="radio" />男<input type="radio" />女</td>
                </tr>
                <tr>
                    <td>爱好</td>
                    <td><input type="checkbox" />篮球<input type="checkbox"/>足球<input type="checkbox"/>排球</td>
                </tr>
                <tr>
                    <td>城市</td>
                    <td>
                        <select>
                            <option>--请选择--</option>
                            <option>北京</option>
                            <option>上海</option>
                            <option>广州</option>
                            <option>深圳</option>
                            <option>淮北</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>头像</td>
                    <td><input type="file" /></td>
                </tr>
                <tr>
                    <td>验证码</td>
                    <td><input type="test" />
                    <img src="img/wa.png" />
                    <button>换一张</button>
                    </td>
                </tr>
                <tr>
                    <td>自我描述</td>
                    <td><textarea>自我描述</textarea></td>
                </tr>
                <tr>
                    <td colspan="2"><center><input type="button" value="提交"/><input type="reset" value="重置"/></center></td>
                    
                </tr>
            </table>
        </form>

13，form标签

form标签用来把页面填写的数据交给后台的java程序

提交数据有两种方式：get 和post

区别：get方式提交数据是在地址栏，默认方式，安全性底，长度受限（可以看到提交的数据）

        post方式提交数据不在地址栏，安全性高，没有上限（看不到提交的数据）

method方式提交数据不在地址栏，安全性高

14table标签

select用来定义一个下拉框。option标签用来定义选项

testarea用来描述一个大的文本框

button标签用来表示一个按钮

src属性用来定义图片的位置

程序员慕慕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
网页开发基础——HTML技术
liuxt_9的博客
08-04 1299
HTML：（超文本标记语言） 主要作用是通过HTML标记对网页中的文本、图片、声音等内容进行描述。 带< >符号的元素被称为HTML标记，标记是放在标记符（< >）中的用户表示某个功能的编码命令，也称为HTML标签或元素。 1.<!DOCTYPE>标记 位于文档最前面，用于向浏览器说明当前文档使用的是哪种HTML，如7-1使用的是HTML5。通常网页必须在开头处使用<!DOCTYPE>标记为所有的HTML文档指定HTML版本和类型。只有这样浏览器才能将该网页
Web页面使用技术(JS CSS HTML)
08-11
JS HTML CSS课件 附源代码实例
HTML技术
weixin_45536396的博客
12-16 1204
HTML技术 一：引言 1.概念 ​ 1）标记语言：使用一些特殊的标记符号对所要展示的文本内容进行标记说明，不会向机器发出指令，不体现具体的业务信息 ​ 2）超文本标记语言（HTML）:对文本内用的显示样式，风格进行标记说明 ​ 3）可扩展标记语言（xml）：对文本内容的含义进行标记说明 2.HTML说明 ​ 1）使用HTML技术定义文档，通常称为“网页”，文件名会以.html 或者.htm为结尾...
html是网页技术,Html静态网页技术小结
weixin_32187691的博客
07-10 316
《Html静态网页技术小结》由会员分享，可在线阅读，更多相关《Html静态网页技术小结(4页珍藏版)》请在人人文库网上搜索。1、Html静态网页技术小结l Html入门n 所有的html网页都是有标签(W3C规定标准标签)n 所有的标签使用标准： ，而标签不区分大小写n IE浏览器对html源代码是解释执行(在加载网页代码的时候，浏览器碰到一行，就执行并显示一行做设置的效果)n 常见标签：标签名称...
《HTML5+CSS3从入门到精通》源码17和19章
09-12
源自于清华大学出版社出版的《HTML5+CSS3从入门到精通》中的教学资源,非常适合初学者自学网页设计.由于上传文件大小有限制,只好分成多个文件分别上传.一共19章,这是17和19章.
java web 前端开发技术调查问卷.docx
12-26
* JSP（Java Server Pages）是 Sun Microsystems 公司开发的一种动态网页技术，用于生成动态网页。 * Flex 是 Adobe 公司开发的一种 Rich Internet Application（RIA）技术，用于构建丰富的互联网应用程序。 * JSF...
HTML5程序设计（第2版）.[荷]Peter Lubbers(带详细书签).pdf
06-18
《深入HTML5编程(第 2版)》首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化，同时揭示了HTML5背后的设计原理。本书在上一版的基础上新增了SVG和拖放API相关内容，并对部分内容进行了更新。...
HTML 网页解析技术的一些资料
麦兜猴的专栏
12-23 1945
现在做 Code Manager .SWT 的过程中不可避免的遇到了需要抓存网页以及网页内嵌的一些资源的问题.现在MHT 生成已经不成问题, 但是如何探测源文件编码以及把 MHT 解压缩(导出)为可以浏览的 HTML 文件(含图片等)是个大问题,以及用户可视化编辑页面后重新保存为 MHT 的问题. Java 的 MHT 处理技术目前是有一家美国公司在卖, 还好我也实现了,正在考虑完
HTML简介
wada64的博客
07-25 4072
HTML全称为HyperTextMark-upLanguage，翻译为超文本标签语言，标签也称作标记或者元素。HTML是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是由HTML标签组成的描述性文本，HTML文本可以说明文字、图形、动画、声音、表格、链接等。HTML的特点简单灵活，可扩展性，平台无关性。.........
前端 html+css+javascript (三剑客) 未完待续~~~
m0_57642521的博客
11-20 428
网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。 （1）HTML HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。 （2）CSS CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。 内部样式 <style></style>..
2023年HTML史上最全技术汇总（一）
Axiaorou的博客
02-21 1127
2023最全HTML汇总（一）
HTML介绍
weixin_47720326的博客
04-23 4603
一、介绍 01：web前端三大核心技术： HTML：负责网页的制作 CSS：负责网页的样式、美化 JS：负责网页的行为 02：什么是HTML？ HTML是用来描述网页的一种语言 03：HTML标签 单标签<HTML> 双标签<b>内容<b> 04：标签属性 属性格式：属性名＝“属性值” <a href＝“http：//www.jd.com”>京东</a> 二、HTML骨架标签 注：①html：根标签，所有的内容都应该放到html
一、HTML技术
qq_54398027的博客
11-20 1466
一、HTML 1.什么是HTML HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 2.HTML基本标记 二、CSS技术 1.什么是CSS CSS是一种样式表语言，用于为HTML文档定义布局。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字
HTML5技术简介
zz_xyz的博客
08-21 1193
1. 介绍 HTML是超文本标记语言的英文缩写，这是一种标记语言，不需要进行编译，直接由浏览器执行。HTML文件是一个文本文件，包含了一些HTML元素、标签等。目前HTML语言最新版本为4，W3C发布了最新的HTML5工作草案，HTML工作组包括AOL、Apple、Google、IBM、 Microsoft、Mozilla、Nokia、Opera等数百个开发上。 HTML5解决了HTML4...
html网页页面制作用到了什么技术,制作网页需要学习哪些技术？
weixin_32767301的博客
06-03 1307
HTML 4.01HTML是Web的语言，每一个Web开发者都需要对它拥有基本的了解。HTML 4.01是重要的Web标准，它与HTML 3.2的差异非常之大。当类似font的标签和color属性被添加到HTML 3.2后，它就逐渐成为开发人员们的一场噩梦。开发那些必须把字体信息加入每个单独页面的网站，其过程成为了一种漫长而昂贵的折磨。通过HTML 4.01，所有的格式化信息可以被移出HTML文档...
HTML基本元素
gedoua的博客
08-21 151
[code="java"] 这是网页的标题 .center{text-align: center; color:red} 这是网页显示的内容 This paragraph will be right-aligned. This paragraph will be center-alig...
前端商城项目经验：项目概述和岗位职责，技术栈
最新发布
06-08
1. HTML/CSS/JavaScript：前端基础技术； 2. React/Vue/Angular：前端框架； 3. Webpack：前端构建工具； 4. Axios/Fetch：前端网络请求库； 5. Git：版本控制工具； 6. ESLint/Prettier：代码规范和格式化工具。 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

程序员慕慕

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

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

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

打赏作者

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

抵扣说明：

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

余额充值