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

一、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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/172946.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

了解:iperf网络性能测试工具

当进行网络性能测试时&#xff0c;可以使用iperf这个开源工具。iperf是一款网络测试工具&#xff0c;它能够测试TCP或UDP带宽质量&#xff0c;以及单向和双向吞吐量。使用iperf进行网络性能测试首先需要在被测试的两台计算机上安装iperf。 如何安装iperf&#xff1f; 在Debia…

日志技术logback

一&#xff0c;日志概括 二&#xff0c;日志技术的特点 三&#xff0c;日志技术的体系 三&#xff0c;入门 四&#xff0c;案例 package XinZheng;import org.slf4j.Logger; import org.slf4j.LoggerFactory;public class Main58 {//1,创建一个Logger日志对象public static fi…

泵类设备常见的5种故障及监测方法

在各种工业领域中&#xff0c;泵是一种关键设备&#xff0c;用于输送液体或气体。然而&#xff0c;泵类设备常常会面临各种故障&#xff0c;这可能导致生产停顿和生产效率下降。为了及时监测并解决这些故障&#xff0c;设备状态监测系统成为一种重要的工具。本文将介绍泵类设备…

细节决定成败——我的日志去哪了?

概述 编写本文档的目的有两点。 本周遇到了一个日志丢失的问题&#xff0c;经过分析&#xff0c;觉得挺有意思的。向大家分享一下我的分析及解决思路。应该在很多项目中都会有该问题。领导和我私下讨论过多次&#xff0c;当前的autodomain代码对文件读取的频率太高了,如何去避…

01-制作人和迈克尔杰克逊-《人月神话》中译本纠错及联想

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 2001年&#xff0c;我们翻译《人月神话》的时候&#xff0c;由于水平有限&#xff0c;译文中存在不少错误。 这些年&#xff0c;随着阅历的增长&#xff0c;在重读的时候偶尔也会有“…

msvcp120.dll缺失的解决方法与作用介绍

大家好&#xff01;我是小编。今天&#xff0c;我想和大家分享一下关于“找不到msvcp120.dll无法继续执行代码的5个解决方法”的话题。 首先&#xff0c;让我们来了解一下msvcp120.dll的作用。msvcp120.dll是Microsoft Visual C Redistributable Package的一部分&#xff0c;它…

JMM并发三大特性

并发和并行 目标都是最大化CPU的使用率 并行(parallel)&#xff1a;指在同一时刻&#xff0c;有多条指令在多个处理器上同时执行。所以无论从微观还是从宏观来看&#xff0c;二者都是一起执行的。 并发(concurrency)&#xff1a;指在同一时刻只能有一条指令执行&#xff0c;…

媲美有线操作,支持4KHz响应和无线充电的游戏鼠标,雷柏VT3S上手

对于无线鼠标来说&#xff0c;操作延迟和精度对游戏操作影响很大&#xff0c;常见的游戏鼠标至少都有1KHz的回报率&#xff0c;而雷柏今年已经出了很多支持4KHz回报的鼠标了&#xff0c;像是我现在用的这款VT3S游戏鼠标&#xff0c;就搭载了旗舰级的原相3395引擎&#xff0c;支…

SpringBean的配置详解

Bean的基础配置 例如&#xff1a;配置UserDaoImpl由Spring容器负责管理 <beanid"userDao"class"com.xfy.dao.Impl.UserDaoImpl"></bean> 此时存储到Spring容器中的Bean的beanName是userDao&#xff0c;值是UserDaoImpl&#xff0c;可以根据bea…

pytorch中gather函数的理解

pytorch函数gather理解 torch.gather(input, dim, index, outNone) → Tensor Parameters: input (Tensor) – 源张量dim (int) – 索引的轴index (LongTensor) – 聚合元素的下标(index需要是torch.longTensor类型)out (Tensor, optional) – 目标张量 公式含义 这个函数的…

股票自选(四)

