肖sir_html之基本使用（1）

、新建项目

1、新建===web项目===输入项目名称====完成

二、新建html文件

在新建项目中新建html模板

输入文件名称：

三、认识基本格式

联想出基本格式：

四、编辑html文件

运行html，选择浏览器

五、html常用的快捷键

（1）ctrl+n+w web项目创建

（2）ctrl+n+h html文档创建

（3）ctrl+s 保存html页面（页面上如果未保存会显示*号）

（4）ctrl+r html运行
（5）ctrl+z 撤回
（6）！+tab键联想基本格式
（7）ctrl+/ 注释和取消注释

（8）ctrl+鼠标滚轮，字体方大和缩小

六、认识标签

（1）H标签（标题标签）

（2）p标签（段落标签）

（3）img 标签（图片标签）
两种：第一种widows上传图片，第二种：网上图片链接

第一种

img中显示图片

img中引入图片

第二种：网上图片的链接：

（4）标签（空格）

（5）em 标签表示斜体

（6）i 标签表示斜体

（7）br 表示换行

（8）b 标签表示加粗

（9） strong 标签表示加粗

（10）s 标签（删除线）

（11）u 标签（下划线）

（12）font 颜色

（13）sub下标
（14）sup上标

篇介绍了表单的使用，表单有很多控件，比如输入框，密码框、文本域，按钮等。按类型可分如下：

输入类控件
菜单类控件

输入类组件 —— input

此类控件有很多种类型，使用<input type="类型">语法，常见类型如下：

type 值	含义
text	文字字段
password	密码域，用户看不到明文，以*代替
radio	单选按钮
checkbox	多选按钮
button	普通按钮
submit	提交按钮
reset	重置按钮
image	图像域，用图像作为背景的提交按钮
hidden	隐藏域，不可见的输入框
file	文本域，用于上传文件等非文本数据

文本输入框和密码框

除了显示形式不一样，其它属性一样，有以下属性：

name —— 定义文字字段名称，用于和其它控件区别，不能包含特殊字符，也不可使用html 标签名称
maxlength —— 定义文本框可输入字符最大长度
size —— 定义文本框在页面中显示的长度
vaule —— 定义文本框中默认的值

如下是文本输入框和密码框制作一个登录表单

html代码：

<!DOCTYPE html>
<html>
<body>
<h1>用户登录</h1>
<form action="/demo/html/action_page.php">
  <label for="fname">用户名:</label><br>
  <input type="text" id="username" name="username" value=""><br>
  <label for="lname">密码:</label><br>
  <input type="password" id="pwsd" name="pwsd" value=""><br><br>
  <input type="submit" value="提交">
</form> 
</body>
</html>

显示效果：

HTML5 输入类型

除了以上几种类型，HTML5 还增加了多个新的输入类型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

如下代码：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
  数字类型（1 到 5 之间）：
  <input type="number" name="quantity" min="1" max="5">
  IE9 及早期版本不支持 type="number"。<br>
  color 选择颜色：
  <input type="color" name="color"><br>
   生日:
  <input type="date" name="bday"><br>
  年月：
  <input type="month" name="bdaymonth"><br>
  年周：
  <input type="week" name="week_year"><br>
  时间：
  <input type="time" name="usr_time"><br>
  一定范围
   <input type="range" name="points" min="0" max="10"><br>
   E-mail:
  <input type="email" name="email">
  能够在被提交时自动对电子邮件地址进行验证<br>
  搜索：
  <input type="search" name="googlesearch"><br>
  电话：
  <input type="tel" name="usrtel">
  目前只有 Safari 8 支持 tel 类型。<br>
  url：
  <input type="url" name="url">
  提交时能够自动验证 url 字段<br>
  <input type="submit">
</form>
</body>
</html>

效果如下：

单选和多选按钮

使用 type = “radio” 和 type =“checkbox” 定义是单选还是多选，除了name和value属性外，单选和多选都有一个 checked属性定义默认选择的项，checked = “true”指选中那个选项，表单会将 checked = “true” 的选型值传递给后台。

如下实例：

<!DOCTYPE html>
<html>
<body>
<h4>单选和多选</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 苹果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陕西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 广东
<br><br>
<input type="submit">
</form> 
</body>
</html>

显示效果：

单选和多选传递给后台的数据是不一样的，如下会看到地址栏中的数据，多选会发送多个值，后台将会获取一个数组形式的数据。

/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi

普通按钮、提交按钮、重置按钮

普通按钮：type = “button”，一般配合脚本使用，语法如下：

<input type="button" name="名称" value="按钮值" onclick="脚本程序" />

value 值就是按钮在页面显示的文字，onclick属性定义了脚本事件，这里指单击按钮时所进行的处理。

如下示例：

<!DOCTYPE html>
<html>
<body>
<form>
 <input type="button" value="普通按钮">
<input type="button" value="打开窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
  </form>
</body>
</html>

单击您好按钮

提交按钮：type = “submit”，用于提交表单内容，是一种特殊按钮。

