黑马程序员_HTML

最新推荐文章于 2022-08-11 19:02:52 发布

原创最新推荐文章于 2022-08-11 19:02:52 发布 · 700 阅读

0 ·

CC 4.0 BY-SA版权

------- 物联云培训、java培训、期待与您交流！ ----------

HTML：超文本标记语言不是一种编程语言，是一种描述性的标记语言,用于描述超文本中内容的显示方式（文件扩展名为.html或.htm）

基本格式：

 <html>
       <head><title></title></head>
        <body></body>
    </html>

html: 放在html文件的开头，但没有实质性的功能，即使没有这个标记，
浏览器在碰到其他的html标记时也一样会进行解析。浏览器内置了html语言的解析器.可以设置默认打开浏览器:工具—文件夹选项-文件类型
head:头标记，放置关于此html文件的信息，如提供索引，定义css等。
title:标题标记，包含在head标记内，它的作用是设定网页的标题。
body:主体标记，网页所需要显示的内容都放在这个标记内。

HTML中常见的标签
 注释标签：
 标题标签：<hx> hx的取值是从h1-h6,字体从大到小
 文字粗体标签： 
 文字斜体标签： 
 下划线标签： 
 换行标签： 换行标签是单个使用的标记
 段落标签： 段落标签除换行外，还会增加一行空白
 空格标签：  
 font:设置字体的color颜色size文字大小(1-7)7种层次的大小，face 设置字体。
 特殊字符
 如果要在网页上显示一些特殊符号,比如 <,>,&等.
 因为这些符号在代码中会被浏览器识别并解释.所以用特殊方式表示
 < : < > : > & : &
 nbsp是空格字符 sup:为上标标记 sub:为下标标记
 <marquee></marquee> 滚动标签
 bgcolor 背景颜色
 Direction 滚动方向 left、right、up、down
 Behavior 滚动方式scroll滚动、silde滑动、alternate摆动
 loop设定滚动次数，-1为一直滚动。
 注意：<marquee></marquee>内只能用 换行，不能用

dl,dt,dd,ul,li的用法

如下例子：

<dl>
<dt>学科名称 </dt>
<dd> 语文</dd>
<dd>数学</dd>
 
<dt>部门名称</dt>
<dd>技术部</dd>
<dd>人事部</dd>
</dl>

a标签：

例如：<a href=”http://sina.com.cn”>新浪网站</a>

注意：当没有指定具体的协议时，浏览器会启动默认的file协议引擎来解析href的值

<ahref=”mailto:abc:@sina.com”>联系我们</a>
当你点击时，会弹出一个邮件对话框。
<aname=”top”>顶部位置</a>
<ahref=”#top”>回到顶部</a>
<ahref=”javascript:alert(‘sdfd’)”>一个对话框</a>

表格：
如下例子：

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>表格嵌套页面</title>
</head>
<body>
<table  bordercolor="#666666"cellpadding="0"cellspacing="0" border="1" width="500px"height="300px"  >
<tr>
<tdcolspan="4" align="center">
              1
</td>
</tr>
<tr>
<tdalign="center" width="40px">
             2
</td>
<tdalign="center" width="40px" >
            3
</td>
<tdalign="center" width="40px">
            4
</td>
<tdalign="center" width="90px">
            5
</td>
</tr>
<tr>
<tdcolspan="4">
<table  border="1"  cellpadding="0"cellspacing="0" width="470px" height="100px"  align="center" bordercolor="#666666">
<trheight="53px">
<td  colspan="3"align="center">
                     1
</td>
</tr>
<tr>
<tdalign="center">
                     2
</td>
<tdrowspan="2" align="center" >
                     3
</td>
<tdalign="center">
                     4
</td>
</tr>
<tr>
<tdalign="center">
                    5
</td>
<tdalign="center">
                    6
</td>
</table>
<br/>
<table  bordercolor="#666666"align="center"cellpadding="0" cellspacing="0"  border="1"  height="42px" width="470px">
<tr>
<tdwidth="70" align="center">
                       1
