HTML简介
HTML：Hyper Text Markup Language，超文本 标记 语言
常用标签
字体标签
字体标签：<font face="隶书" size="6" color="red"></font>
作用：规定文本的字体，字体尺寸、字体颜色
举个🌰
<font face="隶书" size="6" color="red">这是第一个页面，哈哈哈</font>
字体是隶书，大小是6（可以是1-7，最大是7，超过7一律按7显示），颜色是红色
⚠️ ：在HTML 4中，不赞成使用该标签，HTML 5中，不支持该标签
段落标签和注解
段落标签<p></p>
作用：定义一个标签
举个🌰
<p>我是第一段第一行
<br>我是第一段第二行
</p>
<p>我是第二段</p>显示如下，<p>是换段，我们可以看到段与段之间还有一个空行，<br>是换行，只有开头没有结尾，我们可以看到另起了一行，但是中间没有空行，他们是同一段的不同行。
⚠️ 段落内依据所在容器的宽度自动换行；浏览器会自动的在段落的前后添加空行
HTML是不严格的语法检查，允许只有开头没有结尾，若遇到同类型的开始也会认为这一标签结束了。
注释标签： <!--.........-->
转义字符
 --不断行的空格
&ensp--半方大的空格
&emsp--全方大的空格
&1t;--小于<
>--大于>
&--&符号
&quou;--双引号
©--版权符号©
®--已注册商标®
⚠️ ：
- 转义字符各字符之间不出现空格
- 转义字符必须以“；”（分号）结束
- 单独的“&”不被认为是转移字符的开始。
- 转义字符区分大小写
标题标签
标题标签：h标签：<h?>.....</h?>
作用：定义标题头的六个不同文字大小，以此显示重要性的递减，也就是权重依次降低。
⚠️ ：
- 尽量靠近在html中的<body>标签，越近越好，以便让搜做引擎最快的领略主题。
- h系列的标签在默认情况下都是独占一行（即块），会将后面的内容换行显示
img标签
img标签：<img src = "***" />
作用：在浏览器显示图片
常用属性：src（图片路径：【本地：相对路径，绝对路径】、【网页上的图片也行】）、alt：当图片不能正常现实的提示语，height、width
超级链接
a标签：<a>.....</a>，<a>和</a>之间的是超级链接的载体，即所单击的部分。
作用：使用超链接与网络上的另一个文档相连
tips：超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
- href：用来设置链接指向的页面的 URL。
- target：规定在何处打开链接文档。
- _blank：在新打开、未命名的窗口打开链接，只要点击，就会打开一个新窗口，点击多少次，就打开多少个新窗口
- _new：无论点击多少次，它都只是在第一次打开的新窗口页面进行刷新
- _parent：在父窗口打开链接
- _self：在当前窗口打开
- _top：目标将会清除所有被包含的frame框架
- title：规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。
- name：规定锚的名称。
🌰
<html>
<head>
<title>first.html</title>
</head>
<body>
<body>
<font size=6>
<!--打开本地的一个文档-->
<p><a href="welcome.html">打开新页面</a></p>
<!--打开网页，需要以http://开头-->
<p><a href="http://www.imooc.com">慕课网</a></p>
<!--在新窗口打开一个图片-->
<p><a href="image/幸运锦鲤.jpeg" target="_blank">打开一个图片</a></p>
<!--单击图片的时候会在新窗口打开网页-->
<p><a href="http://www.imooc.com" target="_blank">
<img src="image/logo.png"></a>
</p>
</font>
</body></font>
</html>
锚点
锚点标签：<a name="ziti"> ... </a>，命名锚点使用<a>标签的name属性值；使用<a>标签的 href属性指定要链接到锚点的位置，可跳转到同一网页和不同网页内。
与a标签的区别，a标签打开的是一个新的独立的文档，锚点打开的是位置，是当前或某一个文档的位置。文件的内容要足够长，要大过浏览器，出现滚动条，这样锚点才会出现效果，否则锚点虽然有效，但是我们没法看到效果。
作用：同一个文档中创建指向该锚（位置）的链接。指向锚点也是用href属性，配合#使用
tips：
- 锚点必须先定义，再使用。
- 锚的效果，可以定位到锚定义的位置（即html首行就是锚的位置）
- 锚的显示效果会保证最后一页的完整性，即不会存在半页的情况，所以后面的定位，有可能对应的锚的位置不在首行。
例如：下面是只想本html的锚。也可以指向其他文件的锚，文件路径/文件名#锚点名
<html>
<head>
<title>first.html</title>
</head>
<body>
<body>
<font size=3>
<a href="welcome.html">打开welcome.html</a>
<!--锚点的使用-->
<p><a href="#num-1">锚点1</a></p>
<p><a href="#num-2">锚点2</a></p>
<p><a href="#num-3">锚点3</a></p>
<!--锚点的定义-->
<a name="num-1">
<p>一个人最好的生活状态，是该看书时看书，该玩时尽情玩，看见优秀的人欣赏，看到落魄的人也不轻视，有自己的小生活和小情趣，不用去想改变世界，努力去活出自己。没人爱时专注自己，有人爱时，有能力拥抱彼此。</p>
<p>只要学不死，就往死里学。当你牛逼到一定程度时，你就有了话语权。累了看看父母，倦了想想未来。</p>
<img src="image/logo.png"></img>
<p>遇到困难的时候，当你鼓起勇气，不再哭泣，而是挑选站起来，转过身,迈出坚实的步伐，就会看到光芒万丈，花草艳丽。就会看到期望之火熊熊燃烧，延伸于整个脆弱的心灵。跨曩昔，那オ是真正的自我，你才能书写生命的光辉。</p>
</a>
<a name="num-2">
<p>对自己狠一点，逼自己努力，再过五年你将会感谢今天发狠的自己，恨透今天懒惰自卑的自己。我始终相信一句话：只有自己足够强大，才不会被别人践踏。</p>
<img src="image/幸运锦鲤.jpeg"></img>
</a>
</a>
<a name="num-3">
<p>num-3是不能太闲的，闲久了，努力一下就以为在拼命。别说你会尽力，努力，全力，用吃奶的力，这些都不是最大的力，要使出自己的洪荒之力，一个人如果不逼自己一把，永远不知道自己有多优秀 。</p>
<img src="image/斗罗大陆唐三.jpeg"></img>
</a>
</font>
</body></font>
</html><html>
<head>
<title></title>
</head>
<body>
<!--h系列的标签在默认情况下都是独占一行（即块），会将后面的内容换行显示-->
<h1>我的新页面</h1><a href="first.html">单击此处返回首页</a>
<!--指向其他文件的锚-->
<p><a href="first.html#num-3">welcome锚点3</a></p>
</body>
</html>列表
无序列表：<ul><li>.....</li></ul>
作用：此列项目使用粗体原点（典型的小黑圆圈）进行标记
有序列表：<ol><li>.....</li></ol>
作用：此列项目使用数字进行标记
tips：列表项内部可以使用段落、换行符、图片、链接以及其他列表等。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<!--此处填写代码-->
<ol>
<li>朝辞白帝彩云间，</li>
<li>千里江陵一日还。</li>
<li>两岸猿声啼不住，</li>
<li>轻舟已过万重山。</li>
</ol>
<ul>
<li>秦时明月汉时关，</li>
<li>万里长征人未还。</li>
<li>但使龙城飞将在，</li>
<li>不教胡马度阴山。</li>
</ul>
</body>
</html>表格
简单表格
表格：
- 标签
- table（表格的开始和结束）
- 定义范围，可以后续配合CCS更改样式
- caption（表格的标题）
- thead
- tbody
- tfoot
- tr（表格中的一行）
- th：单元格，表格的第一行，与其它行有区别（粗体居中）
- td：单元格
- 属性
- border：边框
- width：宽度
- colspan：列的合并，属性规定单元格可横跨的列数，colspan="3"就是合并三列。
- rowspan：行的合并，属性规定单元格可横跨的行数，比如rowspan="2"就是合并两行。
🌰
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!--border="1"代表有边框，完整写法是1px，px指分辨率的像素-->
<table border="1" width="300px">
<!--表哥的标题-->
<caption>用户信息表</caption>
<!--表格中的一行-->
<tr>
<!--单元格，表格的第一行，与其它行有区别（粗体居中）-->
<th>姓名</th><th>性别</th><th>邮箱</th>
<tr>
<!--单元格-->
<td>Lily</td><td>femail</td><td>1252361581@qq.com</td>
</tr>
<td>Jack</td><td>mail</td><td>1363361581@qq.com</td>
</tr>
</table>
</body>
</html>展示效果
合并 & 范围定义
注意以上面的为依据，以左面的为依据，及向上合并向左合并行的合并，选重要合并的第一行，列的合并要选中最左边一列。
tips：关于合并，刚开始先不考虑合并，写出简单的完整的表；之后在考虑合并，合并是在起始的行或列的单元格配合属性rowspan和colspan；最后由于合并要删掉一些单元格。
🌰
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table border="1" width=300>
<caption>商品库存表</caption>
<thead>
<tr>
<th>商品类别</th><th>商品名称</th><th>单位</th><th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<!--<td rowspan="2">表示当前的一个格子代表了两行（包括自己）-->
<td rowspan="2">家电类</td><td>冰箱</td><td>台</td><td>520</td>
</tr>
<tr>
<!--由于有了<td rowspan="2">家电类</td>所以下面的单元格得删掉，否则显示不对-->
<td>洗衣机</td><td>台</td><td>13</td>
</tr>
<tr>
<td>辅料</td><td>插线板</td><td>个</td><td>14</td>
</tr>
</tbody>
<tfoot>
<!--没有内容没有高度，撑不起单元格，此时可以人工给个高度或者填充内容-->
<!--<tr height="20">-->
<tr>
<td colspan="4">备注：</td>
</tr>
</tfoot>
</table>
</body>
</html>展示效果如下
没有内容没有高度，撑不起单元格，此时可以人工给个高度或者填充内容
由于有了<td rowspan="2">家电类</td>所以下面的单元格得删掉，否则显示不对
一些属性
下面的有些可能部分浏览器已经不支持了。
表单
什么是表单：表单不是一个具体的能被看到的部件，他是一个范围
作用：用于手机用户信息，进行人机交互操作
包含元素：文本框、单选按钮、列表框、图片框、复选框等这些元素，统称为“控件”
🌰
<!DOCTYPE html>
<html lang="en">
<head>
<title>表单</title>
</head>
<body>
<!--action和method属性通常是和后端搭配使用的-->
<form action="" method="">
<!--方便后续对这些文字显示统一处理-->
<p><label>请输入姓名：</label>
<!--name是给当前文本框起名，允许重复，通常配和后端-->
<!--id是唯一识别的名字不允许重复，通常配和前端-->
<input type="text" name="" id=""></p>
<p><label>请输入密码：</label>
<input type="password" name="" id=""></p>
<p><label>再次输入密码：</label>
<input type="password" name="" id=""></p>
<p><label>性别：</label>
<!--此处要填name，否则可以同时选中-->
<!--type="radio"的name一样则被认为是一组，一组里面只有一个能被选中-->
<!--input type="radio" name="xb" id="">男，这么写后台是拿不到男的，需要用value属性穿回后台-->
<!--往后台传递尽量传递数值，不传递字符，主要是字符传递有诸多限制-->
<input type="radio" name="xb" id="" value="1">男
<input type="radio" name="xb" id="" value="0">女</p>
<p><label>兴趣爱好：</label>
<input type="checkbox" name="" id="" value="swimming">游泳
<input type="checkbox" name="" id="" value="2">看书
<input type="checkbox" name="" id="" value="3">思考
<input type="checkbox" name="" id="" value="4">爬山</p>
<p><label>生日：</label>
<select>
<option value="1995">1995</option>
<!--默认被选中，需要添加：selected="selected"-->
<option value="1996" selected="selected">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>年
</select>
<select>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">3</option>
<option value="4">4</option>月
</select>
<select>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">3</option>
<option value="4">4</option>日
</select>
<p><label>头像：</label>
<img src="image/HeadLog/10.png">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
<p>
<!--这边的value是可以显示在屏幕上的--->
<input type="button" value="普通按钮">
<!--上面有action，单击提交会进入后台进行处理-->
<input type="submit" value="提交按钮">
</p>
<p>
<!--多行文本框，若文字内容过多会出现滚动条-->
<textarea rows="5" cols="30" name="" id="">请输入</textarea>
<!--上传文本框，单击该按钮会打开一个对话框选择文件-->
<input type="file">
<!--将选择的文件上传-->
<input type="submit" value="上传">
</p>
<p>
<!--隐藏文本框，如下只显示6个0-->
<!--主要是为了信息的传递，前端的信息不方便展示但是要让后台拿到可以使用隐藏域-->
000<input type="hidden" name="" id="">000
</p>
<p>
<!--普通列表框，后面添加size="4"，表示显示4行，超过4行则有滚动条-->
<!--下拉列表框一次只能选一个，普通列表框配合multiple="true"可以选多个-->
<select size="4" multiple="true">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
</form>
</body>
</html>显示效果
参考：慕课网-Java工程师
扫一扫
4164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
