html css的简单学习（二）

<!Doctype html>告诉浏览器，这是一个html文档。
lang="en" 默认是en，表示英语；
zh-Hans 中文简体；
zh-Hant 中文繁体；
===========================================================
行内文本标签：
示例：
<p>今天下午<time>4点到6点</time>在<address>会议室</address>开会</p>
适合部分浏览器,提高语义。

<pre></pre>标签，文本通常会保留空格和换行符。
而文本也会呈现为等宽字体
===========================================================
显示效果一样，但强调意义不同的标签有这些：
<del></del>和<s></s>都是显示删除线，但del有强调含义。
<ins></ins>和<u></u>都是显示下划线，但ins有强调含义。
<em></em>和<i></i>都是斜体，但em有强调含义。
<strong></strong>和<b></b>都是加粗，但strong有强调含义。
<mark></mark>突出显示，效果是文字背景变色。
===========================================================
<code></code>用来包装文档中的代码片段。
示例：
<code>
document.getElementById('id');
</code>
==========================================================
表格：
<caption>标题
<thead><th>头部
<tbody>主体
<tr>行
<td>单元格
<tfoot>底部
========================================================
img标签设置width后，不设置高度时，高度自动会等比缩放
========================================================
<ol>有序列表:
使用reversed可以倒序,示例：<ol reversed></ol>
使用start可以指定开始数字。
在li标签中使用value属性，可以指定序号，示例<li value='10'></li>
====================================================================
input中的image类型按钮，
<input type="image" src="图片url" alt="说明">
必须放在<form>标签中才有提交功能
=====================================================================
下拉框与分组：
<select name="hefei">
<optgroup label='合肥市'>
<option value="baohe">包河区</option>
</optgroup>
<optgroup label='县市'>
<option value="changfeng">长丰县</option>
</optgroup>
</select>
==================================================================
textarea文本域：
属性：
cols 每行最对多少个字符
rows 可以显示多少行
resize 是否允许更改尺寸
both默认允许，
none不允许，
horizontal仅允许水平调整宽度，
vertical仅允许垂直调整宽度
示例：
<textarea name='content' cols="30" rows="10" style="resize:both;">
</textarea>
===================================================================
<label>标签用于对控制内容进行说明.

格式一：
<label>与<input>同级，适合表格布局，
但是input必须有id属性与label的for属性关联。
示例：
<label for="name">用户名:</label>
<input type="text" name="username" id="name" value="">

格式二：
label包含input，优点：代码更加紧凑，适合div布局，
但是label是input的父级，增加了层级。
示例：
<label>
用户名:
<input type="text" name="username" value="">
</label>
==========================================================================
<filedset>表单元素分组标签：
示例：
<fieldset>
<legend>用户基本信息：</legend>
<div>
<label for="name">用户名:</label>
<input type="text" name="username" id="name" value="">
</div>
<div>
<label for="pass">密码:</label>
<input type="password" name="password" id="pass" value="">
</div>
</fieldset>
=============================================================================
html5新增的表单属性：
placeholder 设置提示信息；
autofocus 自动获取焦点；
require 必填项，如果为空无法提交并将焦点自动定位在上面；
pattern 对输入内容进行正则验证；
list 限定输入内容的列表，列表由<datalist>标签创建；
height和width 设置input类型为图像时的宽高；
min、max、step 设置input类型为数字或日期时的取值范围与步长间隔；
novalidate 用在form标签中，提交时不对数据进行验证；

正则示例：
<input type="text" name="username" pattern="[a-zA-Z]{1,10}" title="用户名">

list示例：
<label for="search">搜索</label>
<input type="text" id="search" list="keyword">
<datalist id="keyword">
<option value="html">html</option>
<option value="html">css</option>
<option value="js">js</option>
</datalist>
list的属性值与datalist的id值一致。

min、max、step示例：
工资：<input type="number" min="1000" max"9000" step="500">
==============================================================================
h5新增表单类型：
number 仅限数值型数据，可设置范围和步长；
date 仅限日期型数据，可设置范围与步长；
time 仅限时间类型数据，可设置范围与步长；
email 限定必须输入电子邮箱；
search 不限定内容，当有内容时，控件尾部有一个取消符号；
url 限定必须是以http://或者https://开头的合法url；
color 自动打开系统的色板或拾色器，进行颜色选择；
================================================================================
form表单上传文件时enctype属性的值需要设置为multipart/form-data，
不对发送字符进行编码。
enctype的默认值是application/x-www-form-urlencoded,发送前对所有字符进行编码，
空格转+号，特殊字符转ASCII16进制值。
text/plain仅对空格转为加号，不对特殊字符编码。

当上传多个文件时，增加multiple属性：
<input type="file" name="image" value="上传图片" multiple="multiple" />
================================================================================
<video>标签：