</td>
<tdwidth="70" align="center">
                       2
</td>
<tdwidth="70" align="center">
                       3
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

注意的是：当你想要合并单元格时：可以设置：colspan=”2”,或rowspan=”2”;

框架：<frameset></frameset>

<frameset rows="30%" name="top"noresize="noresize" border="yes">
<frameset cols="30%">
<frame src="1.html" name="left"noresize="noresize"/>
<frame  src="2.html" name="right"noresize="noresize"/>
</frameset>
</frameset>

这里面的1.html 表示连接的一个页面，2.html连接的另外一个页面

注意：要想让框线不可以随意拖动的话，加上noresize="noresize"属性。

表单的使用：

如下例子是表单中的各个标签的使用：

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>表格</title>
</head>
<body>
<tableborder="1" width="450px" cellpadding="0" cellspacing="0" >
<trheight="150px">
<td  align="center"width="150px" >
<inputtype="submit" value="提交" name="sub"/>
</td>
<td  bgcolor="#FF0000"align="center" width="150px" >
<textareacols="20px" rows="10px">...............</textarea>
<br/>
<input   type="button" value="清除" name="res"/>
</td>
<tdalign="center"  >
<inputtype="image" src="image/1.GIF"  width="150px" >
</td>
</tr>
<tr>
<tdbgcolor="#66FFCC" width="175px" height="60px"align="center">
<inputtype="radio" name="date1"/>1<input type="radio"name="date1"/>2<input type="radio"name="date1">3
</td>
<td  bgcolor="#66FFCC"width="175px" height="60px" align="center">
<inputtype="checkbox" name="date2"/>1<inputtype="checkbox"name="date2"/>2<inputtype="checkbox" name="date2">3
</td>
<td>
<selectmultiple="multiple" size="3">
<optionvalue="1"> 1</option>
<option  value="2"> 2</option>
<optionvalue="3"> 3</option>
<option value="4"selected="selected"> 4</option>
</select>
<select  size="1">
<optionvalue="1">1</option>
<option value="2"selected="selected">2</option>
</select>
<selectmultiple="multiple" size="2">
<optionvalue="1">1</option>
<optionselected="selected" value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>
<inputtype="text"  size="5"width="50px" name="text1" maxlength="2"disabled=" " ><br/>maxlength值为2所以只能输入2个字符,因为disable所以文本无法输入<br/>
<inputtype="passwrod" name="password1"  value="" size="5"maxlength="2">passwoed密码输入功能<br/>
<inputtype="hidden" name="hidden1" value="sdf"size="5" maxlength="2">1
<inputtype="hidden" name="hidden2" value="sdf"size="5" maxlength="2">11
 
</td>
<tdwidth="150px">
             8
</td>
<td>
<ahref="http://www.sina.com.cn">新浪</a><br/>
<ahref="http://www.baidu.com.cn">百度</a><br/>
<ahref="http://www.tengxun.com.cn">腾讯</a><br/>
</td>
</tr>
<tr>
<td>
<fontcolor="#00CC00" face="宋体">字体设置</font>
</td>
<td>
                2
</td>
<td>
                3
</td>
</tr>
</table>
</body>
</html>

注意：form表单的两种提交方式的区别
get：会将提交的信息显示在地址栏上。对于敏感信息不安全。因为显示在地址栏。因为显示在地址栏，而地址栏的信息数据量是有限的，所以不可以提交大数据。会将信息封装到请求行，也就是http请求消息头之前
post: 不会将提交的信息显示在地址栏。对于敏感信息安全。因为不显示会将信息封装到请求体，也就是http请求消息头之后。请求体和请求头之间是通过空行来进行分隔的可以提交大体积的数据

以后在进行表单提交时：建议使用post提交。

Meta标签

例如：<metahttp-equiv="refresh" content="3;url=http://www.sina.com.cn"/>
 表示打开此页面3秒后自动转到新浪页面。
