搜尋
首頁web前端html教學HTML-网络编程(2)_html/css_WEB-ITnose

前言

接着前面的HTML—网络编程1)来学习吧~~~

色彩的表示

在计算机显示器中,使用红(red)、绿(green)、蓝(blue)3种颜色来构成各种各样的颜色。颜色的种类有16,256及65536等多种。我们把这三种颜色人0到255分别编号,再表示为16进制的数,则红色(rr)就从00到ff,绿色(gg)和蓝色(bb)两种颜色也如此。三种颜色的表示合起来就是rrggbb。这样一来,可以用一种颜色中所含红、绿、蓝成分的程度,数值化地表示颜色。如:黑色为000000、白色为ffffff、墨绿色为008040、深灰色为808080等。在HTML中,可用这种方式指定颜色。

颜 色 名 称 颜 色 名 称Black   黑   Red 红White   白   Fuchsia 洋红Navy    深蓝  Maroon  棕Blue    蓝   Purple  紫Aqua    浅蓝  Green   绿Teal    靛   Olive   橄榄色Silver  银灰(浅灰)  Lime    柠檬绿Gray    灰   Yellow  黄

文本的颜色

在body的属性中,可以使用以下几种属性改变文本的颜色。

text属性

       该属性用来设置文本的颜色。该“文本”可以是标题、正文及表中的文字,但不能用于超链接的文字。使用格式为:<text=#rrggbb>

vlink属性

将文档中已被访问的链接颜色设置颜色:设置鼠标点过超链接文字时,该链接文字的颜色,默认为红色,使用格式为:<vlink=#rrggbb>

alink属性

设置超链接文字颜色,该链接文字的颜色,默认为红色,使用格式为:<alink=#rrggbb>

标记的color属性

以上几种属性所都是指定整个网页中某一类文字的色彩,用<font>标记的color属性可指定任意一段文字的色彩。<font color=#rrggbb> 

表格的背景色

<table>标记的bgcolor属性用来指定整个表格的背景颜色,使用格式为:<table bgcolor=#rrggbb>
<td>标记的bgcolor属性用来指定表格中一行的背景颜色,使用格式为:<td bgcolor=#rrggbb>
<th>标记的bgcolor属性用来指定表格中栏目行的背景颜色,使用格式为:<th bgcolor=#rrggbb>
<hr>标记的color属性用来指定分隔线的颜色,使用格式为:<hr color=#rrggbb />
<font>标记的face和color属性指定字体与颜色,格式:<font face=“字体名” color=#rrggbb >
超文本链接

超文本链接是网页中一种非常重要的功能,是网页中最重要、最根本的元素之一。通过链接可以从一个网页转到另一个网页,也可以从一个网站转到另一个网站,这符合人类的跳跃思维方式。链接的标志有文字和图形两种。可以制作一些精美的图形作为链接按钮,使它和整个网页融为一体。

所谓的超文本链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片、一个电子邮件地址、一个文件,甚至是一个应用程序。
而在一个网页中用来超文本链接的对象,可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。

☆页面链接

用HTML创建超文本链接需要使用<A>标记符(结束标记符</A>不能省略),它的最基本属性是href,用于指定超文本链接的目标。通过为href指定不同的值,可以创建出不同类型的超链接。在HTML文件中用链接指针指向一个目标。其基本格式为:<a href = "…">标记超文本链接信息</a>

☆本地链接

超文本链接指向自己的计算机中的某一个文件,叫本地链接。在文件中需要创建一个标签(即做一个记号),为页面中需要跳转到的位置命名。命名时应使用<A>标记符的name属性。格式如下:<a name="标签名">此处创建了一个标签</a>

☆电子邮件链接

如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件,则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入mailto值。如:
管理员信箱

