编程语言Java学习02之HTML
一.网页的基本信息
1.1注释方法：
<!-- 内容 -->
1.2基本属性：
<!DoOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<!-- meta ：描述性标签，描述网页信息 -->
<title>我的第一个网页</title>
</head>
<body> <!-- body 表示网页的主体 -->
<h1> 内 容 </h1>
</body>
</html>
1.3body文件主体标记
<body background = "path"bgcolor= "color"text = "color" link = "color" alink = "color" vlink = "color" leftmargin = "value">
</body>
注释：
background :设置网页的图像背景
path:图像的文件目录
bgcolor ：设置网页的的背景颜色，默认为白色
text:设置非链接文字的色彩
link：设置尚未被访问过的文字的色彩
alink ：设置超文本链接在被点击中的时候的色彩
vlink：设置已经被访问过的文本的色彩
leftmargin：设置页面的右边距，即内容与浏览器左边边框的距离
topmargin：设置页面的上边距，同上
value：表示空白量
color：可以直接表示或者#六位数字
二.文本格式标记
2.1文字字体标记
<font face = "字体" size = "大小 "color = "颜色" > 内容 </font>
2.2文本修饰标记
<b> </b> <!--加粗文字-->
<i> </i> <!--倾斜文字-->
<u> </u> <!--给文字加下划线-->
<strick> </strick> <!--增加删除线-->
<sup> </sup> <!--使文字成为上一个文字的上标-->
<sub> </sub> <!--使文字成为下一个文字的下标-->
<em> </em> <!--黑体-->
<strong> </strong> <!--特别强调文字，黑体加斜体-->
2.3段落标记
<p align = "水平对齐的方式"> </p>
<!-- left right center -->
2.4强制换行标记
强行另起一行显示该标记后面的元素
</br>
<p align = "水平对齐的方式">
内容
</br>
</p>
2.5插入水平线标记
格式：
<hr width = "value1" size = "value2" align = "value3" color = "color1"noshade/>
<!-- noshade 用来设置水平线是否有阴影线 -->
2.6预排格式标记
保留文本在纯文字编辑器中的格式，原样显示，不受前面格式和文字的影响。
<pre> </pre>
2.7定位标记
<div>
</div>
2.8文字滚动标记
在页面中的文字也可以是图像具有滚动效果
<marquee behavior = "value1" bgcolor = "color" direction = "value" height = ""width = ""loop = "" scrollamount="" scrolldelay= "" hspace= "" vspace = " "> 滚动的文字 </marquee>
注释：
behavior ：滚动方式三种 alternate(来回滚动）,scroll（循环滚动）,slide（只滚动一次）
direction：滚动的方向，up ,left , down ,right
loop: 设置滚动的次数，默认为-1此，表示为无限次的滚动
scrollamount：调整字体滚动的速度，数值越大速度越快
scrolldelay：设置在每一次滚动的间隔产生一段时间的延迟，数值越大延迟越长
hspace/vspace：设置文字滚动的水平和垂直空间
三.各种标签
2.1段落标签，换行标签，水平线
<!-- 段落标签 -->
<p> 内容 </p>
<p> 内容 </p>
<!-- 换行标签 -->
<br> 内容 </br>
<br> 内容 </br>
<!-- 水平线 -->
<hr> 内容 </hr>
2.2字体样式（粗细和斜体）
<!-- 粗加斜 -->
<strong> </strong>
<!-- 斜体 -->
<em> </em>
2.3特殊符号
  <!-- 空格 -->
> <!-- 大于号 -->
< <!-- 小于号 -->
2.4图像标签
<img src = "path" alt = "text" title = "text" width = "x" height = "y"/>
<!-- src ：图像的地址-->
<!-- alt ：替代的文字-->
<!-- title ：鼠标悬停的位置-->
<!-- 注意：读取图像是“..”表示上一级的目录，避免从头开始写入图像的路径-->
四.链接
3.1链接表示（基础）：
<a href = "path" target = "目标的窗口位置">链接文本或者是图像</a>
<!--
href ： 链接的路径(必填)
<a href = "path" target = "目标的窗口位置"><img src = "path" alt = "text" title = "text" width = "x" height = "y"/></a>
target ：链接的打开窗口，决定链接在哪个窗口打开
target = "_self" 在本窗户口打开
target = "_blank" 在新建的窗口打开
-->
3.2瞄链接
<a name = "#top"> 顶部</a>
<a href = "#top">回到顶部</a>
3.3功能性链接
<!-- 邮件 -->
<a href = "mailto:12......@qq.com">点击联系我</a>
<!-- QQ链接 -->
五.列表和表格
4.1列表：
4.1.1 有序列表
<ol>
<li> </li>
<li> </li>
</ol>
4.1.2无序列表
<ul>
<li> </li>
<li> </li>
</ul>
4.1.3自定义列表
<dl>
<dt> </dt>
<dd> </dd>
<dd> </dd>
</dl>
<!--表现形式： 内容：
内容1；
内容2；
-->
4.2表格
行： tr 列： td
<!-- 第一种 -->
<table border = "">
<tr>
<td> </td>
</tr>
</table>
<!-- 第二种 -->
<table border = "">
<tr>
<!-- 跨列 -->
<td colspan = '4'> </td>
<!-- 跨行 -->
<td rowspan = '4'> </td>
</tr>
</table>
五.媒体元素
5.1音频
<video src = "../path"> </video>
<!-- controls autoplay 自动播放-->
<video src = "../path" controls autoplay> </video>
5.2视频
<audio src = "../path"> </audio>
<!-- controls autoplay 自动播放-->
5.3声音背景标记
在网页中加入声音，声音文件格式可以为*.way或*.mid
<bgsound src = "声音文件的地址" loop = "">
5.4多媒体标记
在页面中设置SWF的画面（即FLASH动画），MP3等
<embed src = "" hidden = ""autostart = "" loop = " "></embed>
注释：
hidden:用于控制播放面板的显示和隐藏，true 隐藏面板 ，false，显示面板
autostart：用于控制多媒体内容是否自动播放，true 自动，false ,不自动播放
loop:是否循环播放
六.页面结构分析
<!--
header
footer
section
article
nav
-->
<header><h2>
</h2></header>
<footer><h2>
</h2></footer>
七.框架
7.1框架的集标记(frameset)
7.2框架标记
7.3内联框架
iframe
<iframe src = "path"name = "mainframe">
<a href = "path" target = "目标的窗口位置">链接文本或者是图像</a>
</iframe>
<!-- path 引用界面地址
mainframe 框架标识框
-->
八.表单
8.1表单的get和post提交
<form method = "post" action = "result.html">
<!--method 规定如何提交（post/get) action:向何处发送表单-->
<p>名字：<input name = "name"type = "text"></p>
<!--type = "text" : 文本输入框-->
<p>密码：<input name = "pass"type = "password"></p>
<!--type = "password" : 密码输入框-->
<p><input type = "submit"name = "button" value = "提交"></p>
<!--type = "submit" : 提交框-->
</form>
8.2表单的应用
<!--
隐藏域：hidden
只读: readonly
禁用 disable
-->
<label for = " "> </label>
8.3表单的初级验证
placehold = " " <!--提示信息-->
required <!-- 不能为空-->
pattern
<p>
<input type = " " name = " "patttern = " 限制的作用 ">
</p>
九.框
9.1文本框和单选框
<!--
type text,password,checkbox
name 表单名字
value 初始值，当type为radio必须指定一个值
size 大小，当type为text或password时，以字符为单位，其余的时候以像素
maxlength type为text/password时输入的最多字符
-->
<input type = "radio" value = "boy"/>
<input type = "radio" value = "girl"name = "sex"/>
9.2多选框和按钮
<!-- 多选框-->
<p>爱好：
<input type="checkbox" name="vehicle" value="Bike">吃饭
<input type="checkbox" name="vehicle" value="Car">睡觉
<input type="checkbox" name="vehicle" value="Car">打豆豆
<input type="checkbox" name="vehicle" value="Car">旅游
</form>
<!-- 按钮（三种） -->
<!-- button(普通按钮)， submit(提交按钮) ， reset(重置按钮) -->
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="提交">
9.3列表框文本和文件域
select创建列表框和下拉菜单， 必须与option 结合使用
select 属性（select创建列表框和下拉菜单， 必须与option 结合使用 ）：
disable 禁用 multiple 列表框和下拉框是否允许多选 ，支持boolean值属性，为true时则为列表框 size 列表框可同时显示多少个列表项 select 能包含的子元素
option 属性（option 中的 value 必须填，与select 中的name 形成参数对传给后台）：
disabled 禁用 selected 初始状态是否被选中 optgroup 单项组，也就是把option分组 lable 指定选项组的标签，必填属性 disabled 禁用选项组所有标签
<form action="https://me.csdn.net/weixin_45609811" method="post">
<!--下面是简单的下拉菜单--><br />
<select id="skills" name="skills">
<option value="luo">海螺</option>
<option value="ke">贝壳</option>
<option value="pang">螃蟹</option>
</select><br/><br/><br/><br/>
<!--下面是允许多选的列边框--><br/>
<select id="books" name="books" multiple size="4">
<option value="luo">海螺</option>
<option value="ke">贝壳</option>
<option value="pang">螃蟹</option>
</select><br />
<!--下面是允许多选的列边框--><br />
<select id="lee" name="lee" multiple size="6">
<optgroup label="海洋" >
<option value="luo" disabled>海螺</option>
<option value="ke">贝壳</option>
<option value="pang" selected>螃蟹</option>
</optgroup>
<optgroup label="陆地">
<option value="fol">小花</option>
<option value="gla">小草</option>
</optgroup>
</select><br />
<button type="submit" >提交</button><br>
</form>
扫一扫
253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
