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

前端之HTML

时间:2018-05-07 22:57:41      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:隐藏   gif   sub   输入   完整   hidden   工作原理   重置   密码   

HTML

HTML定义:超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言,是用来描述网页的,网页文件的扩展名:.html或.htm

HTML的结构

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>

 

1.<!DOCTYPE html> 出现在HTML文档的第一行,作用:指示web浏览器关于页面使用哪个HTML版本进行编码的指令

2.<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。

3.<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示,包含了文档的元(meta)数据。

4.<title>、</title>定义了网页标题,在浏览器标题栏显示。

5.<body>、</body>之间的文本是可见的网页主体内容。

 

注意:对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">

HTML的标签

1.标签的格式

1.双标签:<html></html> <p></p> <div></div>等

2.单标签:<br/> <hr/> <img/>等

2.标签的语法:

1.<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

2.<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

3.常用标签:

1.<head></head>内的嵌套标签:

<title></title>:用来显示网页标题

<style></style>:定义内部样式表

<script></script>:定义js代码或导入外部js文件

<link/>:引入外部样式表

<metal/>:定义网页原信息

2.<body></body>内用的标签:

1.排版标签:

<p></p>:段落标签

<hr/>:水平线标签

<br/>:换行标签

2.字体标签:

<hn></hn>:n取值为1-6,字体标签

<b></b> <strong></strong>:加粗标签

<i></i>:斜体标签

<u></u>:下划线标签

3.图片标签:

<img/>:图片标签

  1. 属性: src:图片路径,alt:图片未加载成功时的提示,title:鼠标悬浮时提示信息, width:50px,height:50%

4.超链接标签:

<a></a> :超链接标签

技术分享图片
<a href="http://www.baidu.com" target="_blank" >点我</a>
View Code

属性: href :"http://www.jd.com" 或者 "index.htm"

target= _black 在空白界面打开 ,_self 在当前标签页中打开目标网页

5.列表标签:

<ul>:无序

<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul>

type:disc(实心圆点),circle(空心圆圈),square(实心方块),none(无样式)

<ol>:有序

<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol>

type:1 数字列表,默认值,A 大写字母,a 小写字母,Ⅰ大写罗马,ⅰ小写罗马

6.表格标签:

<table border=’’ width=’’ align=’’ ></table>

子标签:<tr></tr> 行,<td></td> 列, rowspan(行合并) colspan(列合并)

border(表格边框):2

<table borer="2"> 

<tr>
  <td>1</td>
  <td>2</td>
</tr>

</table>

7.表单标签:

<form></form>:表单用于向服务器传输数据,从而实现用户与Web服务器的交互

表单基本概念:

        1. HTML表单是HTML元素中较为复杂的部分,表单往往和脚本、动态页面、数据处理 等功能相结合,因此它是制作动态网站很重要的内容。
        2. 表单一般用来收集用户的输入信息
        3. 表单工作原理:访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交。这些信息通过Internet传送到服务器上,服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误。当数据完整无误后,服务器反馈一个输入完成的信息。

form常用属性:

action:规定向何处提交表单的地址(URL)(提交页面)。

method:规定在提交表单时所用的 HTTP 方法(默认:GET)。

name:规定识别表单的名称(对于 DOM 使用:document.forms.name)。

form子标签:

input

常用的属性:

1.text:单行输入文本<input type=text" />

2.password:密码输入框<input type="password"  />

3.radio:单选框<input type="radio"  />

4.checkbox:复选框<input type="checkbox" checked="checked"  />

5.file:文本选择框<input type="file"  />

6.submit:提交按钮<input type="submit" value="提交" />

7.reset:重置按钮<input type="reset" value="重置"  />

8.button:普通按钮<input type="button" value="普通按钮"  />

9.hidden:隐藏按钮<input type="hidden"  />

10.date:日期输入框<input type="date" />

 

value:表单提交时对应项的值

1.type="button", "reset", "submit"时,为按钮上显示的文本年内容

2.type="text","password","hidden"时,为输入框的初始值

3.type="checkbox", "radio", "file",为输入相关联的值

  1. 提交到服务器的时候是 key = value,对于文本框 密码框 文本域 手写的传递过去了,对于单选和多选框来说 并不能把值传递过去,要想把值传递过去必须设置value值
  2. 若下拉选要想把指定内容的值传递过去,请加上value属性,默认值:文本框 密码框 添加value

name

可以将几个单选框或者多选框设置未一组,要想将信息保存到服务器上必须有name属性。

checked

radio和checkbox默认被选中的项

 

select

<form action="" method="post">

<select name=’’></select>

<optgroup label="上海">

<option value=’0’ >展示内容</option>

<option selected="selected" value="1">上海</option>

</optgroup>

</form>

multiple:布尔属性,设置后为多选,否则默认单选

selected:默认选中该项

 

label

<label> 标签为 input 元素定义标注(标记)

作用:

label 元素不会向用户呈现任何特殊效果。

<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<form action=""> <label for="username">用户名</label> <input type="text" id="username" name="username"> </form>

 

textarea

<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea>

 

前端之HTML

标签:隐藏   gif   sub   输入   完整   hidden   工作原理   重置   密码   

原文地址:https://www.cnblogs.com/liuguanguan/p/9005126.html

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