3.基本架构
C/S结构 Client /Server
 (1) 开发者需要编写两个端点，一个是客户端程序，一个是服务端程序。举例：QQ,360.
 (2) 需要在客户机安装客户端的部分。
 (3) 弊端：客户端维护较为麻烦。机器只要一重装，就需要重新安装该软件。
 升级也比较麻烦。后期有了一个解决方案：对于升级，可以通过网络升级的形式完成。
 (4) 好处：客户端的出现，可以减轻服务端的运算压力。
 B/S结构 Browser /Server
 (1) 这种结构，程序员只需要编写服务端。而客户端只需要有浏览器即可，
 只要装有操作系统的机器都自带浏览器。
 这是web技术的流行。导致这种结果的流行。
 (2) 不用开发客户端，相对省事很多。而且操作也比较简单，只要能上网，
 就可以进行象浏览网页一样进行功能的使用。
 (3) b/s运行全在服务端。
 对于大数据量的运算就会很慢。虽然现在也有网页网游，但是使用flash完成的。它的数据量相对较小。而且flash也是在客户端由浏览器启动

练习：注册表单

<HTML>
<HEAD>
<TITLE> 注册页面 </TITLE>
</HEAD>
 
<BODY>
<form method="post">
<table  border="1" cellpadding="0" cellspacing="0"width="598px" height="548px" align="center">
<tr>
<thcolspan="2"align="center">
<font size="+7" face="宋体">注册页面
</th>
</tr>
<tr>
<td align="right">
    用户名：
    </td>
    <td>
    <inputtype="text" name="name">
    <fontcolor="#FF0000">*</font>
    </td>
</tr>
<tr>
<td align="right">
    密码：
    </td>
    <td>
<input type="password"name="psw">
    <fontcolor="#FF0000">*</font>
    </td>
</tr>
<tr>
<td align="right">
    性别：
    </td>
    <td>
    <inputtype="radio" name="sex">男<input type="radio" name="sex">女
    </td>
</tr>
<tr>
<td align="right">
    出生日期：
    </td>
    <td>
    <selectname="birthDate">
    <option>1990</option>
    <option>1991</option>
    <option>19D92</option>
    <option>1989</option>
    <option>1987</option>
    <option>1988</option>
    </select>年
<select name="birthDate">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    </select>月
<select name="birthDate">
    <option>01</option>
    <option>02</option>
    <option>03</option>
    <option>04</option>
    <option>05</option>
    <option>06</option>
    </select>日
    </td>
</tr>
<tr>
<td align="right">
    爱好：
    </td>
    <td>
    <inputtype="checkbox"/>足球<input type="checkbox"/>篮球<inputtype="checkbox"/>游泳<inputtype="checkbox"/>跑步
    </td>
</tr>
<tr>
<td align="right">
    籍贯：
    </td>
    <td>
<select name="contry">
    <option>江苏</option>
    <option>北京</option>
    <option>天津</option>
    <option>上海</option>
    <option>河北省</option>
    </select>省
<select name="contry">
    <option>无锡</option>
    <option>北京</option>
    <option>天津</option>
    <option>上海</option>
    <option>沧州</option>
    </select>市
    </td>
</tr>
<tr>
<td align="right">
    个人介绍：
    </td>
    <td>
    <textareacols="20" rows="10"></textarea>
    </td>
</tr>
<tr>
<td align="right">
    公司网址：
    </td>
    <td>
    <ahref="http://www.lichao.com">http://www.lichao.com</a>
    </td>
</tr>
<tr>
<td colspan="2"align="center">
<input type="submit"value="提交">
    </td>
</tr>
</table>
</form>
</BODY>
</HTML>

总结：HTML(HyperTextMarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言，由W3C(World Wide Web Consortium)所制定和更新。我们可以用任何一种文本编译起来编辑HTML文件，因为它就是一总纯文本文件。

------- 物联云培训、java培训、期待与您交流！ ----------