简介
HTML（英文Hyper Text Markup
Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。
骨架结构
<HTML>
<head>
<title></title>
</head>
<body>
</body>
</HTML>
1.html结构：包括head body
2.html标签是以尖括号包围的关键字
3.html标签通常是成对出现的，有开始就有结束，包含成对标签、独立标签
4.html通常都有属性，格式:属性名＝“属性值”(多个属性之间空格隔开)
5.html标签不区分大小写,建议小写
<!DOCTYPE><!--html标记-->
<html> <!--html总标记-->
<head><!--头信息标签-->
<meta charset="utf-8"><!--utf-8编码-->
<title>html小白入门</title><!--页面标题-->
<head>
<body><!--网页显示标签，body标签内的信息都会在页面中显示-->
<h1>这是文本标题，下面是一张图片</h1><!--文本标题标签-->
<imgsrc="tupian.jpg"><br><!--图片标签，br是换行标签-->
<input type="text" value="这是输入框，请输入内容！"><br><!--输入框标签-->
<button type="submit" >按钮</button><!--按钮标签-->
</body>
</html>
meta标签是用来描述文档的元数据，所谓的元数据就是描述数据的数据。meta就是用来描述html文件的。它被放置在head,/head之中，meta标签不需要设置结束标签，一个尖括号就是一个meta标签的内容。所呈现的数据不会在页面中显示，仅仅只能说明页面的信息，包括关键字、作者、版权等等。它作用于浏览器、搜索引擎以及其他的网络服务。
meta标签主要的属性有四种，分别是name、http-equiv、content和charset。
HTML基本标签
1.HTML标签：
作用所有HTML中标签的一个根节点。
2.head标签：
用于存放：
title,meta,base,style,script,link
注意：在head标签中我们必须要设置的标签是title
3…title标签：
作用：让页面拥有一个属于自己的标题。
4.body标签：
作用：页面在的主体部分，用于存放所有的HTML标签：
p,h,a,b,u,i,s,em,del,ins,strong,img
5.span标签:
元素是内联元素，可用作文本的容器。 元素也没有特定的含义。当与 CSS 一同使用时，
元素可用于为部分文本设置样式属性。
6.< p >:
<p>标签用来定义网页中的段落
p是paragraph的缩写，意为段落
7.input 控件(重点)
属性解释：
type=”text”：定义单行文本输入框；
name属性：定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性：定义文本框的宽度，单位是单个字符宽度；
value属性：定义文本框的初始值。
文本框：
在表单中，文本框用来让用户输入字母、数字等等，如用户的姓名，地址等。
代码格式如下：
<input type=“text” name="…" size="…" maxlength="…" value="…"/>
密码框：
是一种特殊的文本域，用于输入密码。
代码格式如下：
<input type=“password” name="…" size="…" maxlength="…" value="…"/>
隐藏域：
是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
代码格式如下：
<input type=“hidden” name="…" value="…"/>
单选按钮：
当需要用户从有限个选项中选择一个时，使用单选按钮。比如我们在注册的时候选择体重。
代码格式如下：
<input type=“radio” name="…" value="…"/>
复选框：
允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个独一的名称。
代码格式如下：
<input type=“checkbox” name="…" value="…"/>
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<form>
sex:
<input type="radio" name="sex" value="boy"/>boy
<input type="radio" name="sex" value="girl"checked/>girl
<br/>
favourate fruits:<br/>
<input type="checkbox" name="fruit" value="apple"/>apple
<input type="checkbox" name="fruit" value="grape"/>grape
<input type="checkbox" name="fruit" value="orange"/>orange
<input type="checkbox" name="fruit" value="pineapple"/>pineapple
<br/>
<input type="submit" value="submit"/>
<input type="submit" value="quit"/><br/>
name:<input type="text"/> <br/>
password:<input type="password"/> <br/>
<input type="reset" value="reset"/>
</form>
</body>
</html>
8.file 文件上传
代码格式如下：
<input type=“file’ name=”…"
9.form标签（表单域）
在HTML中，form标签被用于定义表单域，即创建一个表\单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
\<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 \</form>
10.下拉菜单
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<fieldset>
<legend>students' file</legend>
<label for="userName">name:</label>
<input type="text" name="userName" id="userName" placeholder="please input username"> <br>
<label for="userPhone">phone number</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
<label for="email">email address:</label>
<input type="email" required name="email" id="email"><br>
<label for="collage">Affiliated college:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
<datalist id="cList">
<option value="school of computing"></option>
<option value="school of java"></option>
<option value="school of c++"></option>
</datalist><br>
<label for="score">entrance test score:</label>
<input type="number" max="100" min="0" value="0" id="score"><br>
<label for="level">foundation level:</label>
<meter id="level" max="100" min="0" low="59" high="90"></meter><br>
<label for="inTime">enrollment date:</label>
<input type="date" id="inTime" name="inTime"><br>
<label for="leaveTime">graduation date:</label>
<input type="date" id="leaveTime" name="leaveTime"><br>
<input type="submit">
</fieldset>
906
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
