脚本宝典收集整理的这篇文章主要介绍了【前端之旅】HTML 大总结,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
一名软件工程专业学生的前端之旅,记录自己对三件套(HTML、CSS、JavaScript)、Node.js、Vue、小程序开发(uniapp)以及各种UI组件库、前端框架的学习。
【前端之旅】Web基础与开发工具 【前端之旅】HTML 大总结
HTML(HyPEr Text Markup Language) 超文本标记语言
之所以叫做超文本标记语言,一是因为它可以加入各类图片、音频、视频等多媒体,二是它可以实现从一个文本文件跳转到另一个文本文件,而且借助互联网,它可以与世界各个主机的文件链接。
<!-- 页面中最大的标签 根标签 -->
<html>
<!-- 头部标签 -->
<head>
<!-- 标题标签 -->
<title></title>
</head>
<!-- 文档的主体 -->
<body>
</body>
</html>
HTML标签是由尖括号包围的关键字,例如: <html>
文档类型声明<!DOCTYPE html>
会告诉浏览器按照HTML5标准解析页面。
<!DOCTYPE>
声明位于文档中的最前面的位置,处于 <html>
标签之前。<!DOCTYPE>
不是一个 HTML 标签,它就是文档类型声明标签<html lang="en">
中 lang 指定该html标签内容所用的语言
lang的作用
在<head>
标签内,可以通过<meta>
标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
<meta charset = "UTF-8" />
注释
ctrl + /
<!--
开始,以-->
结束<!-- 注释语句 -->
排版标签 : 主要和CSS 搭配使用,显示网页结构的标签,是网页布局最常用的标签。
标签属性(行内式):我们使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置。
<标签名 属性1@H_112_360@="属性值1" 属性2="属性值2" > 内容 </标签名>
<body>
<h1> 一级标题</h1>
<h2> 二级标题</h2>
<h3> 三级标题</h3>
<h4> 四级标题</h4>
<h5> 五级标题</h5>
<h6> 六级标题</h6>
</body>
<p>
这是一个段落。
</p>
<br/>
<hr/>
<br/>
是个单标签,作用是进行换行,不会产生垂直的间距。<hr/>
自动生成一条100%宽的水平线。<div></div>
:一行只能放一个大盒子<span></span>
: 一行可以放多个小盒子<div>这是一个div</div>
<span>这是一个span</span>
<body>
<img src="" alt="" title="" />
</body>
src是<img>
标签的必须属性,用来指定图像文件的路径与文件。
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本(当图片不能显示时候显示的文字) |
title | 文本 | 提示文本(鼠标放到图像上,显示的文字) |
在引入静态资源时(比如图片、音频等)需要通过文件路径进行引入,这里主要涉及到绝对路径与相对路径。
相对路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | 图形文件位于 HTML 文件同一级 如<img src="demo.png"> | |
下一级路径 | / | 图形文件位于 HTML 文件下一级 如 <img src="images/demo.png"> |
上一级路径 | …/ | 图形文件位于 HTML 文件上一级 如 <img src="../demo.png"> |
超链接标签:点击触发后可以跳转对应链接或者下载相应资源。
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 | 作用 |
---|---|
href | (此项必填)用于填写指定链接目标的url地址,注意:如果 href 里面地址是一个文件或者压缩包,会下载这个文件。 |
target | 用于填写指定连接页面的打开方式:_self 为默认值,_blank 为在新窗口中打开 |
锚点链接标签:点击链接,可以实现快速定位到页面中的某个位置。
href
属性中,设置属性值为 #名字<a href = "#demo">点击一下,进入自我介绍</a>
<h3 id = "demo">自我介绍</h3>
HTML 原代码 | 显示结果 | 描述 |
---|---|---|
&lt; | < | 小于号或显示标记 |
> | > | 大于号或显示标记 |
& | & | 可用于显示其它特殊字符 |
" | “ | 引号 |
® | ® | 已注册 |
© | © | 版权 |
™ | ™ | 商标 |
  | 半个空白位 | |
  | 一个空白位 | |