图 像
☆图像标签:<img  src="/static/imghwm/default1.png"  data-src="Sunset.jpg"  class="lazy"  alt="HTML-网络编程(2)_html/css_WEB-ITnose" > 
属性说明:    src:连接一个文件    align:属性定义图片的排列方式    border用来设置图像的边框    height和width为显示的高宽。
☆图像地图:<map> 
    应用:当要在图像中选取某一部分作为连接的时候。如:中国地图每个省所对应的区域。
<img src="/static/imghwm/default1.png"  data-src="Sunset.jpg"  class="lazy" alt="图片说明文字" usemap="#map" /><map >    <area shape="rect" coords="50,59,116,104" href="1.html" />    <area shape="circle" coords="118,203,40" href="2.html" /></map>
框 架
☆框架标签:<frameset> 框架标签不可以放到<body>中 <frameset rows="10%,*">  <frame src="1.html" name="top" />  <frameset cols="30%,*">    <frame src="2.html" name="left" />    <frame src="3.html" name="right" />  </frameset></frameset> 
☆画中画标签:<iframe> 

frameset标签是把整个窗口划分成不同的子窗体,而iframe标签可以实现在网页中的任意位置显示一个窗体(注意,它不是把整个窗口进行分割)。

<iframe src=”1.html” >  画中画窗口1  </iframe> 
表 单
<form> 

表单标签是最常用的标签,用于与服务器端的交互。

:输入标签

接收用户输入信息。其中的type属性指定输入标签的类型。

文本框 text。输入的文本信息直接显示在框中。密码框 password。输入的文本以原点或者星号的形式显示。单选框 radio 如:性别选择。复选框 checkbox 如:兴趣选择。隐藏字段 hidden 在页面上不显示,但在提交的时候随其他内容一起提交。提交按钮 submit 用于提交表单中的内容。重置按钮 reset 将表单中填写的内容设置为初始值。按钮 button 可以为其自定义事件。文件上传 file 后期扩展内容,会自动生成一个文本框,和一个浏览按钮。图像 image 它可以替代submit按钮。

以上10个属性必须熟练掌握!

<select name="lang">     <option value="none"> --请选择语言--</option>     <option value="java" selected="selected"> JAVA </option>     <option value="c"> C语言 </option></select>

☆ 表单组件格式化

用表格标签

对表单中的组件进行格式化。

☆表单提交的页面实现

1)先定义form表单中的action属性值,指定表单数据提交的目的地(服务端)。
2)明确提交方式,通过指定method属性值。如果不定义,那么method的值默认是get。

表单提交方式(get/post)

☆两种方式的区别
1) get提交将数据显示在地址栏,对于敏感信息不安全。post提交不显示在地址栏,对于敏感信息安全
2) 地址栏中存放的数据是有限,所以get方式对提交的数据体积有限制。而post可以提交大体积数据。
3) 对提交数据的封装方式不同。get将提交数据封装到了http消息头的第一行即请求行中。而post将提交的数据封装到请求体(请求数据)体中。

☆表单提交方式与乱码问题
无论是get还是post方式,对于Tomcat服务器端,默认的解码方式是ISO8859-1,因此中文会出现乱码。解决:通过用ISO8859-1进行编码,再用相应的中文码表进行解码即可。
如果是post提交,可以使用request.setCharacterEncoding(“GBK”);来解决乱码问题,该方法只对数据体有效即该方法只设置数据体的编码方式。因此,通常表单使用post提交,因为这样编码更方便。

浏览器与服务端的交互方式

☆客户端(浏览器)与服务端交互的三种方式:

1) 地址栏中输入url地址 —— get方式2) 超连接  —— get方式3) 表单 —— get和post方式

☆客户端与服务器的数据校验问题
1) 客户端进行了增强型的校验,服务器是否还要校验?
2) 服务器端进行了增强型的校验,客户端是否还要校验?

都需要!

