Java Web

day08-前端技术-HTML&CSS

2020-03-29  本文已影响0人  建国同学

一、了解html语言

1.区分HTMl4.01和XHTML(约束):

2.认识HTML5

<html>
    <head>
        <title>页面的标题</head>
    </head>
    <body>
        这是我的第一个html页面   
    </body>
</html>

3. 注释标签

4. 标签(元素)

HTML的标签不区分大小写,但是为了兼容XHTML,建议大家都小写;

双标签：开始标签和结束标签一起出现，
      如:<font>要显示的文字 </font>
      没有斜杠的是开始标签，有斜杠的是结束标签。
单标签：<br/> <hr/>
      规范的写法是在右尖括号前加上反斜杠。

注意:写标签的时候,标签与标签之间是不允许错乱嵌套.

5. 属性和值

6. 标签属性

    标签属性中分了三种：
        1 HTML 标准属性，可以理解成事几乎所有的HTML和XHTML都有支持的属性；
        class     规定元素的类名（classname）；
        id          规定元素的唯一 id
        style     规定元素的行内样式（inline style）
        title      规定元素的额外信息（可在工具提示中显示）
                     以及其它的语言键盘属性等，上面是几个比较常用的属性。
        2 标签上的可选和必选属性，这些属性只针对单个的标签有效果；
        3 事件属性，HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript

7. 特殊字符与转义字符

html字符

二、常用HTML标签

<!-- .... -->:定义HML注释的标签;

<html>:定义HTML文档的根标签;

<head>:定义HTML页面的头部标签;

<title>:定义HTML页面标题,放置于<head></head>之间;

<body>:定义HTML页面主体部分;

<style>:用于引入CSS文件,一般放于<head></head>之间;

<script>:用于引入JavaScript文件,一般放于<head></head>之间;

<h1>到<h6>:定义标题一到标题六,和world一致;

<p>:定义段落,使用如:<p>床前明月光</p><p>疑是地上霜</p>

<div>:定义文档中的结构;为HTML提供结构和背景;

<span>:和<div>基本相似,区别是<span>定义的节默认不换行;
<br/>:单标签,插入一个换行;

<hr/>:单标签,定义一条水平线;

<p>,<div>,<span>之间的默认情况下效果区别:
<span>...</span>标签不会导致换行,<div>...</div>会换行,而<p>...</p>会产生一个段落,所以段落和段落之间默认有很大的间距;

三、超链接和锚点

<a> 标签的两个重要属性:
href:它指链接的目标,也就是超链接关联的另一个资源;
target:指定使用框架集中的哪个框架来装载另一个资源;属性值有:
_slef:表示自身,默认;
_blank:新窗口;
_top:顶层框架;
_parent:父框架;

<a>:可定义锚(anchor)
通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）;
<a href =”#A1”>第一章</a>
<a href =”#A2”>第二章</a>
<a name =”A1”>第一章内容</a>
<a name =”A2”>第二章内容</a>

四、列表标签

五、图片标签

六、表格标签

七、表单标签

<form>:用于生成输入表单,该标签不可见;在HTML5之前,表单控件,如单行文本框,密码框,单选框等都必须放在<form></form>之间;常见属性如下:
    action:必填属性,表示当点击”提交”按钮时,表单数据提交到哪个地址;
    method:指定表单提交时的请求类型,该属性值有get或post,分别用于GET或POST请求,默认是get方式,开发建议使用post方式;
    enctype:指定表单数据的编码方式,属性有3个值:

input标签
    <input>:表单控件标签里功能最丰富的,用于接收用户输入的信息;

其中的type属性指定输入标签的类型。
单行文本框:type = text,输入的文本信息直接显示在框中;
密码输入框:type = password,输入的文本以圆点形式显示;
单选框:type = radio,如：性别选择;
复选框:type = checkbox,如：多个兴趣选择;
隐藏域:type = hidden, 在页面上不可见,但在提交的时候会一起提交数据,用于隐式向后台传输一个数据;
提交按钮:type = submit,用于提交表单中的数据内容;
重置按钮:type = reset,将表单中填写的内容均设置为初始值;
无动作按钮:type = button,可使用javascript为其自定义事件;
文件上传域:type = file,会生成一个文本框和一个浏览按钮;
图像域:type = image, 它可以替代submit按钮,即图像提交按钮。

