狂神Java学习笔记————HTML(二)

列表

  • 列表就是信息资源的一种展现形式,它可以使信息结构化条理化,并且以列表的样式显示出来,以便浏览者能更快捷地获取相应的信息
  • 可以在列表中嵌套列表,内列表和外层列表缩进明显区分

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表title>
head>
<body>

<ol>
    <li>1li>
    <li>2li>
    <li>3li>
ol>

<hr/>
<ul>
    <li>123
        <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        ul>
    li>
    <li>2li>
    <li>3li>
ul>
<hr/>

<dl>
    <dt>123dt>
    <dd>1dd>
    <dd>2dd>
    <dd>3dd>
    <dt>abcdt>
    <dd>add>
    <dd>bdd>
    <dd>cdd>
dl>
body>
html>

狂神Java学习笔记————HTML(二)_第1张图片

表格

  • 表格的基本结构:
    • 单元格
    • 跨行
    • 跨列

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格title>
head>
<body>

<table border="1px">
    <tr>

        <td colspan="3">1-1td>
    tr>
    <tr>

        <td rowspan="2">2-1td>
        <td>2-2td>
        <td>2-3td>
    tr>
    <tr>
        <td>3-2td>
        <td>3-3td>
    tr>
table>
body>
html>

视频和音频

  • video
  • audio

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频和视频title>
head>
<body>

<video src="xxx/xxx.xxx" controls autoplay>video>

<audio src="xxx/xxx.xxx" controls autoplay>audio>
body>
html>

页面结构


元素名 描述
header 标题头部区域的内容(用于页面或者页面中的一块区域)
footer 标记脚部区域的内容(用于整个页面或页面的一块区域)
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用
nav 导航类辅助内容

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构title>
head>
<body>

<header>
    <h2>网页头部h2>
header>
<section>
    <h2>网页主体h2>
section>
<footer>
    <h2>网页脚部h2>
footer>
body>
html>

内联框架

  • ifram标签,必须要有src属性即引用页面的地址
  • 给标签加上name属性后,可以做a标签的target属性,即在内联窗口中打开链接

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架title>
head>
<body>

<iframe src="http://www.baidu.com"
        frameborder="0"
        width="1000"
        height="800"
        name="hello">
iframe>
<a href="http://www.bilibili.com" target="hello">111a>








body>
html>

表单语法

from标签,action属性为所提交的目的地址,method选择提交方式
可以选择使用post或者get方式提交

  • get效率高,但在url中可以看到提交的内容,不安全,不能提交大文件
  • post比较安全且可以提交大文件
标签 说明
input标签 大部分表单元素对应的标签有text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text
select标签 下拉选择框
textarea标签 文本域
  • input标签
  • 可以提交用户名、密码等等
属性 说明
type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text
name 指定表单元素的名称(提交时所对应的key)
value 元素的初始值,radio必须提供
size 指定表单元素的初始宽度。当type为text或者password时,以字符为单位;其他type以像素为单位
maxlength type为text或者password时,输入的最大字符数
checked type为radio或者checkbox时,指定按钮是否被选中

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册title>
head>
<body>
<h1>注册h1>

<form action="xxx/xxx" method="get">

    <p>用户名:<input type="text" name="username" value="请输入用户名" maxlength="10" size="20">p>
    <p>   码:<input type="password" name="password">p>

    <p><input type="submit"> <input type="reset">
    p>

    <p>性别:<input type="radio" value="boy" name="sex"/>
        <input type="radio" value="girl" name="sex"/>
    p>
    <p>
        爱好:
        <input type="checkbox" value="b" name="hobby">打篮球
        <input type="checkbox" value="s" name="hobby">唱rap
        <input type="checkbox" value="d" name="hobby">跳舞
    p>
    <p>

        <input type="button" name="btn1" value="value:按钮上文字">

        <input type="image" src="xxx/xxx">
    p>

    <p>
        你来自:
        <select name="location">
            <option value="china">中国option>
            <option value="us" selected>美国option>
            <option value="japan">日本option>
        select>
    p>

    <p>
        <textarea name="text" id="10" cols="30" rows="10" >文本内容textarea>
    p>

    <p>
        <input type="file" name="file">
        <input type="button" name="upload" value="上传">
    p>

    <p>
        邮箱:
        <input type="email" name="email">
        url:
        <input type="url">
    p>

    <p>音量:
        <input type="range" min="0" max="100" name="voice" step="2">
    p>

    <p>搜索:
        <input type="search">
    p>
form>
body>
html>
  • 一些其他的属性
属性 说明
readonly 只读,不可更改
disable 禁用
hidden 隐藏,虽然不可见但是会提交
id 标识符,可以配合label的for属性增加鼠标的可用性
placehoder text 文字域等输入框内的提示信息
required 不能为空
patten 正则表达式验证

你可能感兴趣的:(追随狂神学Java,html,html5)