4-自选 自选表功能&#xff0c;均需要使用 Token 令牌进行操作&#xff0c;目的是为了将数据隔离。 添加自选表的作用是进行推送&#xff0c; 将 自选表中的近十天的涨跌幅情况通过邮箱的方式推送给对应的用户。 一. 添加到自选表 接口描述: 接口地址:/StockApi/stockSele…

转录组学习第四弹-数据质控

数据质控 将SRR转为fastq之后&#xff0c;我们需要对fastq进行质量检查&#xff0c;排除质量不好的数据 1.质量检查&#xff0c;生成报告文件 ls *fastq.gz|while read id;do fastqc $id;done并行处理 ls *fastq.gz|xargs fastqc -t 102.生成 html 报告文件和对应的 zip 压缩…

阿里巴巴对裁员谣言报警

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 前两天王自如言论事件&#xff0c;格力选择了报警&#xff0c;称高管遭到姊妹集体侮辱诽谤。 而这两天&#xff0c;阿里巴巴也报警了&#xff0c;原因是网传阿里巴巴要裁员25000人。 咱不公关了…

见证历史!合资车企「最后一搏」

从上海车展&#xff0c;到广州车展&#xff0c;最大的变化莫过于传统合资品牌在新能源及智能电动市场的持续发力。或许&#xff0c;2024年将是最后一搏的拐点。 在本届广州车展上&#xff0c;广汽丰田发布了全新新能源品牌铂智&#xff0c;铂智品牌旗下首款产品铂智4X正式亮相。…

数据结构(c语言版) 树的遍历

作业要求 以如下图为例&#xff0c;完成树的遍历&#xff1a; 1、利用孩子兄弟表示法的存储结构 2、利用先根序列创建树 3、先根遍历树 4、后根遍历树 思考 预期的结果应该为&#xff1a; 1、先根创建树时需要输入的数据为&#xff1a; A B E 0 F 0 0 C 0 D G 0 0 0 0 2、…

Android codec2 视频框架之输出端的内存管理

文章目录 前言setSurfacestart从哪个pool中申请buffer解码后框架的处理流程renderOutbuffer 输出显示 前言 输出buffer整体的管理流程主要可以分为三个部分&#xff1a; MediaCodc 和 应用之间的交互 包括设置Surface、解码输出回调到MediaCodec。将输出buffer render或者rele…

使用JMX监控ZooKeeper和Kafka

JVM 默认会通过 JMX 的方式暴露基础指标,很多中间件也会通过 JMX 的方式暴露业务指标,比如 Kafka、Zookeeper、ActiveMQ、Cassandra、Spark、Tomcat、Flink 等等。掌握了 JMX 监控方式,就掌握了一批程序的监控方式。本节介绍 JMX-Exporter 的使用,利用 JMX-Exporter 把 JMX…

win11,无法修改文件的只读属性,解决办法

在尝试更改文件或文件夹的权限时&#xff0c;您可能经常会遇到错误 - 无法枚举容器中的对象访问被拒绝。 虽然作为管理员&#xff0c;您可以更改访问权限&#xff0c;但有时即使是管理员也可能会遇到相同的错误消息。 这是一个常见错误&#xff0c;通常由不同论坛上的用户提出…

【云原生-Kurbernetes篇】HPA 与 Rancher管理工具

文章目录 一、Pod的自动伸缩1.1 HPA1.1.1 简介1.1.2 HPA的实现原理1.1.3 相关命令 1.2 VPA1.2.1 简介1.2.2 VPA的组件1.2.3 VPA工作原理 1.3 metrics-server简介 二、 HPA的部署与测试2.1 部署metrics-serverStep1 编写metrics-server的配置清单文件Step2 部署Step3 测试kubect…

Python数据结构基础教学,从零基础小白到实战大佬!

文章目录 前言 Python有那几种数据结构&#xff1f;1)列表&#xff08;list)1.1 什么是列表&#xff1f;1.2列表的增删改查 2&#xff09;字典&#xff08;Dictionary)2.1 什么是字典&#xff1f;2.2 字典的增删改查 3&#xff09;元组&#xff08;Tuple)4)集合&#xff08;Set…