1. Html
概述：用于开发网页的html格式的文档
什么是html？
超文本标记语言：
超文本：包含文本和二进制内容（图文并茂形式）
标记语言：通过标签进行开发
主要用途：用于展示数据
书写规范:
一般包含起始标签和结束标签，通常包含属性，往往标签都是单词小写，例如
<html id='值'></html>
1.1 基本标签
<!DOCTYPE html>
<!-- ctrl+shift+/: 注释 -->
<!-- html:根标签：有且只有一个 里面包含了head与body子标签
head：头部标签，存放头部信息，例如标题，编码，搜索关键字等，加载css，js
body:放内容的标签，我们所写的标签代码都存放到此处
-->
<html>
<head>
<meta charset="UTF-8">
<title>第一个完美网页</title>
</head>
<!-- red green blue yellow: 颜色关键字
三原色： rgb就是红绿蓝，时间万物的颜色都是由三种颜色组成
#f00： 三原色 #rgb 纯红色---最高为f 纯绿色：#0f0
#ff0000： 三原色 纯红色---最高为ff 纯蓝色：#0000ff
-->
<!--text="#f00" bgcolor="#0f0" background="../img/d.jpg"-->
<body>
hello，html！！ello，html！！<br /> <!-- br换行 -->
继续上内容<br />
<!-- 段落p标签：加了段落会隔一行 align：对齐方式，默认为左对齐-->
<p align="left">绘好这幅“工笔画”</p>
<p align="center">高质量发展</p>
<p align="right">伟大成就鼓舞人心 </p>
<p>弘扬新风正气 共话网络文明</p>
专业开发<br />
<!-- hr: 水平线 width：宽度 align： 对齐方式
color： 颜色 size：高度 宽高的基本单位都是像素
-->
<hr width="600px" align="left" color="#00f" size="30px" />
<!-- 块标签： div，span
div: 容器 每个标签独占一行
span：标记标签 不换行
-->
<div>容器标签</div>你好
<span>标记标签</span>你好2
<!-- 字体标签 -->
<font size="50px" color="red" face="微软雅黑">字体标签</font>
<hr />
<!-- 文本格式化标签:b，strong，i,em,small,big,sub,sup,del -->
<b>加粗</b>
<strong>强调的加粗</strong>
<i>斜体</i>
<em>强调的斜体</em>
<small>小号字体</small>
<big>大号字体</big>
<sub>下标标签</sub>
<sup>上标标签</sup>
<del>删除标签</del>
<!-- 标题标签:h1~h6 独占一行-->
<h1>最大</h1>
<h2>较大</h2>
<h3>一般大</h3>
<h4>一般小</h4>
<h5>较小</h5>
<h6>最小</h6>
<!-- 列表标签: ul无序列表 ol有序列表 type类型-->
<ul type="square">
<li>芙蓉</li>
<li>凤姐</li>
<li>刘亦菲</li>
</ul>
<!-- start="3": 起始从第几个开始 -->
<ol type="a" start="3">
<li>郭德纲</li>
<li>赵本山</li>
<li>小沈阳</li>
</ol>
<!-- 列表嵌套 同一级：咖啡，茶，牛奶 ；茶里面包含红茶，绿茶 -->
<ul>
<li>咖啡</li>
<li>茶
<ol>
<li>红茶</li>
<li>绿茶</li>
</ol>
</li>
<li>牛奶</li>
</ul>
<!-- 图形标签：img 属性：src width，height，alt -->
<img src="../img/002.png" width="100px" height="120px" alt="未显示图片"
border="2px" vspace="10px" hspace="20px" />
</body>
</html>
1.2 超链接（重点）
<body>
<!--
超链接：设置了超链接后，蓝色+下划线效果，鼠标放入，会变成手型，可跳到另一个页面
a标签： href：接路径 可以跳转到外部路径，也可跳转到内部路径
-->
<!--外部跳转
target：跳转的目标位置,_self:在当前窗口跳 _blank：在新的窗口跳-->
<a href="http://www.baidu.com" target="_blank">跳转到百度</a>
<a href="#">跳转的测试#</a>
<a href="01_基本标签.html">跳转到内部</a>
<hr />
<!-- 还可以做一个图片链接 -->
<a href="http://www.baidu.com"><img src="../img/c.jpg" /></a><br />
<!-- 锚链接的使用： #锚点名： -->
<a href="#maodian">跳转到锚点位置</a><br />
<img src="../img/d.jpg" /><br />
<img src="../img/d.jpg" /><br />
<img src="../img/d.jpg" /><br />
<img src="../img/d.jpg" /><br />
<img src="../img/d.jpg" /><br />
<img src="../img/d.jpg" /><br />
<img src="../img/d.jpg" /><br />
<img src="../img/d.jpg" /><br />
<img src="../img/d.jpg" /><br />
<img src="../img/d.jpg" /><br />
<img src="../img/d.jpg" /><br />
<!-- 设置锚点位置：name属性 -->
<a name="maodian"><img src="../img/c.jpg" /></a><br />
<img src="../img/d.jpg" /><br />
<img src="../img/d.jpg" /><br />
<!-- 行级标签与块级标签：
行级标签：不带换行的标签，例如：span,font,b,strong.img,a等
块级标签：带换行的标签， 例如:div,ol,ul,h1~h6等
-->
</body>
1.3 表格标签（重点）
<body>
<!-- 表格标签：table
属性：
border: 边框
cellspacing：单元格间距：单元格与单元格间的间距
cellpadding： 单元格内边距：单元格与内容的间距
子标签： tr：行 th：列的头部（第一行的列）； td：列
跨行与跨列属性:rowspan,colspan
-->
<table border="2px" cellspacing="0" cellpadding="15px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th colspan="2">性别与操作</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
<td rowspan="2"><a href="#">删除</a></td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
</table>
</body>
1.4 表单标签（重点）
<body>
<!-- 表单标签：form标签： 包含了很多子控件
场景：可以做注册，登录等页面
包含了属性(先了解，后面会重点介绍)：action，method，enctype
子标签： input,select,textarea
基本上都是input标签：
属性type：text,radio,checkbox,password,email,number等
-->
<form>
文本标签：<input type="text" /><br />
单选标签：<input type="radio" /><br />
复选标签：<input type="checkbox" /><br />
密文标签：<input type="password" /><br />
邮箱标签：<input type="email" /><br />
数字标签：<input type="number" /><br />
取色标签： <input type="color" /><br />
日期标签：<input type="date" /><br />
日期时间：<input type="datetime" /><br />
上传控件:<input type="file" /><br />
隐藏控件:<input type="hidden" /><br />
范围控件:<input type="range" /><br />
<!-- 后续的表单提交，依靠submit与后台交互 -->
<input type="submit" value="提交按钮"/><br />
<input type="button" value="普通按钮"/><br />
<input type="reset" value="重置按钮"/><br />
<input type="image" src="../img/005.png" /><br />
下拉列表：
<select>
<option>湖南</option>
<option>湖北</option>
<option>广东</option>
<option>广西</option>
</select><br />
文本域：
<textarea rows="10" cols="30">
文本域信息介绍...
</textarea>
</form>
</body>
Java程序猿必学第三十篇——HTML
猜你喜欢
转载自blog.csdn.net/m0_62718093/article/details/121477568
今日推荐
周排行