【高编 3】 北邮 高级网络程序设计 3. HTML&CSS&SVG

HTML

Hyper Text Markup Language

使用后缀.html 或者 .htm

可以使用任何的文本编辑软件进行编写

基本结构:

<html>
	<head>
		<title>My page</title>
	</head>
	<body>
		This is my first homepage.
	</body>
</html>

注释

<!-- -->

正则表达式

285BF169D49EAF5FB0C6B05E5F6C674A

Tag

Tag: 使用 < > 包裹,通常为成对的出现,结束的要有 </..>,文本就写在两个开始Tag和结束Tag之间

例如:<title> </title>

<title>My Page</title>

Paragraph

<p> </p>

包裹段落

<html>
	<body>
        <p>
            This is the 1st paragraph
        </p>
        <p>
            This is the 2nd paragraph
        </p>
    </body>
</html>

Heading

<h> </h>

<html>
	<body>
		<h1>This is heading 1</h1>
		<h2>This is heading 2</h2>
		<h3>This is heading 3</h3>
		<h4>This is heading 4</h4>
		<h5>This is heading 5</h5>
		<h6>This is heading 6</h6>
	</body>
</html>

Line Break

<br /> 插入简单的换行符

添加一个行内间隔

<html>
	<body>
		<p>This paragraph has <br />
		a line break here</p>
	</body>
</html>

Horizontal Rule

<hr> 水平分割线


<html>
	<body>
	<p>This is a paragraph</p>
	<hr>
	<p>This is another paragraph</p>
	<hr>
	</body>
</html>

Tag 总结

image-20211021174647685

字体效果

image-20211021174752133

效果图:

image-20211021174803749

符号表示

image-20211021174842042

超链接

<a href="url">Text to be displayed</a>

例子:

 <a href="first.html">This text</a> is a link to a page on this Web site
 <a href="http://www.qmul.ac.uk/">Qmul</a> is a link to QMUL

在新的页面打开超链接

target = "_blank"

<a href=“http://www.qmul.ac.uk/”
target=“_blank”>Visit QMUL</a>

Target中的Value的描述

ValueDesription
_blankOpens the linked document in a new window or tab
_selfOpens the linked document in the same frame as it was clicked (this is default)
_parentOpens the linked document in the parent frame
_topOpens the linked document in the full body of the window
framenameOpens the linked document in a named frame

有超链接的图片

<p> Use an image as a link:
	<a href=“linkpage.htm”><img border=“0”
	src=“image.jpg” width=“65” height=“38”></a>
</p>

表格

基本格式:

  • 每一行用一个<tr> </tr>标签隔开
  • 每一行中的每一列在<tr> </tr>标签中用<td> </td>隔开

例子:

<table border="“1”">
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>

背景颜色

在开始标签中使用 bgcolor = "red"

例如:<table border="1" bgcolor="red">

背景照片

在开始标签中使用 background = "图片地址"

例如:<table border="1" background="bg.jpg">

对齐方式

在开始标签中使用 align = "left"

有以下对其方式:

  • left
  • right
  • center

功能性标签总结

image-20211021180724788

列表

Unordered List:

<ul>
	<li>Coffee</li>
	<li>Tea</li>
	<li>Milk</li>
</ul>

效果图:

  • Coffee
  • Tea
  • Milke

Ordered List:

<ol>
	<li>Coffee</li>
	<li>Tea</li>
	<li>Milk</li>
</ol>

效果图:

  1. Coffee
  2. Tea
  3. Milk

可以选择不同种类的ordered list

image-20211021180947131

图像

<img>,并且可以设置widthheight

<img src=“image.gif” width=“144” height=“50”>

设置该图像的标签

<alt>

<img src=“me.jpg” alt=“This is me”>

背景图片

写在其他标签内的图片

<body background=“background.jpg”>

背景颜色

bgcolor

  • 数值可以是16进制的RGB, #000000

  • 可以是 rgb(0,0,0) 分别输入RGB的值

  • 可以有预设的String代表的颜色 black

<body bgcolor=“#d0d0d0”>

文本语言

text = "color"

<body bgcolor=“#000000” text=“yellow”>

基本颜色表

image-20211021181436588

用户输入 Form

HTML Form用来收集用户的各种输入,Form包含了各种支持用户输入的组件

  • text fields, textarea fields, drop-down menus, radio buttons,
    checkboxes …