如刚才的登录表单，提交后会返回结果：

重置按钮：type="reset"，用于清除表单数据，也是一种特殊按钮。

输入数据

点击重置按钮后，表单数据清空

重置清空数据

HTML5 按钮

除了使用input定义按钮，还可以使用 html5 新增的<button> 标签定义按钮，button 使用语法如下：

<form action="/demo/html/action_page.php">
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
</form>

其它输入类控件

隐藏域 —— hidden
文件域 —— file

如下示例：

<form action="/demo/html/action_page.php">
  <label for="fname">隐藏域:</label>
  <input type="hidden" id="hidden" name="hidden" value=""><br>
  <label for="lname">文件域:</label>
  <input type="file" id="file" name="file" value=""><br>
  <input type="submit" value="提交">
</form>

显示效果

可以看到，隐藏域在页面中不显示，单击文件域选择文件按钮可以选择文件，比如word文件，电子表格文件等，会以非文本方式传送到后台的，常用来实现文件上传功能。

文本域 —— textarea

除了input 类型的控件，还有文本域 textarea ，一种特殊的文本框，它与input 文本输入框的区别就是可以输入多行文字，input 文本输入框是单行的无法输入多行文字。

如下示例：

<p>textarea 元素定义多行输入字段。</p>
<form action="/demo/html/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

效果如下：

rows 属性定义文本域的高度是几行，cols 定义文本域宽度占几列，比如上面定义了高10行宽30列的文本域。

下拉菜单和多选列表

下拉菜单作用和单选按钮类似，只不过它更加节省空间，当要选择的选型很多时，就不适合使用radio空间，所以当选项很多的时候，使用下拉菜单，语法如下：

<select name="名称">
<option value="选项值1" selected>选项1</option>
<option value="选项值2">选项3</option>
更多option......
</select>

多选列表和多选按钮类似，一样为了节省空间，当数据选项比较多时，使用多选列表，语法如下：

<select name="名称" size="可看见的列表项数" multiple>
<option value="选项值1" selected>选项1</option>
<option value="选项值2">选项3</option>
更多option......
</select>

多选比下拉菜单不同之处是多了一个multiple属性，定义多选的，且表现形式也不一样，不是下拉而是一个列表。

如下代码：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜单：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多选列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>

显示效果：

这里需要注意的是，多选列表多选时需要按住ctrl键同时鼠标单击选择才能多选，效果如下：

到这里，已介绍了大部分的表单控件，现在你可以使用他们制作自己的表单，表单通常在动态网站中使用，这为以后制作动态网站打下基础。

还有许多属性没有讲到，比如html5新增的一些属性和功能，可自行参考 w3cshool 等网站学习，感谢关注，学习愉快！

上篇：前端入门——html 表单

下篇：前端入门 —— 网页中使用窗口框架

么是css的调用方式？

简单来讲，就是解决把css代码写在哪里的问题，这块内容之前在课堂上演示过，这里再用文字说明一下，权当复习。

大体有以下四种方式：

外联式样式表；
内嵌样式表；
元素内定；
导入样式表

1，外联式样式表

添加在HTML的头部信息标识符< head>里：

<head> 
        <link rel="stylesheet" href="style.css" type="text/css"> 
</head>

其中href是目标文档的URL， type则规定了目标URL的MIME类型，而media规定了文档将显示在什么设备上。

2，内嵌样式表

添加在HTML的头部信息标识符< head>里：

<head> 
      <style type="text/css"> 
             <!-- 样式表的具体内容 --> 
      </style> 
</head>

type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过滤掉CSS代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生，还是有必要在样式表里加上注释标识符“< !--注释内容-->”。

3，元素内定

语法：

<Tag style="properties">网页内容</tag>

举个例子：

<p style="color: blue; font-size: 10px">CSS实例</p>

上面例子的代码说明：

用蓝色显示字体大小为10px的“CSS实例”。尽管使用简单、显示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥样式表的优势——即内容结构和格式控制分别保存。

4，导入样式表(高级用法，暂时先放下）

语法：

<style type="text/css"> 
        <!-- @import url("css/base.css"); --> 
</style>

其中外部引用CSS主要用到两种方式link和@import

本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。

link和@import存在如下差别：

差别1：老祖宗的差别。link属于HTML标签，而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。

差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

差别4：当使用javascript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。

从上面的分析来看，还是使用link标签比较好。

课后练习：

步骤一：新建一个名为index.html的网页。

步骤二：在index.html网页文档里加入两个p标签，分别在p标签中加入内容（内容随意）

步骤三：尝试用上面提到的前三种方式，用css代码改变p标签内容的显示格式。

在线咨询

上一篇：这个标星 1.2k+ 的 GUI 引擎竟然支持跨平台开发
下一篇：零基础教你学前端-77、CSS盒模型

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

肖sir_html之基本使用（1）

输入类组件 —— input

文本域 —— textarea

下拉菜单和多选列表

您的项目需求