当前位置： 首页 > news >正文

【高级网络程序设计】Week2-3 HTML

news 2026/2/12 20:54:12

一、The Basics

1. HTML&HTML file

HTMLMarkup language
Hyper Text Markup Language
HTML fileText file with markup tags
.htm/.html extension

Create an html file

Open an editor

Type: <html><head><titile><body>

Save it as .html

Open it using a browser

2. HTML tags & HTML elements

HTML tagsmark-up HTML elements
<element content>
HTML elementsdefined using HTML tags
HTML documents text files made up of HTML elements
Basic HTML tagsParagraphs

<p></p>

(browsers automatically add an empty line before and after a paragraph)

Headings<h></h>
Line breaks

<br/>

(to enter line breaks, not to seperate paragraphs)

Horizontal rule<hr>
Comments<!-- -->
HTML document<html>
document's body<body>
the document's area for header/control infomation<head>
document's title<title>

二、Build a Web Page

1. HTML Attributes & HTML Text Formatting

HTML Attributesprovide additional information to an HTML element
case insensitive
HTML Text Formatting<b></b> bold
<strong></strong>strong
<bid></big>big
<em></em>emphasized
<i></i>italic
<small></small>small
<sub></sub>subscripted
<sup></sup>superscripted
<ins></ins>inserted
<del></del>deleted

2. Character Entities

non-breaking space&nbsp
less than&lt
greater than&gt
ampersand&amp
quotation mark&quot
pound&pound
yen&yen
euro&euro
section&sect
copyright&copy
registered trademark&reg
multiplication&times
division&divide

3. HTML Links

link to another document on the Web

<a href="linkpage.html">This text</a>

<a  href="http://www.qmul.ac.uk/">This text</a>

an image as a link

<a href="linkpage.html">

<img border="0" src="image.jpg" width ="65" height="38"></a>

Target: where to open the linked document

_blank: open in a new window or tab

<a href="http://www.qmul.ac.uk/" target="_blank"></a>

_self: open in the same frame as it was clicked

_parent: open in the parent frame

_top: open in the full body of the window

framename: open in a named frame

name and section

<a name="top">top of the page</a>

<a href="section.html"#top>Jump to the top</a>

4. HTML Tables/Lists/Images & Colors

HTML Tablesa table<table>
a table header<th>
table row<tr>
table cell<td>
table caption<caption>
table head<thead>
table body<tbody>
table footer<tfoot>
其他

Align the text: <td align = "left/right/center"></td>

Background colour: <table border = "1" bgcolor="red">

Background image: <table border = "1" background = "bg.jpg">

HTML

Lists

Unordered list

<ul>        <li></li>        </ul>

Ordered list<ol>        <li></li>        </ol>
Type of ordered list<ol type = "A/a/Ⅰ/i">

HTML

Images & Colors

Insert an image <img><img src = "image.gif" width = "144" height = "50">
alt attribute

define an "alternate text" for an image

<img src = "me.jpg" alt = "This is me">

Background image<body background="background.jpg">
Background color<body bgcolor="#d0d0d0">
Text colour<body bgcolor="#d0d0d0" text="yellow">

三、Handling User Input

1. HTML Forms and Input

HTML Formsselect different kinds of user input
an area that contain form elements that allow user to enter information
<form>        <input></input>        </form>
Inputtype is specified with type attribute

2. Text Fields/Password Fields/Radio Buttons/Check Boxes/Simple dropdown box/Fieldset/Textarea/Button

Text Fields 
<form action="">
<input type = "text" name="user">
</form>
name: the identifier that is sent to the server when you submit the form
Password Fields 
<form action="">
<input type="password" name="password">
</form>
displays asterisks or bullet points instead of characters
Radio Buttons 
<form>
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
</form>
select one of the choices
Check Boxes 
<form>
<input type = "checkbox" name="vehicle" value="bike">
<input type = "checkbox" name="vehicle" value="car">
</form>
select one or more options
Defining <label> for button

Each button should have a label

<label>: defines a label for an <input> element；

              allow a user to click on the label as well as the button

The for attribute of the <label> tag =  the id attribute of the related element