<input>标签其他常见属性:
    name:指定input标签的名字,没有设置name属性的标签不能提交数据;
    value:指定input标签的初始值;
    checked:设置单选框,复选框的初始状态是否选中;
    disable:设置input标签加载时禁用此标签;   不能提交到
    maxlength:文本框输入最大字符数,属性值是数字;
    readonly:指定文本框内值不允许直接修改; 能被提交

select标签
    下拉框标签，主要使用option标签作为字标签，<seclet>和<option>一般同时使用：

<select name="country" >
         <option value="">---请选择---</option>
         <option value="zh" selected="selected">中国</option>
         <option value="en">英国---</option>
</select>

<select >常用属性：
    multiple="multiple" 表示可以选中多个
    size="2" 表示显示几个，（浏览器之间有差异）
<option>常用的属性
    select=”selected”:默认选中哪个选项

textarea标签
    文本域标签
<textarea  cols="50" rows="5">
           要显示的内容
</textarea>

示例


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- form表单： 生成输入表单，用来和用户进行交互，收集用户输入的数据 的
    属性：
        action  :设置数据提交的地址
        method  :提交的方式(常见的方式: get默认的方式和post )
        enctype :对收集的数据进行的编码格式application/x-www-form-urlencoded (默认的编码格式)

    -->
<form action="#" method="get" enctype="application/x-www-form-urlencoded">

<!-- input表单
      单行文本框:type = text,输入的文本信息直接显示在框中;
密码输入框:type = password,输入的文本以圆点形式显示;
单选框:type = radio,如：性别选择;
复选框:type = checkbox,如：多个兴趣选择;
隐藏域:type = hidden, 在页面上不可见,但在提交的时候会一起提交数据,用于隐式向后台传输一个数据;
提交按钮:type = submit,用于提交表单中的数据内容;
重置按钮:type = reset,将表单中填写的内容均设置为初始值;
无动作按钮:type = button,可使用javascript为其自定义事件;
文件上传域:type = file,会生成一个文本框和一个浏览按钮;
图像域:type = image, 它可以替代submit按钮,即图像提交按钮。
    -->
    <!-- type：属性   ，提交的内容的类型              name：必须有name才能提交数据-->
    姓名：<input type="text" name="username"/> <br/> 
    密码：<input type="password" name="password"/> <br/>
    性别：<input type="radio" name = "sex" value = "1"/>男
        <input type="radio" name="sex" value = "0" checked />女  <br/>
    爱好：<input type="checkbox" name="hobby"/>java
    <input type="checkbox" name="hobby"/>篮球
    <input type="checkbox" name="hobby"/>唱歌
    <input type="checkbox" name="hobby" checked />跳舞        <br/>
    隐藏域：<input type="hidden" name="id" value="1111"/>   <br/>
    <!-- disabled 不可修改 ,还不能提交         readonly 不能修改 -->
    购物车数量<input type="text" value = "5"  name="number" disabled> <br/>
    数量<input type="text" name="phone" maxlength="11" readonly value="123"> <br/>
    
    常住地：<select name="place" multiple="multiple" size="3">
            <option value="gz">广州</option>
            <option value="fz">福州</option>
            <option value="hz">杭州</option>
            <option value="sz" selected="selected">苏州</option>
            <option value="zz">郑州</option>
        </select>
        <br/>
    个人简介：<textarea rows="5" cls="10">
    </textarea>
    <br/>
    <input type="submit" value = "注册" />
    <input type="reset" value = "重置"/>
    <input type="button" value = "按钮"/>
    <input type="file"  />
</form>
</body>
</html>
form表单示例
上一篇下一篇

猜你喜欢

热点阅读