html5

<!DOCTYPE html>//文档类型声明标签
<html lang="en">//网页用什么语言显示
<head>
    <meta charset="UTF-8">
    //编译方式
    <title>修改表单属性</title>
</head>
<body>
<h4>标题</h4>
<h6>副标题1</h6>
<p>段落1</p>
<p>段落2</p>
<h6>副标题2</h6>
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
</body>
</html>

4 div 和 span

盒子，用来装内容。

表示分割，分区，每个独占一行。

表示跨度，跨距，可一行显示多个。

5 图像标签

用于插入图片。

<img>标签属性:

src:图片路径或名称。

alt: 替换图片文本，图片无法显示时出现。

title:图片提示文本，鼠标停留在图片上时出现。

注意：1 属性必须写在标签名后面。

2 标签名，属性，之间空格隔开。

3 属性采用键值对形式。

6 图片路径

1 相对路径

../每上一级以此累加，例如../../../

2 绝对路径

只适合本机电脑，不实用。

网络的资源使用绝对路径时可以任意一机访问。

7 超链接标签

连接分类：

1 外部连接

2 内部连接：网站内部页面之间的相互连接

3 空连接： <a href="#" > 首页</a>

4 下载连接：地址是压缩包或文件，则会下载。连接形式是 .exe 或 .zip 。

5 各种网页元素做的连接

6 锚点链接：点了连接，可以定位到页面中的某个位置。

8 注释标签和特殊字符

3 表格标签

表格用于显示，展示数据的，可读性清晰。

1 表头单元格标签

2 表格属性不常用，通常通过css设置。

3 表格结构标签

4 合并单元格

1 目标单元格:(写合并代码)

跨行：最上侧单元格为目标单元格，写合并代码。

跨列：最左侧单元格为目标单元格，写合并代码。

2 合并单元格步骤：

1 确定跨行还是跨列

2 找到目标单元格合并方式=合并的单元格数量 <td colspan/rowspan="2"></td>

3 删除多余的单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="600" height="100">
    <!--    默认没有边框  cellpadding="0" 文字和边框的距离  cellspacing="0" 边框和边框的距离-->
    <thead><!--表格结构标签--表头-->
    <tr>
        <th>书籍分类</th><!--表头单元格属性-->
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
    </tr>
    </thead>
    <tbody><!--表格结构标签--表体-->
    <tr><!--定义行-->
        <td rowspan="3">热销榜</td><!--合并单元格-->
        <td>1</td><!--定义普通单元格-->
        <td>书1</td>
        <td><img src="down.png" alt="下降"></td>
        <td>100</td>
        <td>100</td>
        <td><a href="p3.html" target="_blank">贴吧</a></td>
<!--        <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>-->
<!--        target="_self" 默认值-->
<!--        target="_blank" 在新窗口中打开-->
    </tr>
    <tr>
        <td>2</td>
        <td>书2</td>
        <td><img src="down.png" alt="下降"></td>
        <td>500</td>
        <td>500</td>
        <td><a href="p3.html">贴吧</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td>书3</td>
        <td><img src="down.png" alt="下降"></td>
        <td>500</td>
        <td>500</td>
        <td><a href="p3.html">贴吧</a></td>
    </tr>
    <tr>
        <td rowspan="3">促销榜</td>
        <td>4</td>
        <td>书4</td>
        <td><img src="down.png" alt="下降"></td>
        <td>500</td>
        <td>500</td>
        <td><a href="p3.html">贴吧</a></td>
    </tr>
    <tr>
        <td>5</td>
        <td>书5</td>
        <td><img src="down.png" alt="下降"></td>
        <td>500</td>
        <td>500</td>
        <td><a href="p3.html">贴吧</a></td>
    </tr>
    </tbody>
</table>
</body>
</html>

4 列表标签

D:\idea-workplace\Test\src\javaa\daer\daershujia\htmlsE\LieBiao.html

分类：

1 无序列表

常用，列表等级并列，会有自己的样式属性，可通过css设置。

<ul> //其内只能放<li>标签

<li> //其内可放任何标签，相当于一个容器

</li>

</ul>

2 有序列表

理解，列表等级并列，会有自己的样式属性，可通过css设置。

<ol> //其内只能放<li>标签

<li> //其内可放任何标签，相当于一个容器

</li>

</ol>

3 自定义列表

重点，用于对某个事物解释说明和描述，自定义列表前没有任何符号。

<dl> //其内只能放<dt>, <dd>标签

<dt> 名词1</dt> //可存放多组<dt>, <dd>，但每组要对应使用。

<dd> 解释1</dd> //一般一个<dt>对应多个<dd>，两者并列关系，但后者围绕前者展开。

</ol>

5 表单标签

用来收集用户信息。

1 组成：

1 表单域

包含表单元素的区域，实现用户的信息的手机和传递，把范围内的元素提交给服务器。

2 表单控件（或表单元素）

1 input输入表单元素

用于收集用户信息。

2 select下拉列表框元素

3 textarea文本域元素

3 提示信息组成。

