码迷,mamicode.com
首页 > Web开发 > 详细

初识 “HTML”

时间:2020-01-16 00:41:13      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:注意   路径   table   word   select   图像   span   article   button   

HTML

什么是HTML?

①全称:超文本标记语言
②超文本:在普通的文本内容的基础上添加超链接、图片、视频等
③标记语言:HTML提供一系列标签
④版本:HTML 4.01

HTML声明

1.编码格式:HTML 5
2.HTML的模版
①HTML的声明 <!DOCTYPE html>
作用:告诉浏览器当前HTML页面的版本和类型
用法:必须在HTML页面的0行0列
注意:声明并不是必要的,声明让浏览器更好地解析HTML页面。
②根标签<html>
闭合标签:具有开始标签和结束标签
注意:一个HTML页面中只能具有一个根标签
③<head>标签
作用:定义当前HTML页面的信息
子标签
<title> 定义HTML页面的标题,方便被搜索引擎抓取。
<link> 引入外部的CSS文件
<style> 编写CSS样式代码
<script> 引入外部的JavaScript文件或编写JavaScript代码
<meta> <meta charset="UTF-8"> 设置编码格式
<meta name="keywords"> 设置关键字,方便被搜索引擎抓取。
④<body>标签
作用:显示在浏览器窗口中

HTML的标签

①闭合标签:具有开始和结束标签
②单标签:只有开始标签

HTML的属性

1.定义:被定义在开始标签
2.格式:属性名称="值"
3.分类:
①标准属性:几乎所有的标签都具有的属性
举例:id-标识,唯一
name-名称
class
style

②私有属性:只有某个具体的标签具有的属性
常见的标签:
标题 <h1>~<h6>
效果:从大到小
<h1>:方便地搜索引擎抓取,一个HTML页面最好只有一个<h1>
段落 <p></p>
换行 <br>
水平线 <hr>

列表

①有序列表
<ol>
<li></li>
</ol>
②无序列表
<ul>
<li><li>
</ul>
③定义列表
<dl>
<dt>项目名称</dt>
<dd>项目中的具体内容</dd>
</dl>

链接

<a href="地址"></a>

作用:实现页面之间的跳转
②锚点

<a href="#名称">回到顶部</a>

③发送邮件

<a>元素的属性列表

属性名 描述
href URL 规定链接的目标 URL。
target _blank/_parent/_self 规定在何处打开目标 URL。仅在 href 属性存在时使用。

路径

①相对路径:目标页面相对于当前页面的路径
②绝对路径:从根目录开始查找到目标页面的路径

图片

①<img src="图片的地址" >
②显示大小:width 设置图片显示的宽度
Height 设置图片显示的高度
③注意:设置显示的宽度和高度与原图片的比例保持一致
④img元素的属性列表:

属性名 描述
align topbottommiddleleftright HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。
alt text 规定图像的替代文本。
height pixels 规定图像的高度。
src URL 规定显示图像的 URL。
width pixels 规定图像的宽度。

HTML表格

①概念:具有行和列
②基本结构
<table> 表示表格
<tr> 表示行
<td> 表示单元格
③带表头的表格
表头单元格由<th>创建,元素中的文本通常呈现粗体并居中。
标准单元格由<td>创建,元素中的文本默认左侧对齐。
分类:
<thead> 表示表格的表头,显示在表格的最上面。
<tbody> 表示表格中的数据
<tfoot> 表示表格中的结尾,显示在表格的最下面。
④带标题的表格
<caption>定义标题:每个表格只能设置一个,默认居中显示。
⑤跨行或跨列
rowspan 跨行
colspan 跨列

HTML表单

①作用:提交页面中的数据内容
②<form>:表示表单
属性名 值 描述
action URL 规定当提交表单时向何处发送表单数据。
method get/post 规定用于发送表单数据的 HTTP 方法。
name text 规定表单的名称。

③表单的组件:<input>
④输入框
<input type="text">
<input type="password">

⑤按钮
<input type="button">
<input type="reset">
<input type="submit">
⑥单选或多选框
<input type="radio">
<input type="checkbox">
⑦隐藏域
<input type="hidden">
⑧文件域
<input type="file">
⑨<select>
下拉单选框
下拉多选框

HTML实体

概念:HTML实体指的就是HTML的转义字符

显示结果 描述 实体名称
空格 ?
< 小于号 <
> 大于号 >
& 和号 &
" 引号 "
? 版权(copyright) ?
? 注册商标 ?
? 商标 ?
× 乘号 ×
÷ 除号 ÷

初识 “HTML”

标签:注意   路径   table   word   select   图像   span   article   button   

原文地址:https://www.cnblogs.com/baimeishaoxia/p/12199306.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!