<form action="demo_form.asp">
    <label for = "male">Male</label>

    <input type = "radio" name="sex" id ="male" value="male">Male

    <label for = "female">Female</label>

    <input type = "radio" name="sex" id ="female" value="female">Female

    <input type = "submit" value="Submit">
</form>

Action attribute

define the name of the file to send the content to

the file defined in the action usually does something with the received input 

Submit attribute

the content of the form is sent to another file

Image act as a submit buttonThe image type is by default a form submitting button
Simple dropdown box

<form action="">

        <select name="cars">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="audi">Audi</option>
        </select>
</form>

Fieldset

<fieldset>
    <legend>
       Health information:
    </legend>
    <form action="">
        Height<input type="text" size="3">
        Weight<input type="text" size="3">
    </form>
</fieldset>

Textarea 
<textarea rows="10" col="30">    The cat was in the garden
</textarea>
 Button 
<form action=""><input type="button" value="Hello world!">
</form>
Difference between button and submit

<input type="button">: will not submit a form on their own——they don't do anying by default.

<input type="submit">: will submit the form they are in when the user clicks on them

Difference between id and name

The name attribute: what is sent when the form is submitted.

The id attribute: uniquely identifies any element on the page.

When the form is submitted, only the selected option is sent.

3. Form Tags

<form>a form for user input
<input>an input field
<textarea>a text-area
<label>a label to a control
<fieldset>a fieldset
<legend>a caption for a fieldset
<select>a selectable list
<optgroup>an option group
<option>an option in the drop-down box
<button>a push button

思维导图

Exercise

1. What is the difference between the three text boxes？

The values of them are different. 

2. What happens if you change this tag <body> to <body bgcolor=ccffcc>?

3. What happens if you add this tag after the body tag: <front face=arial>?

4. What happens if you delete a <br> tag?

5. What happens if you add this before the first text box:<h2>Please add information</h2>

6. What happens if you do NOT include the closing tag i.e. </h2>?

1. Does the page display what is written in the value attribute (e.g. pz) or what is written after the tag (e.g. pizza)?

No.

2. Can a user select more than one food type?

No. Checkbox can.

3. Change the name of the last radio button (i.e. the one for the salad), from name=food to name=morefood. Can the user now select more than one food type (e.g. salad and pasta)?

No.

1. Does the list show the word bungalow or bung?

bung.

2. In Internet Explorer (IE), add a space followed by the word selected after bungalow. Save the file and refresh the browser. What has changed? 

bung is selected by default.

1. Write the difference between the three textAreas? 1) 2) 3)

The name and default content

2. How would you correct the third textArea?

3. There is no value attribute – what is the value of a textArea?

The text content of it.

Lab2——html

Questions

1. What is HTML? How does it relate to HTTP?

· HTML is a mark-up language, which is used to build a web page and handle user input.

· HTTP is the application protocol which is used to request and response on the browser and client. 

· HTML build the web page, and HTTP send and receive the web page.

2. In HTML, you can have input of type submit, together with an associated button (like the Submit button in Error! Reference source not found.). What is supposed to happen when you click that button?

Button will not submit a form on their own, they don't do anything by default. However, submit buttons will submit the form they are in when the user clicks on them

相关文章：

【高级网络程序设计】Week2-3 HTML

一、The Basics 1. HTML&HTML file HTMLMarkup languageHyper Text Markup LanguageHTML fileText file with markup tags.htm/.html extension Create an html file Open an editor Type: <html><head><titile><body> Save it as .html Open i…...

编程日记 2023/11/23 20:25:08

来聊聊JVM中的类加载过程以及双亲委派模型(学习Java必知内容)

文章目录 1. 类加载过程加载验证准备解析初始化 2. 双亲委派模型一个类的加载流程双亲委派模型的优点 总结 1. 类加载过程 在整个 JVM 执行过程中, 和我们程序员关系最密切的就是类加载的过程, 所以接下来我们来看下类加载的执行流程. 对于一个类来说, 它的生命周期是这样的:…...

编程日记 2023/11/23 20:24:07

scala的类介绍

scala的类、抽象类、接口、对象 class :类&#xff0c; 通过new关键字来实例化&#xff0c;每次实例化都会创建一个新的对象&#xff1b;用来定义普通的类。object&#xff1a;对象&#xff0c;用来定义一个单例对象的&#xff0c;它只有一个实例&#xff0c;且在程序运行期间…...

