前端HTML

最新推荐文章于 2024-10-10 22:10:24 发布

say no to 404

最新推荐文章于 2024-10-10 22:10:24 发布

阅读量94

点赞数

分类专栏：前端文章标签： html html5 前端

原文链接：https://www.bilibili.com/video/BV14J4114768?p=55

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

字体标签

<strong></strong>粗体
<em></em>倾斜效果
<del></del>删除
<ins></ins>下划线

div和span标签
div是用来布局的，但是一行只能放一个div，大盒子
span用来布局的，一行可以放多个span，小盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>我是一个大盒子1</div>
    <div>
        <span>小盒子1</span>
        <span>小盒子2</span>
        <span>小盒子3</span>
    </div>
    <div>我是一个大盒子2</div>
</body>
</html>

在这里插入图片描述

3.图像标签：
src:图片路径，必须属性
alt:文本，图像不能显示时的文本
title:鼠标放到图片上的显示文本
width
height
border:设置图像的边框粗细
1.相对路径：对于同级的：
在这里插入图片描述

<img src="陈延年.jpg" alt="">

2.相对路径：对于下一级的
在这里插入图片描述

<img src="/images/陈延年.jpg" alt="">

相对路径：对于上一级的：
在这里插入图片描述

<img src="../images/陈延年.jpg" alt="">

超链接标签：

<a href="" target="目标窗口的弹出方式">文本或图像</a>

默认打开方式有两种，一种_self是默认打开方式，_blank是在新窗口打开
可以有外部链接和内部链接两种
锚点链接：点击链接的时候，可以快速定位到页面中的某个位置

在链接文本的href属性时，设置属性值为#名字的形式，eg:<a herf="#two">第二集</a>
找到目标位置标签，里面加入一个id属性=刚才的名字，eg:<h3 id="two">第二集介绍</h3>

注释标签和特殊字符：
注释：
以
快捷键：ctrl+/
特殊字符：
HTML特殊字符编码对照表
表格标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<table>
    <tr>
        <th>姓名</th><!--表头标签会加粗居中显示-->
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>hahah</td>
        <td>女</td>
        <td>12</td>
    </tr>
</table>
</body>
</html>

属性：
align:left、center、right规定表格相对周围元素对齐方式
boder
cellpadding:单元边沿与其余内容之间的间距
cellspacing:规定单元格之间的空白
width:表格的宽度

<table align="center">
    <tr>
        <th>姓名</th><!--表头标签-->
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>付书凡</td>
        <td>女</td>
        <td>12</td>
    </tr>
</table>

表格会到页面中央显示
thead标签和tbody标签
thead标签是指表头区域

<table align="center">
    <thead>
            <tr>
                    <th>姓名</th><!--表头标签-->
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
    </thead>
    <tbody>
            <tr>
                    <td>付书凡</td>
                    <td>女</td>
                    <td>12</td>
                </tr>
    </tbody>
</table>

合并单元格

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<table align="center" border="1" width="500px" height="500px">
    <tr>
        <td></td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述
7. 列表标签：
列表是用来布局的
无序列表（重点）：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

ul标签中只能放li标签，而li是一个容器，可以放任何标签
无序列表常用于购物网站左边的分类
有序列表：

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

自定义列表：（重点）

<dl>
    <dt>名词1</dt>
    <dd>名词1解释</dd>
    <dd>名词1解释</dd>
</dl>

自定义列表常用于网站底部帮助中心和关于我们等

`<dl></dl>里面只能包含<dt>和<dd>
<dt>和<dd>个数没有限制，经常是一个dt对应多个dd

表单标签：
一个完整的表单通常由表单域、表单控件、提示信息组成

    <form action="url地址" method="提交方式" name="表单名称">
        各种表单元素控件
    </form>

表单控件

input输入表单元素：
type的值：text、password、radio、checkbox、submit、button、flie

    <form action="xxx.php" method="GET">
        用户名：<input type="text" name="username" value="请输入用户名"><br>
        密码：<input type="password" name="password"><br>
        <!-- radio是单选按钮，可以实现多选一，是一个小圆形 
        name是表单元素的名字，在这里性别单选按钮必须有相同的名字才能实现多选一
        单选按钮和多选按钮表单名字都要相同
        -->
        性别：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女"> <br>
        <!-- checkbox是多选框，可以选多个，是一个小方块 -->
        爱好：吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉<input type="checkbox" name="hobby" value="睡觉"> 
        打豆豆 <input type="checkbox" name="hobby" value="打豆豆"><br>
        <!-- 点击了提交按钮，就可以将表单元素的值提交给服务器 -->
        <input type="submit" value="免费注册"><br>
        <!-- 普通按钮button，后期结合Js搭配使用 -->
        <input type="button" value="获取短信验证码" ><br>
        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像：<input type="file">
    </form>

在这里插入图片描述

	**label标签：**

    <!-- for里面的值要和id的值一模一样才可以 -->
    <label for="text">
        用户名：
    </label>
    <input type="text" id="text"><br>
    <label for="male">
男：</label>
    <input type="radio" id="male" name="sex">
    <label for="female">女：</label>
    <input type="radio" id="female" name="sex">

在这里插入图片描述

select下拉表单元素：

    <form>
        籍贯：
        <select>
            <option selected="selected">山东</option>
            <option>河南</option>
            <option>安徽</option>
            <option>江苏</option>
        </select>
    </form>

在这里插入图片描述

textarea文本域元素：
1.当用户输入内容较多的情况下，使用<textarea>用于定义多行文本
2.cols="每行中的字符数“,rows=“显示的行数”(实际开发中不会使用，都是使用css来设置大小）

<form>
    今日反馈：
        <textarea cols="50" rows="5">

        </textarea>
</form>

基础的注册页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<form action="">
    <!-- 设置宽度为500px在这里加上 -->
<table align="center" width="500">
    <tr>
        <th colspan="2">青春不常在，抓紧谈恋爱</th>
    </tr>
    <tr>
        <td>性别</td>
        <td>
            <input type="radio" id="nan" name="sex">
            <label for="nan">男</label>
            <input type="radio" id="nv" name="sex">
            <label for="nv">女</label>
        </td>
    </tr>
    <tr>
        <td>生日</td>
        <td>
            <select>
                <option selected="selected">-请选择年份-</option>
                <option>2001</option>
            </select>
            <select>
                    <option selected="selected">-请选择月份-</option>
                    <option>1</option>
            </select>
            <select>
                    <option selected="selected">-请选择日-</option>
                    <option>1</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>所在地区</td>
        <td>
            <input type="radio" id="wei" name="condi">
            <label for="wei">未婚</label>
            <input type="radio" id="yi" name="condi">
            <label for="yi">已婚</label>
            <input type="radio" id="li" name="condi">
            <label for="li">离婚</label>
        </td>
    </tr>
    <tr>
        <td>学历</td>
        <td>
            <input type="text" value="幼儿园">
        </td>
    </tr>
    <tr>
        <td>喜欢的类型</td>
        <td>
            <input type="checkbox" name="like">妩媚的
            <input type="checkbox" name="like">可爱的
            <input type="checkbox" name="like">小鲜肉
            <input type="checkbox" name="like">都喜欢
        </td>
    </tr>
    <tr>
        <td>自我介绍</td>
        <td>
            <textarea >个人简介</textarea>
        </td>
    </tr>
    <tr>
        <td></td>
        <td><input type="submit" value="免费注册"></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="checkbox" checked="checked">我同意注册条款和加入会员标准</td>
    </tr>
</table>
</form>
</body>
</html>