前端学习——HTML
HTML: Hyper Text Markup Language(超文本标记语言)
Web标准:主要由 结构(Structure)、表现(Presentation)、行为(Behavior)三个方面构成。
结构:HTML
表现:CSS
行为:Javascript
HTML语法规范:
HTMl的标签是由尖括号包围的关键词构成。<>
双标签: < > < /> 单表签:< />
HTML基本结构标签
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html> 告诉浏览器采用html5版本显示页面
<html lang="en"> <html lang="zh-CN"> 语言种类 英文 中文网站
<meta charset="UTF-8"/> 规定HTML文档使用哪种字符编码
HTML常用标签
标题标签: <h1> - <h6> 独占一行,作为标题使用,并且根据重要性递减 加标题字体会变粗
段落标签: <p></p>文本会根据浏览器宽度自动换行,段落和段落之间保有间隙
换行标签: <br /> 单表签 强制换行(只是简单另起一行)
文本标签格式化标签
加粗 <strong></strong> <b></b>
倾斜 <em></em> <i></i>
删除线 <del></del> <s></s>
下划线 <ins></ins> <u></u>
<div></div> 单独占一行 大盒子
<span></span> 小盒子 一行上可以多个
图像标签和路径(重点)
单标签<img src="图像URL"> src必须属性 指定文件的路径和文件名
src | 必须属性 | 指定文件的路径和文件名 |
alt | 文本 | 替换文本,图像不能显示的文字 |
title | 文本 | 提示文字,鼠标放在图像上,显示的文字 |
width | 像素 | 设置图像宽度 |
height | 像素 | 设置图像高度 |
border | 像素 | 设置图像的边框粗细 |
weight和height修改一个,另一个等比缩放。
图像标签和路径(重点)
路径
目录文件 根目录(打开目录文件夹第一层)
相对路径:从引用文件所在位置为参考 即图片想对于HTML页面的位置
同级: <img src="baidu.gif" />
下一级路径 / <img src="image/baidu.gif" />
上一级路径 ../ <img src="../baidu.gif" />
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常从盘符开始 或网络中完整的地址(绝对路径中层级关系:\ 较少使用)
超链接标签(重点)
语法格式 <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href 必须属性 目标的URL 在当前页面打开:_self _blank新窗口
外部链接:http://.....
内部链接:网站内部页面之间的相互链接。
空链接:如果没有确定的链接目标时 < a herf="#">....</a>
下载链接:如果herf里面地址是一个文件: .exe 或压缩包: .zip 会下载这个文件
网页元素链接:文本 图像 表格 音频 视频等都可以添加超链接
锚点链接:可以快速定位到网页中的某个位置 在链接文本中的herf属性中添加属性值为 #名字的形式
<h1 id="1">1</h1>
<a herf="#1">跳转</a>
HTML中的注释和特殊字符
注释: <!--内容--> 快捷键:cltrl + /
特殊字符 空格 小于号 < 大于号>
表格标签 用于显示 展示数据
<table> <!--用于定义表格的标签-->
<tr> <!--用于定义表格中的行-->
<td></td> <!--用于定义表格中的单元格 table data-->
</tr>
</table>
表头单元格标签 <th></th> table head HTML表格的表头部分 其文本内容会加粗居中显示
表格属性 实际开发时使用CSS来实现 table属性
align | left center right | 对齐方式 |
border | 1或"" | 是否加边框 默认为"" |
cellpadding | 像素值 | 单元边缘与其内容之建的空白 默认1像素 |
cellspacing | 像素值 | 单元格之间的空白 默认为2像素 |
width/height | 像素值或百分比 | 表格宽度/高度 |
表格结构标签 <thead></thead>标签的头部区域 必须拥有<tr>标签
<tbody></tbody>标签标签的主体区域
合并单元格
合并单元格方式:跨行合并:最上侧单元格为目标单元格 写合并代码
跨列:最左侧单元格为目标单元格
记得删除多余单元格
列表标签:用来布局,更加整齐 类型:无序列表 有序列表 自定义列表
无序列表 <ul>标签表示HTML页面中项目的无序列表 列表项用<li>标签定义
<!--无序列表-->
<ul>
<li></li> <!--无顺序之分,时并列的 <ul>中只能放<li>标签 <li>标签可以容纳所有元素,相当于容器-->
<li></li>
</ul>
<!--有序列表-->
<ol>
<li></li>
<li></li>
</ol>
<!--自定义列表 <dl>中只能包含<dt><dd> 个数无限制 常一个<dt>对应多个<dd> <dt><dd>里面可以放任何标签-->
<dl>
<dt></dt> <!--定义项目/名字-->
<dd></dd> <!--描述项目/名字-->
<dd></dd>
</dl>
表单标签 目的:收集用户信息 组成:表单域 表单控件(表单元素) 提示信息
表单域 包含表单元素的区域 <form> 会把它范围内的表单元素信息提交给服务器
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
method | get/post | 表单数据提交方式 |
name | 名称 | 指定表单名称,以区分同一个页面中多个表单域 |
表单元素 <input type="属性值"/> 用于收集用户信息 单标签
type属性表
button | 定义可点击按钮(大多数情况通过js脚本启动) |
checkbox | 定义复选框 |
file | 定义输入字段和浏览按钮,供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段,该字段中的字符被掩码 |
radio | 定义单选按钮 |
reset | 定义重置按钮,重置按钮会清楚表单中所有数据 |
submit | 定义提交按钮,提交按钮会把表单数据发送到服务器 |
text | 定义单行的输入字段,用户可以在其中输入文本,默认宽度为20个字符 |
除type外还有以下属性
name | 自定义 | input元素的名称 |
value | 自定义 | input元素的值 打开页面就默认显示内容 |
checked | checked |
规定此input元素首次加载时应当被选项(checked radio) |
maxlength | 正整数 | 规定输入字段最大长度 |
注:checked radio 单选按钮必须有相同的name
value: 打开页面就默认显示(text password) 当用户选择时返回的值(checkbox 和radio )
<label> 标注标签 用于绑定一个表单元素 当点击<label> 标签内文本时 就会跳转到相应的表单元素上
<!--label语法-->
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/> <!--for 和id属性值相同-->
<select>下拉表单元素 应用场景:多个选项,需要节省页面空间
<select>
<option></option><!-- <select>中至少包含一个<option>-->
</select> <!-- <option>中定义selected="selected" 默认选定状态-->
textarea 文本域元素 应用场景:用户输入内容较多的情况下
<textare rows="3" cols="20"> <!-- cols:每行中的字符数 rows:显示的行数 实际通过CSS改变-->
</textare>
学会查阅文档
记:看b站pink老师视频后所作笔记
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战