编程日记 2023/11/23 20:23:06

1.Gin 介绍

1.Gin 介绍 介绍 Gin 是一个 Go (Golang) 编写的轻量级 http web 框架&#xff0c;运行速度非常快&#xff0c;如果你是性能和高效的追求者&#xff0c;我们推荐你使用 Gin 框架。 Gin 最擅长的就是 Api 接口的高并发&#xff0c;如果项目的规模不大&#xff0c;业务相对简单&a…...

编程日记 2023/11/23 20:22:04

华三无线控制器WX2540H配合准入做Portal认证

数据通信 - 建设篇 - 无线 第四章 华三无线控制器WX2540H配合准入做Portal认证 数据通信 - 建设篇 - 无线系列文章回顾华三无线控制器WX2540H配合准入做Portal认证前言其他配置优化参考来源系列文章回顾 第一章 华三无线控制器配置本地转发 第二章 华三无线控制器配置802.1X认…...

编程日记 2023/11/23 20:21:01

OAK相机通过振动测试！

编辑&#xff1a;OAK中国 首发&#xff1a;oakchina.cn 喜欢的话&#xff0c;请多多&#x1f44d;⭐️✍ 内容可能会不定期更新&#xff0c;官网内容都是最新的&#xff0c;请查看首发地址链接。 Hello&#xff0c;大家好&#xff0c;这里是OAK中国&#xff0c;我是助手君。 当…...

编程日记 2023/11/23 20:20:00

使用Pytorch从零开始构建RNN

在这篇文章中&#xff0c;我们将了解 RNN&#xff08;即循环神经网络&#xff09;&#xff0c;并尝试通过 PyTorch 从头开始​​实现其中的部分内容。是的&#xff0c;这并不完全是从头开始&#xff0c;因为我们仍然依赖 PyTorch autograd 来计算梯度并实现反向传播&#xff0c…...

编程日记 2023/11/23 20:18:59

Linux之实现简易的shell

1.打印提示符并获取命令行 我们在使用shell的时候&#xff0c;发现我们在输入命令是&#xff0c;前面会有&#xff1a;有用户名&#xff0c;版本&#xff0c;当前路径等信息&#xff0c;这里我们可以用环境变量去获取: 1 #include <stdio.h>2 #include <stdlib.h>…...

编程日记 2023/11/23 20:17:58

如何实现在公网下使用navicat图形化工具远程连接本地内网的MariaDB数据库

公网远程连接MariaDB数据库【cpolar内网穿透】 文章目录 公网远程连接MariaDB数据库【cpolar内网穿透】1. 配置MariaDB数据库1.1 安装MariaDB数据库1.2 测试局域网内远程连接 2. 内网穿透2.1 创建隧道映射2.2 测试随机地址公网远程访问3. 配置固定TCP端口地址3.1 保留一个固定的…...

编程日记 2023/11/23 20:15:56

MySQL InnoDB 引擎底层解析（三）

6.3.3. InnoDB 的内存结构总结 InnoDB 的内存结构和磁盘存储结构图总结如下&#xff1a; 其中的 Insert/Change Buffer 主要是用于对二级索引的写入优化&#xff0c;Undo 空间则是 undo 日志一般放在系统表空间&#xff0c;但是通过参数配置后&#xff0c;也可以用独立表空 间…...

编程日记 2023/11/23 20:14:55

浅析基于智能音视频技术的城市重要场馆智能监控系统设计

了解旭帆科技的朋友都知道&#xff0c;旭帆科技一直都乐于和大家分享各类场景的视频解决方案&#xff0c;今天小编就基于智能音视频技术的城市重要场馆智能监控系统设计和大家探讨一下。 基于智能音视频技术的城市重要场馆智能监控系统设计&#xff0c;主要包含以下要素&#x…...

编程日记 2023/11/23 20:13:54

hdu-lcy算法培训班 入门第一讲 数学基础

习题 F题...

编程日记 2023/11/23 20:12:53

获取ip属地（ip2region本地离线包-超简单）

