html标签使用、表单、表格


参考视频:
https://edu.51cto.com//center/course/lesson/index?id=224246
https://ke.qq.com/course/320021

网页组成

• HTML标记语言:组成网页架构的元素组件
• CSS 样式语言:美化网页的样式
• JavaScript 程式语言:控制网页的动态效果
• JQuery 程式语言:协助及加强JavaScript的实现

一、基本结构

<!DOCTYPE html>  <!-- 文档声明,此类型声明html5 */ -->
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<meta name=""Keywords content="关键字">
	<meta name="Description" content="简介、描述">
	<link rel="stylesheet" href="./css/main.css">
	<style>
		/* css代码 */
	</style>
	<script type="text/javascript">
		// js代码
	</script>
</head>
<body>
	<!-- 内容 -->
</body>
<script type="text/javascript" src="./js/main.js"></script>
</html>

HTML介绍

HTML:是一种用于创建网页的标记语言, 可以使用HTML创建网页,用浏览器打开会自动解析。

HTML是由标签和内容构成。

二、标签使用

2.1.文本标签

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<title>我的第一个页面</title>
		<meta charset="utf-8">
	</head>
	<body>				<!--这是主体内容部分-->
		<h1 title="我是标题标签">标题1</h1>
		<hr>			<!--分隔线-->
		<p>
			我是内容 <br>
			我是内容
		</p>
		<hr>
		<b>我是b标签</b>
		<u>我是u标签</u>
		<s>我是s标签</s>
		<i>我是i标签</i>
		<hr>
		<h2 align="center">离思五首·其四</h2>
		<p align="center">
			曾经沧海难为水,除却巫山不是云。<br>
			取次花丛懒回顾,半缘修道半缘君。
		</p>
	</body>
</html>

在这里插入图片描述

2.2.列表标签

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<title>列表标签</title>
		<meta charset="utf-8">
	</head>
	<body>					<!--这是主体内容部分-->
		<ol start="3">		<!--有序列表-->
			<li>列表1</li>
			<ul>
				<li>嵌套列表1</li>
				<li>嵌套列表2</li>
			</ul>
			<li>列表2</li>
			<li>列表3</li>
		</ol>
		<hr>
		<ul>				<!--无序列表-->
			<li>无序列表1</li>
			<li>无序列表2</li>
			<li>无序列表3</li>
		</ul>
		<hr>
		<dl>				<!--自定义列表-->
			<dt>列表头</dt>
			<dd>列表内容</dd>
			<dt>列表头</dt>
			<dd>列表内容</dd>
		</dl>
	</body>
</html>

在这里插入图片描述

2.3.超级链接

超链接标签:<a href=“网址” ></a>
在这里插入图片描述

<body>
	<a href="http://www.baidu.com" target="_blank">百度一下</a>	<br>		<!--在新窗口打开跳转页面-->
	<a href="demo1.html">跳转到本地页面</a>
</body>

在这里插入图片描述

2.4.锚点跳转

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>锚点跳转</title>
	<style type="test/css">
		a {
			font-size: 40px;		<!--设置字体大小-->
		}
	</style>
</head>
<body>
	<ul>
		<li id="t1" style="width:200px; height:400px; background-color:red">1</li>
		<li id="t2" style="width:200px; height:400px; background-color:blue">2</li>
		<li id="t3" style="width:200px; height:400px; background-color:green">3</li>
		<li id="t4" style="width:200px; height:400px; background-color:yellow">4</li>
	</ul>
	<hr>
	<a href="#t1">1</a>
	<a href="#t2">2</a>
	<a href="#t3">3</a>
	<a href="#t4">4</a>
</body>
</html>

点击网站下面的数字可以跳转到对应的颜色
在这里插入图片描述

2.5.图片标签

<img src=“图片文件路径”alt=“图片提示”>

在这里插入图片描述

<body>
	<a title="跳转到百度" href="http://www.baidu.com" target="_blank">
		<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2835713736,365904859&fm=26&gp=0.jpg" alt="">
	</a>	
	<hr>
	<img height="200" src="img/1.jpg1" alt="alt提示信息,这是图片">
</body>

在这里插入图片描述

2.6.div标签

<div>标签用于在HTML文档中定义一个区块。
<div>标签常用于将标签集中起来,然后用样式对它们进行统一排版。
<div style="height: 100px;width: 100px;background-color: blue">
    <p>段落一</p>
    <p>段落二</p>
</div>

在这里插入图片描述

三、表单/表格

3.1.表单标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<body>
    <form action="index.html">
        <input type="text" placeholder="请输入用户名"> <br>
        <input type="password" placeholder="请输入密码"> <br>
        <input type="button" value="按钮"> <br>
        <input type="checkbox">打球         <!--复选框-->
        <input type="checkbox">看书
        <input type="checkbox" checked>跑步     <!--checked设置元素为选中状态-->
        <hr>
        <input type="radio">                <!--单选框-->
        <hr>
        <input type="file">                 <!--传递文件-->
        <input type="hidden">               <!--隐藏文本框-->
        <input type="reset">                <!--重置按钮-->
        <input type="submit">               <!--提交按钮-->

        <hr>
        <input type="text" disabled placeholder="不可用">
        <input type="text" readonly placeholder="只读">
    </form>
</body>

在这里插入图片描述

3.2.单选按钮组

<body>
    <form>
        请选择性别
        <input id="man" type="radio" name="gender">
        <label for="man"></label>
        <input id="woman" type="radio" name="gender">
        <label for="woman"></label>
    </form>
</body>

在这里插入图片描述

3.3.下拉菜单

在这里插入图片描述
在这里插入图片描述

<body>
    <select autofocus>              <!--autofocus自动获得焦点-->
        <option value="">长沙</option>
        <option value="">邵阳</option>
        <option value="">永州</option>
    </select>
</body>

在这里插入图片描述

3.4.文本框

<body>
    <textarea placeholder="请输入信息" cols="100" rows="50"></textarea>
</body>

在这里插入图片描述

3.5.复选框

<body>
    <label for="">请输入爱好</label>
    <input type="checkbox" /><label for="">吃饭</label>
    <input type="checkbox" /><label for="">睡觉</label>
    <input type="checkbox" /><label for="">打豆豆</label>
</body>

在这里插入图片描述

3.6.表格

• table 表格标签
• thead 表格标题
• tr 行标签
• th 列名
• tbody 表格内容
• td 列内容
<body>
    <table border="5" cellpadding="10" cellspacing="2" align="center" width="500">
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <td colspan="2">单元格</td>         <!--合并列单元格-->
                <td>单元格</td>
            </tr>
            <tr align="center">
                <td>单元格</td>
                <td rowspan="2">单元格</td>         <!--合并行单元格-->
                <td>单元格</td>
            </tr>
            <tr align="center">
                <td>
                    <div>
                        内嵌的div元素
                    </div>
                    <span>
                        内嵌的span元素
                    </span>
                </td>
                <td>
                    <img src="img/1.jpg" alt="" width="100" height="100">
                </td>
            </tr>
        </tbody>
    </table>
</body>

在这里插入图片描述

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页