HTML入门(一)

   日期:2020-08-05     浏览:144    评论:0    
核心提示:HTML概述html------Hyper Text Markup Language,即超文本标记语言。1、主体框架 我们对Markdown编辑器进行了一些功能拓展与语_.

HTML概述

html------Hyper Text Markup Language,即超文本标记语言。

1、主体框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

(1)、"utf-8"为国际通用字符编码,将charset设置为这样是为了防止中文字符显示为乱码
(2)、title标签中为一个网页的标题
(3)、body中的内容为整个HTML网页的内容,网页中显示的所有内容都必须写在其中,否则就会报错或者无法显示。

2、HTML元素

HTML中的标签分为内联元素、块级元素以及内联块级元素

2-1、基本元素

1、常见的内联元素有:
a、span、br、i、em、b、strong、label
2、常见的块级元素有:
div、p、h1~h6、ol、ul、dl、table、from
3、常见的内联块状元素有:
img、input
4、注释

<!-- 这里是注释掉的内容 -->

5、元素详解

<!-- 下边是一些元素的使用及详解 -->
		<h1>标题标签</h1>   <!-- h1~h6为由大到小的标题标签 -->
		<p>段落标签</p>    <!-- 用以文章区分段落,是段落标记 -->
		<Strong>加粗标签</Strong> <!-- 此标签中的内容是加粗的,跟此标签效果相同的为“b”标签 -->
		<em>斜体</em>      <!-- 此标签的内容是倾斜的,与之效果相同的为“i”标签 -->
		<div>块标签</div>    <!-- 用来放置一些区域化的内容 -->
		<u>下划线标签</u>    <!-- 用来给文字加上下划线 -->
		<s>删除线标签</s>     <!-- 给内容加上删除线 -->
		<hr />    <!-- 单标签,不需要结束标签,表示创建一条水平线 -->
		

6、图片标签

<!-- 图片标签,用来放置图片 -->
<img src="imagePath">  

(1)、src中放置图片路径,一般都用相对路径
(2)、在放置的图片与HTML文件同级时直接写图片文件名;在不同级的情况下,需要跳几级,就在文件名前加上几个 . . /

7、表格元素

<table> <!-- 表格标签,定义HTML的表格,表格的内容需放在此标签中 --> 
	<tr><!-- 定义表格的行 -->
		<th>Header</th><!-- 定义表格的表头,表头默认加粗居中 -->
		<td>Data</td><!-- 定义表格的单元格,即表格的列 -->
	</tr>
</table>

8、a链接标签

<a href="" target="" title=""></a>    <!-- a链接标签,href中写此链接跳转的地址 -->

(1)、target属性指定了目标资源的显示位置,即跳转地址的显示位置,
(2)、target的值默认为_self(在同一窗口打开),其他值为_blank(在新窗口中打开)
(3)、title属性表示调用一个提示窗口,“”中的内容就是弹出的窗口的内容
(4)、href中的值为#this表示跳转到一个name为this的位置

2-2、表单元素

表单元素中使用的是input标签,此标签为单标签,只用一个就行,不需要写结束标签
form表示表单,所有的表单元素及input都必须卸载form标签之中

<form action="" method="">
	
</form>

1、文本框和密码框

<!-- 文本框 -->
<input type="text" name="" id="" value="" />
<!-- 密码框 -->
<input type="password" name="" id="" value="" />

(1)、type中为text表示为文本框,可在其中输入文本;
(2)、type中为password表示为密码框,输入其中的内容会自动保护,通常显示为*
2、单选框

<!-- 单选框 -->
	<input type="radio" name="sex" id="" value="" />
	<input type="radio" name="sex" id="" value="" />

(1)、type中为radio表示为单选框,可在几者之间选取一个;
(2)、要完成一个单选框需要二及以上个input标签,才能做选择,需要注意的是,单选框的所有input的name必须要相同,否则不能进行。
3、多选框

<!-- 多选框 -->
	<input type="checkbox" name="sport1" id="" value="" />
	<input type="checkbox" name="sport2" id="" value="" />
	<input type="checkbox" name="sport3" id="" value="" />
	<input type="checkbox" name="sport4" id="" value="" />

(1)、type中为checkbox表示为单选框,可在几者之间选取多个;
(2)、多选框的name不固定,可以相同,也可以不同
4、下拉列表

<!-- 下拉列表 -->
	<select>
		<option id="1">1</option>
		<option id="2">2</option>
		<option id="3">3</option>
		<option id="4">4</option>
		<option id="5">5</option>
	</select>

(1)、下拉列表需要包裹在select标签之中,列表中的每一项使用option标签
5、文本域
当要输入的文字过多,text文本框放不下时,就可以用文本域

<!-- 文本域 -->
	<textarea rows="" cols="">
		
	</textarea>

(1)、文本域使用textarea标签,rows设置文本域的长(高),cols设置了文本域的宽。
6、按钮

<input type="button" name="" id="" value="按钮" />
	<input type="submit" name="" id="" value="提交" />
	<input type="reset" name="" id="" value="重置" /><!-- 可将输入框的改动复原 -->
	<input type="image" src="" /><!-- 图像提交 -->

(1)、所有的按钮都可以使用button来显示,提交和重置是特殊的按钮;
(2)、type为image为图像提交,src中放置图像地址
7、button按钮标签

<button>按钮</button> <!-- 文字内容 -->
<button><img src=" "/></button> <!-- 图片内容 -->

(1)、button标签有更丰富的功能,标签的内容可以是文字,也可以是图像

2-3、列表元素

有序列表

<!-- 有序列表 -->
	<ol type="1">
		<li>A</li>
		<li>B</li>
		<li>C</li>
	</ol>

(1)、ol标签表示有序列表,type可以改变序号的样式,但type的值只有1、A、a、大写罗马数、小写罗马数;
(2)、li标签为列表项,有序和无序列表通用。

无序列表

<!-- 无序列表 -->
	<ul type="square">
		<li>A</li>
		<li>B</li>
		<li>C</li>
	</ul>

(1)、ul标签表示有序列表,type可以改变序号的样式,但type的值只有disc、square、circle
(2)、type的默认值是实心圆disc,其他样式square为实心正方形,circle为空心圆。

自定义列表

<!-- 自定义列表 -->
	<dl>
		<dt></dt><!-- 用于生成自定义列表中的各列表项的标题 -->
		<dd></dd><!-- 用于生成自定义列表的各列表项的说明文字段 -->
	</dl>

(1)、dd标签默认有一个外边距,类似于向里缩进了;

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服