| 不断行的空白 |
重点记住:空格、大于号、小于号 这三个,其余的使用的很少,如果需要使用回头查阅即可
表格标签现在还是较为常用的一种标签,但不是用来布局,常见显示、展示表格式数据。因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要,一个清爽简约的表格能够把繁杂的数据表现得很有条理。
<table></table>
标签中<tr></tr>
标签中<body>
<table>
<tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
<tr> <td>孙铭</td> <td>男</td> <td>18</td> </tr>
<tr> <td>孙不坚</td> <td>男</td> <td>18</td> </tr>
<tr> <td>sunming</td> <td>男</td> <td>18</td> </tr>
</table>
</body>
代码效果:
表格标签的属性实际开发并不常用,后面样式基本都是通过CSS来设置的。
属性名 | 属性值 | 描述 |
---|---|---|
align | left center right | 规定表格相对周围元素的对齐方式。 |
border | 1或者’’ ‘’ | 规定表格单元是否拥有边框,默认为" ",表示没有边框,1则表示有。 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素。 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素。 |
width | 像素值或百分比 | 规定表格的宽度。 |
<table align=center border="1" cellpadding="20" cellspacing="0" width="500">
rowspan=“合并单元格的个数”
colspan="合并单元格的个数"
确定目标单元格(合并写代码)
<table align=center border="1" cellpadding="20" cellspacing="0" width="700">
<tr>
<th colspan="5">个人简历</th>
</tr>
<tr>
<th>姓名:</th>
<th></th>
<th>性别:</th>
<th></th>
<th rowspan="4">照片</th>
</tr>
<tr>
<th>婚姻状况:</th>
<th></th>
<th>出生年月:</th>
<th></th>
</tr>
<tr>
<th>民族:</th>
<th></th>
<th>政治面貌:</th>
<th></th>
</tr>
<tr>
<th>身高:</th>
<th></th>
<th>学历:</th>
<th></th>
</tr>
</table>
代码效果:
列表容器里面装载着结构,样式一致的文字或图表的一种形式叫列表。列表最大的特点就是整齐 、整洁、 有序,跟表格类似,但是它可组合自由度会更高。一般网站的底部链接部分就是用列表标签制作。
<ul>
<ol>
<dl>
标签名 | 定义 | 说明 |
---|---|---|
<ul></ul> | 无序列表 | 里面只能包含li,没有顺序,li里面可以包含任何标签。 |
<ol></ol> | 有序列表 | 里面只能包含li,有顺序。 |
<dl></dl> | 自定义列表 | 里面只能包含dt和dd,dt和dd里面可以放任何标签。 |
<ul>
<ul>hahaha</ul>
<ul>hahaha</ul>
</ul>
<ol>
<ul>xixixi</ul>
<ul>xixixi</ul>
</ol>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>联系我们</dd>
</dl>
代码效果:
一个完整的表单通常由表单域,表单控件(表单元素)和提示信息这3部分组成,表单目的是为了收集用户信息。
如图世纪佳缘网站中注册界面中就存在表单,该表单目的是为了收集用户信息。
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域 |
<form action="url地址" method="提交方式" name="表单域的名称">
</form>
GET 和 POST 的区别(后面学 ajax 后台交互的时候用得到)
表单元素三大组:input 输入表单元素、select 下拉表单元素、textarea 文本域表单元素
属性值 | 描述 |
---|---|
button | 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本) |
checkbox | 定义复选框 |
file | 定义输入字段和"浏览"按钮,供文件上传。 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段。该字段中的字符被掩码 |
radio | 定义单选按钮 |
reset | 定义重置按钮。重置按钮会清楚表单中的所有数据。 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。 |
<input>
标签还有很多其他很多属性,其常用属性如下:属性 | 属性值 | 描述 |
---|---|---|
name | 由用户自定义 | 定义 input 元素的名称 |
value | 由用户自定义 | 规定 input 元素的值 |
checked | checked | 规定此 input 元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中字符的最大长度 |
type
属性设置为 text 是文本框type
属性设置为 password 是密码框<body>
<form>
用户名:<input type="text"> <br/>
密码:<input type="password">
</form>
</body>
type
属性设置为 radio 是单选框type
属性设置为 checkbox 是复选框<form>
用户名:<input type="text"> <br>
密码:<input type="password"> <br>
<!-- radio是单选框,可以多选一 -->
性别:男<input type="radio"> 女 <input type="radio">
<!-- checkbox是多选框,可以多选 -->
爱好:吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打游戏<input type="checkbox">
</form>
<form>
用户名:<input type="text" value="请输入用户名"> <br>
密码:<input type="password"> <br>
<!-- radio是单选框,可以多选一 -->
<!-- name是表单元素的名字,这里的性别单选按钮必须有相同的名字name,才能实现多选一 -->
性别:男<input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女">
<!-- checkbox是多选框,可以多选 -->
爱好:吃饭<input type="checkbox" name="habby" value="吃饭"> 睡觉<input type="checkbox" name="habby" value="睡觉"> 打游戏<input type="checkbox" name="habby" value="打游戏">
</form>
性别:男<input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女">
type
属性设置为submit:提交按钮会把表单数据发送到服务器type
属性设置为button:是一个按钮type
属性设置为file:是一个文件域,可以上传文件<input type="button" value="获取短信验证码"> <br>
<!-- 文件域:上传文件使用的 -->
上传头像:<input type="file">
label标签的 for属性 应当与相关元素的id 属性相同
<label for="sex"> 男 </lable>
<input type="radio" name="sex" id="sex" />
<select>
中至少包含一对<option>
<option>
中定义 selected=“selected” 时,当前项即为默认选中项。<select>
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<textarea>
文本内容
</textarea>
以上是脚本宝典为你收集整理的【前端之旅】HTML 大总结全部内容,希望文章能够帮你解决【前端之旅】HTML 大总结所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。