height pixels 设置视频播放器的高度。
width pixels 设置视频播放器的宽度。

autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload
如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。

src url 要播放的视频的 URL。

示例：
<video src="123.mp4" width="400" controls="controls" poster="1.jpg">
您的浏览器不支持 video 标签
</video>

如果只有声音，没有视频图像：
可能是视频编码格式的问题，需要下载格式工厂，然后进行转码：

MP4 = MPEG4文件使用 H264 视频编解码器和 AAC 音频编解码器。
WebM = WebM文件使用 VP8 视频编解码器和 Vorbis 音频编解码器。
Ogg = Ogg文件使用 Theora 视频编解码器和 Vorbis音频编解码器。
==============================================================================

html css的简单学习（二）的更多相关文章

  1. html css的简单学习（三）

    html css的简单学习(三) 前端开发工具:Dreamweaver.Hbuilder.WebStorm.Sublime.PhpStorm...=========================== ...

  2. html css的简单学习

    html css的简单学习 css的内边距:padding (auto.length.%)(顺序:上.右.下.左)padding-toppadding-leftpadding-rightpadding ...

  3. CSS入门基础学习二

    我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...

  4. HTML 与 css 的简单学习

    第21课: 内联元素,又称为行内元素,主要来控制一行内的字: 如: span,不是独占一行,不能设置宽高,竖直方向上不能设置 margin与 pading的值,不过水平方向上可以设置哦.(因为它只在一 ...

  5. css的简单学习笔记

    1.CSS的简介 *css :层叠样式表 **层叠: 一层一层. **样式表: 具有大量的属性和属性值 *使得页面的显示效果更加好. *css将网页内容和显示样式进行分离,提高了显示功能. *css不 ...

  6. Linux——shell简单学习(二)

    流控制语句: for…done语句 格式:for  变量   in   名字表 do  命令列表 done 例子: #!/bin/sh for DAY in Sunday Monday Tuesday ...

  7. python 3+djanjo 2.0.7简单学习(二）--创建数据库和模型

    我们紧接上次,这里将建立数据库,创建第一个模型提示:这里我们不需要去一直启动,django会在我们ctrl+s的时候自动刷新并启动服务,很方便吧  1.数据库配置 现在,打开 vote_mysite/ ...

  8. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  9. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

随机推荐

  1. NOIP模拟赛 czy的后宫5

    描述 czy要召集他的妹子,但是由于条件有限,可能每个妹子不能都去,但每个妹子都有一个美丽值,czy希望来的妹子们的美丽值总和最大(虽然……). czy有一个周密的电话通知网络,它其实就是一棵树,根结 ...

  2. 【上下界网络流】bzoj2502: 清理雪道

    模型:无源汇有上下界可行流 LJN:模板题吧 Description        滑雪场坐落在FJ省西北部的若干座山上. 从空中鸟瞰,滑雪场可以看作一个有向无环图,每条弧代表一个斜坡(即雪道),弧的 ...

  3. 我如何解决Centos下cannot find a valid baseurl for repo的问题的

    刚刚安装完centos,进入命令行模式后,发现所有的命令都不能使用,最后一行显示:Error:Cannot find a valid baseurl for repo:base,如何解决? 在cent ...

  4. jsp常用动作

    jsp:include 动态包含: jsp:forward 转发: jsp:useBean 实例化bean对象: jsp:setProperty 设置一个属性值 jsp:getProperty 获取一 ...

  5. list_add_tail()双向链表实现分析

    struct list_head { struct list_head *next, *prev; }; list_add_tail(&buf->vb.queue, &vid-& ...

  6. flask-用户资料

    首先创建User模型 class User(UserMixin,db.Model): __tablename__ = 'users' #.. name = db.Column(db.String(64 ...

  7. 光学字符识别OCR-5 文本切割

    经过前面文字定位得到单行的文本区域之后,我们就可以想办法将单行的文本切割为单个的字符了.因为第三步的模型是针对单个的字符建立的,因此这一步也是必须的. 均匀切割 基于方块汉字的假设,事实上最简单的切割 ...

  8. ogre3D学习基础10 -- 键盘控制与鼠标控制（直接控制）

    要实现键盘,鼠标对场景的控制,首先要帧监听,就是在每一帧的渲染前后对它进行操作.这里的操作没有用到缓冲区,只是简单的直接获取. 1.这些步骤和前面的一样,直接上代码,操作还是在createScene函 ...

  9. 让boostrap的图片轮播支持滑动效果

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果. 然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有 ...

  10. “玲珑杯”线上赛 Round #17 河南专场

    闲来无事呆在寝室打打题,没有想到还有中奖这种操作,超开心的 玲珑杯”线上赛 Round #17 河南专场 Start Time:2017-06-24 12:00:00 End Time:2017-06 ...