前端学习笔记 - html

最新推荐文章于 2025-05-14 20:14:52 发布

原创最新推荐文章于 2025-05-14 20:14:52 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了HTML的基本结构与常用标签，包括文本、超链接、表单、列表、表格、图片等元素的使用方法，并展示了如何引入CSS和JS文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

html 语言由标签和标签属性组成
标签内不区分大小写, 通常为小写
标签支持嵌套

标签分类

类别	属性	是否独占一行	能否设置宽高	示例
行内元素	display: inline	False	不可设置, 即包含内容的宽高	`a`, `span`, `i`, `label`, `br`
块元素	display: block	True	可设置, 宽默认为父元素的宽	`div`, `p`, `h1`~`h6`, `ol`, `ul`, `li`, `table`, `form`
行内块元素	display: inline-block	False	可设置	`img`, `input`

标签详解

html 基础结构

<!DOCTYPE html>
<html lang="en">

	<!-- 头信息 -->
	<head>
	    <!-- 网站图标 --> 
		<link rel="icon" href='fav.ico'>
	    <!-- 元数据, 如字符 --> 
	    <meta charset="UTF-8">
	    <!-- 页面标签栏的文本内容 --> 
	    <title>Title</title>
	</head>
	
	<!-- 主体内容 -->
	<body>
		<div>
			hello world
		</div>
	</body>
</html>

文本

<!-- 行内元素 -->
<a>, <span>, <i>, <label>

<!-- 块元素 -->
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

超链接

href ~ 超链接地址
target ~ 打开页面方式
- _blank ~ 新标签打开页面
- _self, _top, _parent ~ 本标签打开页面
title ~ 鼠标悬停时显示的信息

<a href="" target="_blank" title="ips">超链接文字</a>

表单

表单标签相关
- input 配合 label 进行关联
- 选择(单选,多选,下拉框)

<form action="" method>
    <!-- 使用 input 标签的 id 进行关联 -->
    <div>
        <label for="i1">用户名: </label>
        <!-- 空输入框 -->
        <input type="text" id="i1" name="username">
    </div>

    <!-- label 把 input 标签包起来 -->
    <div>
        <label>密码: <input type="password" name="password"></label>
    </div>

    <!-- 单选, 需要使用 name 属性关联多个单选, value 属性是传给后端的值 -->
    <div>
        <label for="">性别: </label>
        <input type="radio" name="gen" value="male" checked="checked">男
        <input type="radio" name="gen" value="female">女
    </div>
    
    <!-- 下拉框 -->
    <div>
        <label for="addr">地址</label>
        <select name="addr" id="addr">
            <option value="bj">---</option>
            <option value="bj">北京</option>
            <option value="sh" selected>上海</option> <!-- 默认选中 -->
            <option value="gz">广州</option>
        </select>
    </div>
    
    <!-- 日期 date, 日期时间 datetime-local -->
    <div>
        <label for="">出生日期</label>
        <input type="date">
    </div>

    <div>
        <!-- 数字, 文本框验证为数字 -->
        <label for="">数字示例</label>
        <input type="number">

        <!-- 邮箱, 文本框验证为@xxx.com -->
        <label for="">Email</label>
        <input type="email">
    </div>
    
    <!-- 多选,  -->
    <div>
        <label for="">爱好: </label>
        <input type="checkbox" value="basketball" checked>篮球
        <input type="checkbox" value="football">足球
        <input type="checkbox" value="pingpangball">乒乓球
    </div>

    <!-- 上传头像 -->
    <div>
        <label for="">头像: </label>
        <input type="file" name="pic" accept="image/*">
    </div>

    <!-- 大文本 -->
    <div>
        <textarea name="des" cols="30" rows="10"></textarea>
    </div>

    <!-- 三种按钮 -->
    <div>
        <input type="button" value="普通按钮">
        <input type="reset" value="重置">
        <input type="submit" value="提交">
    </div>

	<!-- 属性介绍 -->
	<!-- 默认值 -->
	<input type="text" id="i1" name="username" value="Kaiyue">
	<!-- 提示信息 -->
	<input type="text" id="i1" name="username" placeholder="username">
	<!-- 禁用 -->
	<input type="text" disabled>
	<!-- 选中 -->
	<input type="radio" name="gen" value="male" checked="checked">男
</form>

列表

<li> 表示 list
<ul> 表示无序列表, <ol> 表示有序列表
type 列表样式
- 无序列表
  - disc 实心圆
  - circle 空心圆
  - square 实心矩形
- 有序列表
  - 数字 1 ~ 9
  - 字母 a/A ~ z/Z
  - 罗马数字 i/I ~ iii/III

<!-- ul 无序列表 -->
<ul type='circle'>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

<!-- ol 有序列表 -->
<ol type='i'>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ol>

表格标签

table: 表格
thead: 表格头
tbody: 表格体
tfoot: 表格底
tr: 表格行
th: 表格头(默认加粗居中)
td: 主体单元格
rowspan: 合并行(竖着合并)
colspan: 合并列(横着合并)

<table border="1">
	<thead>
	    <tr>
	        <th>序号</th>
	        <th>姓名</th>
	    </tr>
    </thead>
    <tbody>
	    <tr>
	        <td>1</td>
	        <td>Tim</td>
	    </tr>
	    <tr>
	        <td>2</td>
	        <td>Tom</td>
	    </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

图片标签

src: 图片地址
alt: 加载失败时的提示
title: 鼠标悬停时的提示

<img src='picPath' alt='errorInfo' title='tips' />

非内容标签

引用 css 和 js

<!-- 内部 css 样式写法, 包在 head 里 -->
<style type="text/css">
	h1 {color:red;}
	p {color:blue;}
</style>

<!-- 引入外部 css 样式文件, 包在 head 里 -->
<link rel='styleseet' type='text/css' href='css/index.css'>

<!-- 内部 js 写法 -->	
<script>
  //找到XX元素，一般给元素加id 
  yuansuojb=document.getElementById('yuansu');    
  //给xx元素加事件
  yuansuojb.onclick=function(){
    //代码段
    alert(1);
  }
</script>

<!-- 链接外部 js 文件 -->	
<script type='text/javascript' src='index.js'></script>