html5在标签内写css html5 center标签

转载

cnolnic 2024-05-30 00:01:18

文章标签 html5在标签内写css html Java 表单 文章分类 HTML5 移动开发

HTML5

一、基本标签学习：

文件标签：构成html最基本的标签

html:html文档的根标签

head：头标签。用于指定html文档的一些属性。引入外部的资源
title：标题标签。
body：体标签
：html5中定义该文档是html文档

文本标签：和文本有关的标签

注释：
h1 to h6：标题标签
h1~h6:字体大小逐渐递减
p：段落标签
br：换行标签
hr：展示一条水平线

属性：

color：颜色
width：宽度
size：高度
align：对其方式

center：居中
left：左对齐
right：右对齐

b：字体加粗
i：字体斜体
font:字体标签
center:文本居中

属性：

color：颜色
size：大小
face：字体

属性定义：

color：

英文单词：red,green,blue
rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
#值1值2值3：值的范围：00~FF之间。如： #FF00FF

width：

数值：width=‘20’ ,数值的单位，默认是 px(像素)
数值%：占比相对于父元素的比例

3.图片

<img src="image/1.jpg" alt="图像的替代文字（图像加载失败时替代）" title="鼠标悬停的提示文字" align="right"  width="500" height="500"/>
	
	    <!--
	        相对路径
	            * 以.开头的路径
	                * ./：代表当前目录  ./image/1.jpg
	                * ../:代表上一级目录
	     -->

列表标签：

有序列表：

<ol>
    <li>Java</li>
    <li>Java</li>
    <li>Java</li>
    <li>Java</li>
</ol>

无序列表：

自定义列表：

dt:列表名
dd:表体

<dl>
    <dt>语言</dt>
    
     <dd>Java</dd>
     <dd>Java</dd>
     <dd>Java</dd>
     <dd>Java</dd>
</dl>

5.链接标签：

a:定义一个超链接

属性：

href：指定访问资源的URL(统一资源定位符)

target：指定打开资源的方式

_self:默认值，在当前页面打开
_blank：在空白页面打开

<a href="http://www.baidu.cn" target="_blank">点我</a>
<br>
<!--图片超链接-->
<a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a>
<!--功能性链接-->
<!--邮件链接-->
<a href="mailto:123456@qq.com">点击联系我</a>
<!--功能性链接-->

div和span：

div:每一个div占满一整行。块级标签
span：文本信息在一行展示，行内标签内联标签

7.语义化标签：html5中为了提高程序的可读性，提供了一些标签。

<header>:页眉
<footer>：页脚
<section>:web页面中一块独立区域
<article>：独立的文章内容
<aside>:常用于侧边栏
<nav>:导航栏

8.表格标签：

table：定义表格

width：宽度

border：边框

cellpadding：定义内容和单元格的距离
cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
bgcolor：背景色
align：对齐方式

tr：定义行

bgcolor：背景色
align：对齐方式

td：定义单元格

colspan：合并列
rowspan：合并行

th：定义表头单元格
：表格标题
：表示表格的头部分
：表示表格的体部分
：表示表格的脚部分

9 iframe内联框架

在一个网站里面嵌套另一个网站；

<iframe src="PATH（引用页面地址）" name="mainframe（框架名标识）"></iframe>

二、表单标签

表单：

概念：用于采集用户输入的数据的。用于和服务器进行交互。
form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围

属性：

action：指定提交数据的URL
method:指定提交方式

分类：一共7种，2种比较常用

get：

请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
请求参数大小是有限制的。
不太安全。

post：
2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
3. 请求参数的大小没有限制。
4. 较为安全。

表单项中的数据要想被提交：必须指定其name属性

表单项标签：

input：输入框，可以通过type属性值，改变元素展示的样式
type属性：

text：文本输入框，默认值
placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
password：密码输入框
radio:单选框
checkbox：复选框
** 注意: **

要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
3. checked属性，可以指定默认值

file：文件选择框
hidden：隐藏域，用于提交一些信息。

按钮：

submit：提交按钮。可以提交表单

button：普通按钮
image：图片提交按钮

src属性指定图片的路径

label：指定输入项的文字描述信息

注意：

label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

select: 下拉列表

子元素：option，指定列表项

textarea：文本域

cols：指定列数，每一行有多少个字符
rows：默认多少行。

实践代码：

<form action="baisctag.html" method="get">
    <!--文本框-->
    <p>姓名：<input type="text" name="username" value="zr"></p>  <!--表单提交后，目的地址就会收到一个username=value的数据-->
    <p>密码：<input type="password" name="password"></p>

    <p>只读：<input type="password" name="ro" value="admin" readonly> </p>

    <p>隐藏：<input type="password" name="password" hidden></p>
    <!--单选框 name属性值应当一样-->
    <p>
        性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
        <input type="radio" value="girl" name="sex" disabled>女
    </p>
    <!--多选框 name也一样，提交成数组的-->
    <p>
        爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="coding" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
     <!--按钮-->
    <p>
        按钮：
        <input type="button" name="btn1" value="点击">
        图片按钮
        <input type="image" src="../../../1.jpg">
    </p>

    <!--文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

    <!--邮件验证-->
    <p>邮箱：
        <input type="email" value="111" name="email">
    </p>
    <!--URl-->
    <P>
        URl:
        <input type="url" name="url">
    </P>
    <!--数字-->
    <p>
        数字：
        <input type="number" name="num" max="100" min="10" step="10">
    </p>
    <!--滑块-->
    <p>
        音量滑块：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>

    <!--搜索-->
    <p>
        搜索:
        <input type="search" name="search">
    </p>


    <!--下拉框-->
    <p>
        国籍：
        <select name="列表名称">
            <option value="China">中国</option>
            <option value="UN">英国</option>
            <option value="USA">美国</option>
        </select>
    </p>

    <!--文本域 多行文本-->
    <p>
        <textarea name="textarea" cols="10" rows="5">
            文本内容
        </textarea>
    </p>
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>

    <!--增强鼠标可用性 for="id"-->
    <p>
        <label for="mark">点我</label>
        <input type="text" id="mark">
    </p>
</form>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。