HTML基础系列
2023-09-11 14:16:53 时间
HTML标记语言,网页制作的第一步。
什么是HTML呢?查百度
基础语法
常用标签
HTML是超文本标记语言,HTML不用编译,直接在浏览器中执行,HTML是一个文本文件。
HTML基本结构,标签,元素,属性,注解
<html>
<head>
<title>标题</title>
</head>
<body>
</body>
</html>
标签属性格式:
<标签名 属性名=“属性值”></标签名>
文档类型声明:
<!DOCTYPE> 声明必须放在html文档第一行,不是html标签
编码文件
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
标题标签,段落标签,预格式化标签,水平线
<h1></h1> <p> <pre></pre> <hr/>
<i></i>
<b></b>
<ins>
<del>
<sub>
<sup>
无序列表:
<ul>
<li></li>
</ul>
disc 圆点
square 正方形
circle 空心圆
有序列表:
<ol>
<li></li>
</ol>
<dl>
<dt>
<dd>
</dl>
结构,表现,行为
图片标签
<img src="" alt=""/>
相对路径,绝对路径
超链接标签:
<a href=""> 内容 </a>
href target title name
_self _blank _top _parent
定义锚:
<a href="#锚名"></a>
<a name="锚名" ></a>
邮件链接:
<a href="mailto:邮件地址"></a>
下载:
<a href="xxx.rar"></a>
表格的基本结构,操作表格,属性,跨行,嵌套
<table>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
添加标题
<caption></caption>
加载过长,内容过多
表格分:表头,主体,脚注
thead tbody tfoot
<table>
<caption><caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
表格属性
width表格宽度,align对齐方式,border表格边框的宽度,Bgcolor表格背景颜色,cellpadding内容之间的空白,cellspacing单元格之间的空白,frame和rules。
跨列属性: colspan
跨行属性: rowspan
表格嵌套:
<table>
<tr>
<td></td>
<td>
<table>
<tr>
<td></td>
<td></td>
<tr>
</table>
</td>
</tr>
</table>
表单结构,表单常用元素,表单交互属性
语法:文本域,单选框,复选框,按钮,列表
<form>
...
</form>
input
select
option
textarea
optgroup
<input type="" name=""/>
text password file checkbox radio button submit reset hidden image
name maxlength size value placeholder
<input type="image" name="" src="imageurl" />
<input type="hidden" name="" value="" />
传输给服务器
下拉菜单和列表标签
<select>
<option value=""></option>
<option value=""></option>
</select>
name multiple可以多选 size显示条目
<option>标签属性
selected value
分组下拉菜单
<select name="">
<optgroup label="组1">
<option value=""></option>
</optgroup>
<optgroup label="组2">
<option value=""></option>
</optgroup>
</select>
多行文本域
<textarea name="" rows="" cols="">
</textarea>
name placeholder rows cols
<form action="" method="" name="" >
</form>
action method name target enctype
网页结构:
<body>
// 头部
<div></div>
// 主体
<div></div>
// 页脚
<div></div>
</body>
<div>
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
</div>
总结:
html表单,表单应用场景,表单工作原理
<input type="" name="" />
text password file checkbox radio button submit reset hidden image
<form>
<input type="text" name=""/>
</form>
name, maxlength, size, value, placeholder
<form>
<input type="password" name=""/>
</form>
<form>
<input type="file" name=""/>
</form>
<form>
<input type="radio" name="" value="" checked/>
</form>
<form>
<input type="checkbox" name="" value="" checked/>
</form>
<input type="button" name="" value=""/>
type="submit"
type="reset"
<input type="image" name="" src="imageurl"/>
<input type="hidden" name="" value=""/>
html表单
input select option optgroup textarea
<select>
<option value=""></option>
</select>
name multiple size
selected value
<textarea name="" rows="" cols="" >
</textarea>
name placeholder rows cols
<form action="" method="" name="">
</form>
action method name targer enctype
url get,post form_name _blank,_self,_parent,_top
text/plain
multipart/form-data
<!DOCTYPE html>
<html>
<head>
<!-- 网页头部内容 -->
<title>标题</title>
</head>
<body>
<!-- 网页主体内容 -->
</body>
</html>
结言
好了,欢迎在留言区留言,与大家分享你的经验和心得。
感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。
作者简介
达叔,理工男,简书作者&全栈工程师,感性理性兼备的写作者,个人独立开发者,我相信你也可以!阅读他的文章,会上瘾!,帮你成为更好的自己。长按下方二维码可关注,欢迎分享,置顶尤佳。
感谢!承蒙关照!您真诚的赞赏是我前进的最大动力!
这是一个有质量,有态度的公众号
喜欢本文的朋友们
欢迎长按下图关注订阅号
收看更多精彩内容
相关文章
- 手把手教你在新浪云上免费部署自己的网站---基础
- .NET Core EFCore零基础快速入门简单使用
- 前端基础-html
- Java实现 蓝桥杯VIP 基础练习 回形取数
- Java实现 蓝桥杯 基础练习 01字串
- 大数据培训不可能速成,基础很重要
- 大数据基础之Impala(2)实现细节
- Machine Learning on Spark——第三节 统计基础(一)
- k8s kubesphere安装在k8s中的基础环境准备(前提条件)
- 两个html中div的复用 如何在HTML不同的页面中,共用头部与尾部?iframe标签
- BigData:大数据开发的简介、核心知识(linux基础+Java/Python编程语言+Hadoop{HDFS、HBase、Hive}+Docker)、经典场景应用之详细攻略
- 〖大前端 - 基础入门三大核心之 html 篇②〗- 前端开发工具和环境准备
- 〖大前端 - 基础入门三大核心之 html 篇⑨〗- 有序列表与定义列表
- 〖大前端 - 基础入门三大核心之 html 篇⑫〗- 音频和视频
- DOM基础及DOM操作HTML
- HTML和CSS基础
- HTML基础
- JavaScript基础&实战 JS中正则表达式的使用
- TensorFlowX.Y核心基础与AI模型设计02:AI模型编程常用(一)
- 大厂最爱考的前端面试题:计算机网络基础
- R中的一些基础1106
- python基础===列表类型的所有方法
- MySQL 之基础命令
- Html基础知识点整理
- 算法基础作图程序设计
- Ajax的基础使用
- HTML基础标签与相关案例