最常用的标签为<input>

image-20211023144246826

Form定义为:

<form>
    <input>
    
    <input>
    
</form>

Text field

定义type属性为text,输入的内容可见,默认长度为20

image-20211023140958967

<form action=“”>
	First name:
	<input type=“text”
		name=“firstname”>
	<br>
	Last name:
	<input type=“text”
		name=“lastname”>
</form>

The name is the identifier that is sent to the server when you submit the form.

Password field

type定位为"password",输入内容不可见

image-20211023141115165

<form action=“”>
	Username:
	<input type=“text”
		name=“user”>
	<br>
	Password:
	<input type=“password”
		name=“password”>
</form>

选择

Radio button

Select one of the choices.

image-20211023141143424

<form>
	<input type="radio"
		name="sex"
		value="male"> Male
	<br>
	<input type="radio"
		name="sex"
		value="female"> Female
</form>

Checkboxes

Select one or more options.

image-20211023141225450

<form>
	I have a bike:
	<input type=“checkbox”
    name=“vehicle”
    value=“Bike”>
    <br>
    I have a car:
    <input type=“checkbox”
        name="vehicle"
        value=“Car”>
    <br>
    I have an airplane:
    <input type=“checkbox”
        name=“vehicle”
        value=“Airplane”>
</form>

Label

每一个都应该又一个label,这些标签定义了<input>标签的作用

用户可以点击标签也可以点击按钮来实现功能

image-20211023141547245

例如:

image-20211023141606718

Action

action是form的一个标签

例子:当用户点击了“submit”按钮,包含内容的Form会被发送道另一个file

action属性定义了文件发送到何处,通常用于实现点击按钮后实现什么功能

image-20211023142620334

把图片当作Submit 按钮

定义 type="image"

<input type="image" src="path to image" name="submit" />

默认情况下,图像类型是一个表单提交按钮。

选择栏

dropdown box

<option>

image-20211023143220932

<form action=“”>
	<select name=“cars”>
    	<option value=“volvo”>Volvo</option>
    	<option value=“saab”>Saab</option>
    	<option value=“fiat”>Fiat</option>
    	<option value=“audi”>Audi</option>
	</select>
</form>

Fieldset

<fieldset>

image-20211023143321937

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

大输入行

<textarea>

image-20211023143421149

<textarea rows=“10” cols=“30”>
	The cat was playing in the garden.
</textarea>

Button

<type = "button">

image-20211023143522102

<form action=“”>
	<input type=“button” value=“Hello world!”>
</form>

Button 与 Submit的区别

button: <input type="button" />

  • 默认不做任何事

submit: <input type="submit">

  • 点击时候会submit文件,可以通过Js更改

发送邮件例子

image-20211023143730041

<form action="MAILTO:yourname@company.com" method="post" enctype="text/plain">
  Name:<br />
  <input type="text" name="name" size="20" />
  <br />
  Mail:<br />
  <input type="text" name="mail" size="20" />
  <br />
  Comment:<br />
  <input type="text" name="comment" size="40" />
  <br /><br />
  <input type="submit" value="Send" />
  <input type="reset" value="Reset" />
</form>

name和id的区别

name属性伴随form一起submit,可以重复

id是每个页面内元素唯一的标识,唯一

<form id="“gender_form”">
  <input type="radio" name="sex" value="male" /> Male
  <br />
  <input type="radio" name="sex" value="female" /> Female
</form>

HTML5

页面结构:

image-20211023144357136

  • Section: Generic section of a document or application.
  • Nav: Section of a page that links to other pages.
  • Div: Added to help style the document.
  • Aside: Section of a page that consists of content related to the content around the aside element (e.g. the equivalent of a sidebar in printed typography).
  • Footer: Typically contains information about its section.

CSS

在html中调用css

<input type="submit" name="submit" class="states" />

使用class属性,value为css的class

默认值

对于<fieldset>

image-20211023145504027

SVG

Scalable Vector Graphics

定义了图像在XML中的格式

无损的图片

<!DOCTYPE html>
<html>
<head><title>Embedding SVG in HTML5</title></head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;
stroke-width:5;
fill-rule:evenodd;">
</svg>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

这不是Ourz的ID

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

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

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

打赏作者

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

抵扣说明:

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

余额充值