背景 最近有涉及要显示ip属地&#xff0c;但我想白嫖&#xff0c;结果就是白嫖的api接口太慢了&#xff0c;要延迟3到4秒左右&#xff0c;很影响体验&#xff0c;而且不一定稳定。 结果突然看到了这个【ip2region】开源项目&#xff0c;离线识别ip属地&#xff0c;精度自己测…...

编程日记 2023/11/23 20:11:52

主流的低代码平台有哪些？程序员应该如何与低代码相处？

本文主要阐述低代码的概念&#xff0c;介绍目前主流的低代码平台&#xff0c;总结低代码平台的典型特征、存在优势以及未来发展趋势。并站在程序员的角度&#xff0c;分析如何在已经到来的低代码战争中&#xff0c;找到自己的定位&#xff0c;一展所长。 什么是低代码&#xff…...

编程日记 2023/11/23 20:10:51

华为---OSPF网络虚连接（Virtual Link）简介及示例配置

【1】OSPF网络虚连接&#xff08;Virtual Link&#xff09;简介 为了避免区域间的环路&#xff0c;OSPF规定不允许直接在两个非骨干区域之间发布路由信息&#xff0c;只允许在一个区域内部或者在骨干区域和非骨干区域之间发布路由信息。因此&#xff0c;每个ABR都必须连接到骨干…...

编程日记 2023/11/23 20:09:50

Python函数式编程：让你的代码更优雅更简洁

概要 函数式编程&#xff08;Functional Programming&#xff09;是一种编程范式&#xff0c;它将计算视为函数的求值&#xff0c;并且避免使用可变状态和循环。 函数式编程强调的是函数的计算&#xff0c;而不是它的副作用。 在函数式编程中&#xff0c;函数是第一类公民&a…...

编程日记 2023/11/23 20:08:46

艺术作品3D虚拟云展厅能让客户远程身临其境地欣赏美

艺术品由于货物昂贵、易碎且保存难度大&#xff0c;因此在艺术品售卖中极易受时空限制&#xff0c;艺术品三维云展平台在线制作是基于web端将艺术品的图文、模型及视频等资料进行上传搭配&#xff0c;构建一个线上艺术品3D虚拟展厅&#xff0c;为艺术家和观众提供了全新的展示和…...

编程日记 2023/11/23 20:07:44

负载均衡简介

负载均衡 负载均衡&#xff08;Load Balance&#xff0c;简称 LB&#xff09;是高并发、高可用系统必不可少的关键组件&#xff0c;目标是 尽力将网络流量平均分发到多个服务器上&#xff0c;以提高系统整体的响应速度和可用性。 负载均衡的分类和OSI模型息息相关&#xff0c…...

编程日记 2023/11/23 20:06:42

【高级网络程序设计】Week2-1 Sockets

一、The Basics 1. Sockets 定义An abstraction of a network interface应用 use the Socket API to create connections to remote computers send data(bytes) receive data(bytes) 2. Java network programming the java network libraryimport java.net.*;similar to…...

编程日记 2023/11/23 20:05:41

quickapp_快应用_requestHeader

和客户端相同&#xff0c;在进行请求交互中&#xff0c;后端会需要获取当前设备信息&#xff0c;此时需要使用应用上下文app与设备信息 应用版本号 const app require(system.app)app.getInfo().versionName // versionName&#xff1a;应用版本名称 (manifest.json中versio…...

编程日记 2023/11/23 20:04:40

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/11/14 3:06:30

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2026/2/12 3:05:32

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/12/12 0:56:22

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

编程新知 2025/9/18 11:31:13

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2026/1/30 4:52:56

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

FFmpeg：Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

编程新知 2026/1/31 14:34:46

jdbc查询mysql数据库时，出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...

编程新知 2026/2/4 19:50:05

2025年- H71-Lc179--39.组合总和(回溯,组合）--Java版

1.题目描述 2.思路 当前的元素可以重复使用。 &#xff08;1&#xff09;确定回溯算法函数的参数和返回值&#xff08;一般是void类型&#xff09; &#xff08;2&#xff09;因为是用递归实现的&#xff0c;所以我们要确定终止条件 &#xff08;3&#xff09;单层搜索逻辑 二…...

编程新知 2026/1/22 15:25:26

ArcGIS Pro+ArcGIS给你的地图加上北回归线！

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等&#xff0c;设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...

编程新知 2026/2/1 12:04:40