java学习day27--HTML

1. 什么是html
hyper 超级 text 文本 markup 标记 language 语言
超文本标记语言，俗称网页

2. html 文件结构
以 *.html 或 *.htm 结尾的文本文件

1) 标签一般成对出现：`<标签名> </标签名>`
2) 最外层的标签`<html></html>

<!DOCTYPE html>
版本是html4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
3) `<html>` 标签由 `<head>` 和 `<body>` 子标签组成
<html>
<head></head>
<body></body>
</html>

3.5 特殊转义字符（实体）
< 表示 <
> 表示 >

3.6 图片标签 img
src 属性代表图片路径
更多注释内容
alt 是图片访问不到时的提示文字
width 表示宽度（单位是像素）
height 表示高度（单位是像素）

注意：路径建议使用相对路径，不要使用绝对路径（e:\... c:\...)

3.7 超链接 a 【重点】
href 属性表示跳转的目标
方式1:两个网页之间跳转：
<a href="目标网页的地址">超链接提示文字</a>
方式2：网页内跳转 (锚点)
<a href="#另一个标签的id值">超链接提示文字</a>
方式3：图片作为超链接
<a href=""> <img src="图片路径"> </a>

3.8 列表
有序列表 (order)
<ol>
<li>列表项</li>
</ol>
无序列表 (unorder)
<ul>
<li>列表项</li>
</ul>

3.9 表格【重点】
<table>
   <thead></thead> 头
   <tbody></tbody> 体
   <tfoot></tfoot> 脚
</table>
其中 thead, tbody, tfoot 里又可以分为行与列
`<tr>` 表示行 '<td>' 表示列
比如要在tbody再分两行两列
<tbody>
   <tr>
       <td>第一列</td><td>第二列</td>
   </tr>
   <tr>
       <td>第一列</td><td>第二列</td>
   </tr>
</tbody>

例：

<table border="1" width="100%">
    <!--标题-->
    <thead>
        <tr>
            <td>编号</td><td>姓名</td>
        </tr>
    </thead>
    <!--内容-->
    <tbody>
        <tr>
            <td>1</td><td>张三</td>
        </tr>
        <tr>
            <td>2</td><td>李四</td>
        </tr>
    </tbody>
</table>
<hr>
<table border="1" width="100%">
    <tr>
        <td>第一列</td><td>第二列</td>
    </tr>
    <tr>
        <td>第一列</td><td>第二列</td>
    </tr>
</table>
<hr>

生成表格的父子关系，4行3列
table>tbody>tr*4>td*3

同时生成thead和tbody 需要用() 把他们分组，平级的用+连在一起
table>(thead>tr>td*3)+(tbody>tr*4>td*3)

给table加属性的快捷写法
table[border=1][width=100%]>tbody>tr*2>td*2

<table border="1" width="100%">
    <tbody>
    <tr>
        <!--colspan=2 将两个td合并为一个-->
        <td colspan="2">行1列1</td>
        <td>ss</td>
    </tr>
    <tr>
        <td>行2列1</td>
        <td>行2列2</td>
        <td>行2列3</td>
    </tr>
    </tbody>
</table>

<!-- 合并行 -->
<table border="1" width="100%">
    <tbody>
    <tr>
        <td rowspan="2">行1列1</td>
        <td>行1列2</td>
    </tr>
    <tr>

        <td>行2列2</td>
    </tr>
    </tbody>
</table>

与`<td>`类似的'<th>'，他们都是代表一列，但'<th>'其中的文本默认是居中并加粗

3.10 表单【重点】
都是用来收集用户录入的信息
`<input type="text">` 文本框标签
`<input type="password">` 密码框
`<input type="radio">` 单选按钮例子：

<!-- name取值相同的单选按钮视为同一组 
         checked 表示是否默认选中， 对于这种取值只有“是否”这两种情况的属性， 有两种写法：一种是只写属性名，另一种是名="值"
    -->
    <p>男<input type="radio" name="sex" checked="checked">  女<input type="radio" name="sex"></p>

    <p>未婚<input type="radio" name="married">  已婚<input type="radio" name="married" checked> 离婚<input type="radio" name="married"></p>

`<input type="checkbox">` 复选按钮
```

<p>

   读书<input type="checkbox" name="hobby">
   玩游戏<input type="checkbox" name="hobby">
   听音乐<input type="checkbox" name="hobby">
   敲代码<input type="checkbox" name="hobby" checked>
</p>

`<input type="email">` 输入邮件地址
`<input type="date" value="日期初始值">` 日期选择标签
`<input type="time" value="时间初始值">` 时间选择标签

`<input type="file">` 文件选择框

`<input type="button" value="按钮文字">` 按钮
`<input type="reset" value="重置">` 重置按钮把页面所有填写的内容重置到初始状态
`<input type="submit" value="提交">` 提交按钮把表单填好的信息发送给服务器
`<button type="button|reset|submit">按钮文字</button>`

下拉列表标签
```
<select>
<option>值1</option>
<option>值2</option>
....
<option>值n</option>
</select>
```
如果希望某个option默认被选中，在option上添加属性selected
写法1： selected
写法2： selected="selected"

文本域标签适合输入多行文本内容
<textarea cols="宽" rows="高"></textarea>

3.11 取值是布尔值的属性
checked 配合单选按钮、复选按钮使用
selected 配合option标签使用
readonly 表示只读，可以配合大部分表单标签使用
disabled 表示禁用，跟只读类似，不能修改，
而且在表单提交时，不会发送disabled属性的数据
加在按钮上，禁用这个按钮
required 是否必填，如果空值，不允许提交表单

猜你喜欢