头标签
头标签都放在<head></head>头部分之间。包括:title  base  meta  link
☆ <title> ☆ <base> href 属性:指定网页中所有的超链接的目录。target 属性:指定打开超链接的方式,如_blank 表示所有的超链接都用新窗口打开显示。☆ <meta> name 属性:网页的描述信息。当取keywords时,content属性的内容就作为搜索引擎的关键字进行搜索。http-equiv 属性:模拟HTTP协议的响应消息头。 ☆<link> rel 属性:描述目标文档与当前文档的关系。type 属性:文档类型。media:指定目标文档在哪种设备上起作用。
其它标签
☆<marquee> direction 属性:left  right  down  upbehavior 属性:scroll  alternate  slide☆<pre class="brush:php;toolbar:false">可以将文本内容按在代码区的样子显示在页面上。 ☆几个纯数据封装标签div标签  span标签 p标签 ☆标签分为两大类 1) 块级标签(元素):标签结束后都有换行。 div p dl ol ul table title2) 行内标签(元素):标签结束后没有换行。 font span img input select a☆XHTML 与 XMLlable标签:给元素定义快捷键 
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存,這玩意兒,說簡單也簡單,說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章,結果用戶打開還是老版本,這滋味,誰受得了?這篇文章,咱就來扒一扒這背後的彎彎繞繞,以及如何優雅地解決這個問題。讀完之後,你就能輕鬆應對各種緩存難題,讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存,說白了就是瀏覽器或者服務器為了提高訪問速度,把一些靜態資源(比如圖片、CSS、JS)或者頁面內容存儲起來。下次訪問時,直接從緩存裡取,不用再重新下載,速度自然快。但這玩意兒,也是個雙刃劍。新版本上線,

如何使用HTML5表單驗證屬性來驗證用戶輸入?如何使用HTML5表單驗證屬性來驗證用戶輸入?Mar 17, 2025 pm 12:27 PM

本文討論了使用HTML5表單驗證屬性,例如必需的,圖案,最小,最大和長度限制,以直接在瀏覽器中驗證用戶輸入。

HTML5中跨瀏覽器兼容性的最佳實踐是什麼?HTML5中跨瀏覽器兼容性的最佳實踐是什麼?Mar 17, 2025 pm 12:20 PM

文章討論了確保HTML5跨瀏覽器兼容性的最佳實踐,重點是特徵檢測,進行性增強和測試方法。

如何高效地在網頁中為PNG圖片添加描邊效果?如何高效地在網頁中為PNG圖片添加描邊效果?Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS為網頁中添加有效的PNG邊框。 它認為,與JavaScript或庫相比,CSS提供了出色的性能,詳細介紹瞭如何調整邊界寬度,樣式和顏色以獲得微妙或突出的效果

&lt; datalist&gt;的目的是什麼。 元素?&lt; datalist&gt;的目的是什麼。 元素?Mar 21, 2025 pm 12:33 PM

本文討論了html&lt; datalist&gt;元素,通過提供自動完整建議,改善用戶體驗並減少錯誤來增強表格。Character計數:159

&gt; gt;的目的是什麼 元素?&gt; gt;的目的是什麼 元素?Mar 21, 2025 pm 12:34 PM

本文討論了HTML&lt; Progress&gt;元素,其目的,樣式和與&lt; meter&gt;元素。主要重點是使用&lt; progress&gt;為了完成任務和LT;儀表&gt;對於stati

我如何使用html5&lt; time&gt; 元素以語義表示日期和時間?我如何使用html5&lt; time&gt; 元素以語義表示日期和時間?Mar 12, 2025 pm 04:05 PM

本文解釋了HTML5&lt; time&gt;語義日期/時間表示的元素。 它強調了DateTime屬性對機器可讀性(ISO 8601格式)的重要性,並在人類可讀文本旁邊,增強Accessibilit

&lt; meter&gt;的目的是什麼。 元素?&lt; meter&gt;的目的是什麼。 元素?Mar 21, 2025 pm 12:35 PM

本文討論了HTML&lt; meter&gt;元素,用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了&lt; meter&gt;從&lt; progress&gt;和前

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),