<form action="" method="get">
    <!--<input type="" >用于收集用户信息-->
    <!--单标签-->
    <!--type指定不同的控件类型-->
    账号：<input type="text" name="account" value="请输入6位内账号" maxlength="6"><br/>
    <!--    value 指定默认值 maxlength 指定最长长度-->
    密码：<input type="password" name="password"><br/>
    男<input type="radio" name="sex" checked> 女<input type="radio" name="sex">
    打球<input type="checkbox" name="hobby">唱歌<input type="checkbox" name="hobby">看书<input type="checkbox"
                                                                                         name="hobby"><br/>
    <!--    checked 指定已选中 适用于单选与复选框-->
    <!--    单选和复选name值要相同,以此实现可单选，复选功能-->
    <input type="submit" value="登录"> <input type="reset" value="重置"><br/>
    <input type="image" src="down.png">
    <!--    定义图片形式的提交按钮-->
    <input type="button" value="获取验证码"><br/>
    <!--注意这里的value值，把获取的值提交给后台服务器-->
    <input type="file">
    <!--    用来上传文件-->
</form>

2 表单控件

1 label标签

为元素定义标签，绑定一个表单元素，当点击label标签内的文本时，即可选中对应的表单元素。（增加用户体验）

    <!--    label标签
    为元素定义标签，绑定一个表单元素，当点击label标签内的文本时，即可选中对应的表单元素。（增加用户        
    体验）
    id与for属性值要前后一致-->
    <input type="radio" name="单选按钮" id="radio"><label for="radio">按钮</label>

2 select标签

    <!--    select标签 让用户有多个选择且能节约空间-->
    城市
    <select>
        <option>郑州</option><!--至少有一对-->
        <option selected>厦门</option><!--表示默认已选中-->
        <option>漯河</option>
    </select>

3 textarea标签

    <!--    textarea标签 ，定义多行文本输入的控件，适用于用户输入内容较多-->
    <!--    显示的行数，多于的行数可自动换行，并添加纵向滚动条   每行可输入的字符数，多于规定数量换        
    行
    但此种常用css设置-->
    其他：<textarea rows="3" cols="8">输入长文本</textarea>

6 查阅文档

w3c /mdn

7 注册页面案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单注册案例</title>
</head>
<body>
<form action="" method="get">
    <table border="0" cellspacing="10" cellpadding="0">
        <tr>
            <td colspan="2">
                <h4>青春不常在，抓紧时间谈恋爱。</h4>
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" id="man"><label for="man">男</label>
                <input type="radio" name="sex" id="woman"><label for="woman">女</label>
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
                <select>
                    出现在列表框中但不能被选中
                    <option disabled value="" selected>请选择年份</option>
                    <option>2001</option>
                    <option>2000</option>
                    <option>1999</option>
                    <option>1998</option>
                    <option>1997</option>
                    <option>1996</option>
                </select>
                <select>
                    不出现在列表框中
                    <option disabled selected hidden>请选择月</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select>
                    <option disabled selected hidden>请选择日</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                    <option>26</option>
                    <option>27</option>
                    <option>28</option>
                    <option>29</option>
                    <option>30</option>
                    <option>31</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td>
                <!--            文本框内提示输入信息且在用户输入时自动消失-->
                <input type="text" placeholder="请输入所在地区">
                <!--            此种情况更像默认值，文本框内提示输入信息但在用户输入时要手动删除-->
                <!--            <td><input type="text" value="请输入所在地区"></td>-->
            </td>
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="hunyin" id="weihun"><label for="weihun">未婚</label>
                <input type="radio" name="hunyin" id="yihun"><label for="yihun">已婚</label>
                <input type="radio" name="hunyin" id="lihun"><label for="lihun">离婚</label>
            </td>
        </tr>
        <tr>
            <td>学历</td>
            <td>
                <!--            文本框内提示输入信息且在用户输入时自动消失-->
                <input type="text" placeholder="请输入个人学历">
            </td>

        </tr>
        <tr>
            <td>喜欢类型</td>
            <td>
                <input type="checkbox" name="hobby" id="xiaoxianrou"><label for="xiaoxianrou">小鲜肉</label>
                <input type="checkbox" name="hobby" id="xiaonaigou"><label for="xiaonaigou">小奶狗</label>
                <input type="checkbox" name="hobby" id="laodashu"><label for="laodashu">老大叔</label>
                <input type="checkbox" name="hobby" id="douxing"><label for="douxing">都行</label>
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td>
                <textarea placeholder="请输入自我介绍"></textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册">
                <input type="reset" value="重置信息"/>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked>我同意注册条款和会员加入标准<br/>
                <a href="yiddenglu.html">我是会员，立即登录</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h4>我承诺</h4>
                <ul>
                    <li>年满18岁，单身。</li>
                    <li>态度严肃，认真，真诚。</li>
                    <li>寻找携手之人。</li>
                </ul>
            </td>
        </tr>
    </table>
</form>
</body>
</html>

小豫梨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5

一 HTML简介1 网页网站是网页的集合，网页是网站的某一页。网页由图片，连接，文字，视频，声音等元素组成。2 什么是HTML超文本标记语言（不是编程语言，标记语言是一套标记标签），用来描述网页的语言。3 浏览器浏览器内核：负责读取网页内容，整理讯息，计算网页的显示方式并进行显示网页。1 web标准概念概念：是一系列标准的集合，最著名的标准化组织。2 web标准作用：1 使web地发展更好2 使网页容易被搜索，被访问3 减少流量4 易于维护5 提.
复制链接

扫一扫