HTML学习笔记

楚颜a

已于 2023-10-11 17:56:45 修改

阅读量168

点赞数

文章标签：学习

于 2022-12-12 14:40:46 首次发布

本文链接：https://blog.csdn.net/weixin_45485187/article/details/128246395

版权

HTML标签

<!DOCTYPE html>//文档类型声明
<html lang="zh-CN">//语言类型声明
</html>//结束点
<head>//网页头部
<meta charset="UTF-8">//字符编码
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>//标题
<h1>//一级标题
<p>//段落
<br /> //换行
<hr>//水平线
</body>//主题区域

文本格式

<strong>//文本加粗
<em>//倾斜
<del>//删除线
<ins>//下划线

图像标签

<img/>//图像
属性：
	src:图片路径
	alt:替换文本，图像不能显示时显示的文字
	title:提示文本，鼠标放到图像上，显示的文字
	width:设置图像的宽度
	height:设置图像的高度
	border:设置图像边框的粗细

音频标签

<audio> //在页面中插入音频
	属性：
		src:音频的路径
		controls:显示播放的控件
		autoplay:自动播放（部分浏览器不支持）
		loop:循环播放

视频标签

<video>//在页面中插入视频
属性：
	src:视频的路径
	controls:显示播放的控件
	autoplay:自动播放
	loop:循环播放

链接标签

<a>//链接
属性：
    href:链接地址，注：href="#"为空链接
	target:打开方式，target=“_self”:当前页面打开，target="_blank":新建页面打开
	id:锚点链接

特殊字符

常用：
空格：&nbsp;
小于号：&lt;
大于号：&gt;

表格标签

<table>:定义表格的标签
属性：(可以通过CSS来设置)
    align:对齐方式
    	align="left":向左对齐
    	align="center":居中对齐
    	align="right":向右对齐
    border:是否拥有边框
    	border="1":拥有边框
    cellpadding：规定单元边沿与其内容之间的空白，默认1像素
    cellspacing:规定单元格之间的空白，默认2像素
    width:表格宽度
    height:表格高度
<thead>:头部
<tbody>:身体
<tr>:行
<td>:单元格
<th>:表头
	colspan:跨行合并
	rowspan:跨列合并
	<td colspan="3">:合并三列

列表标签

<ul>:无序列表
<ol>:有序列表
	<li>:列表项
<dl>:自定义列表
	<dt>:定义项目/名字
	<dd>:描述每一个项目/名字

表单标签

表单用于收集用户信息(注册)

<form>:定义表单域
属性：
	action:用于指定接收并处理表单数据的服务器程序的url地址
	method:用于设置表单数据的提交方式，其取值为get或post
	name:用于制定表单的名称，以区分同一个页面中的多个表单域
<input>:表单元素
属性：
	name:定义input元素的名称,注：单选按钮和复选框都要有相同的name值
	value:规定input元素的值
	checked:规定此input元素首次加载时应当被选中，注：主要针对单选按钮和复选框
	maxlength:规定输入字段中字符的最大长度
	type:设置不同的属性值用来制定不同的控件类型
	属性值：
		text:输入文本
		password:输入密码，输入的字符会被掩码
		radio:单选按钮
		checkbox:多选按钮
		submit:定义提交按钮，提交按钮会把表单数据发送到服务器
		reset:定义重置按钮，重置按钮会清除表单中的所有数据
		button:定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
		file:定义输入字段和“浏览”按钮，供文件上传
<label>:用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
属性：
	id:应当与相关元素的for属性相同
	for:应当与相关元素的id属性相同
<select>:下拉列表
	<option>:选项
		selected:selected="selected"：默认选项
<textarea>:定义多行文本输入的控件
属性：
	cols:每行中的字符数
	rows:显示的行数

其它

<!-- 注释内容 -->//注释标签，快捷键：ctrl+/
<div>//大盒子，独占一行
<span>//小盒子，可以多个span一行

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例页面</title>
</head>
<body>
    <!-- 示例代码 -->
    <h1> 链接 </h1>
    <a href="https://www.neuq.edu.cn/" target="_blank"> <h4> 东北大学秦皇岛分校官方网站 </h4></a>
    <a href="摄影作品.html" target="_self"><h4>摄影作品</h4></a>
    <a href="#">空链接</a>
    <br /> 
    <a href="./images/IMG_2733.JPG" target="_blank"><img src="./images/IMG_2733.JPG" alt="东秦风景" title="东秦风景" width="500" border="5"/></a>
    <a href="./images/IMG_2733.zip"><h4>单击下载该图片</h4></a>
    <audio src="./music/1.mp3" controls loop></audio><br>
    <video src="./videos/1.MP4" width="500" controls loop></video>
    <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;by 蔡俊黠 </p>
    <hr>
    <h1>表格</h1>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="300" height="100">
        <thead>
            <tr>
                <th colspan="3">基本信息</th>
            </tr>
            <tr>
                <th>姓名</th> 
                <th>性别</th> 
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td> 
                <td>男</td> 
                <td>19</td>
            </tr>
            <tr>
                <td>李四</td> 
                <td>男</td> 
                <td>21</td>
            </tr>
            <tr>
                <td>王五</td> 
                <td>男</td> 
                <td>17</td>
            </tr>
        </tbody>
    </table>
    <hr>
    <h1>列表</h1>
    <h3>无序列表</h3>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <h3>有序列表</h3>
    <ol>
        <li>张三 3000元</li>
        <li>李四 2000元</li>
        <li>王五 1000元</li>
    </ol>
    <h3>自定义列表</h3>
    <dl>
        <dt>东北大学秦皇岛分校</dt>
        <dd>官方邮箱</dd>
        <dd>官方微博</dd>
        <dd>官方微信</dd>
    
        <dt>防“患”未然创新创业团队</dt>
        <dd>官方邮箱</dd>
        <dd>官方微博</dd>
        <dd>官方微信</dd>
    </dl>
    <hr>
    <h1>表单</h1>
    <form action="demo.php" method="GET" name="name1">
        用户名：<input type="text" name="username" value="请输入用户名"> <br>
        上传头像:<input type="file"> <br>
        手机号码：<input type="text" name="phonenumber" value="请输入用户手机号码">
        <input type="button" value="获取短信验证码"><br>
        验证码：<input type="text" name="yzm" value="请输入验证码"> <br>
        密码：<input type="password" name="pwd"  maxlength="12"> <br>
        性别：<input type="radio" name="sex" value="男" checked="checked" id="nan"> <label for="nan">男</label> 
            <input type="radio" name="sex" value="女" id="nv"> <label for="nv">女</label> <br>
        居住地：
            <select>
                <option> 山东 </option>
                <option selected="selected"> 北京 </option>
                <option> 天津 </option>
            </select> <br>
        爱好：吃饭 <input type="checkbox" name="hobby" value="吃饭">
        睡觉<input type="checkbox" name="hobby" value="睡觉"> 
        打豆豆<input type="checkbox" name="hobby" value="打豆豆"> <br>
        今日反馈:
            <textarea cols="50" rows="10">

            </textarea>
            <br>
        <input type="submit" value="免费注册">
        <input type="reset" value="重新填写"> <br>
        </form>
</body>
</html>