html基础

HTML 的基本关键字

标题标签

字体

u下划线

i倾斜

b加粗

strong也是加粗

&ge是>

&lt是<

&nbsp是空格

设置样式

height：高度；

width：宽度

color：颜色；

background 背景

对齐方式

center居中对齐

margin-left: 50%;向左偏移；(css)

导入图片

格式

<img src="绝对地址或者相对地址"  alc="图片"  title="鼠标指到输出的文字" height="高度px" width="宽度px">

img 导入图片标签

src 图片的位置

alc 当找不到图片输出什么

title 鼠标指到图片输出的文字

height 图片的高度 单位px （也可以百分比）

width 图片宽度 单位px （也可以百分比）

导入视频

video:关键字

src：资源路径

controls：控制条

autoplay：自动播放

<video src="资源路径" controls autoplay></video>

导入音频

audio：关键字

<audio src="资源路径"controsl></audio>

超链接

<a 标签

href 必填表示跳转的页面

target 表示在哪个窗口打开

​ -blank 在新的标签中打开

​ -self 在当前标签打开

锚链接

<a name="top">顶部</a>
<a  href=#top>返回顶部</a>

name 可以取名字

功能连接

邮件连接：mailto

<a href="mailto:28495694@qq.com">点击联系我</a>

QQ连接：去百度qq推广

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=" alt="点击我" title="点击我"/></a>

列表

有序列表

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

无序列表

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

自定义列表

dt列表名称

dd列表内容

<dl>
    
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

表格

table：表格关键字

tr：行

td：列

border：加边框

colspan:胯列；

<table border="1px">
<tr>
    <td>1</td>
    <td>2</td>
    </tr>
    <tr>
    <td>3</td>
        <td>4</td>
    </tr>
</table>

colspan:胯行；

<table border="1px">
<tr>
    <td colspan="2">1</td>
    </tr>
    <tr>
    <td>3</td>
        <td>4</td>
    </tr>
</table>

rowspan:胯列

<table border="1px">
<tr rowspan="2">
    <td colspan="2">1</td>
    </tr>
    <tr>
    <td>3</td>
        <td>4</td>
    </tr>
</table>

iframe内连框架

iframe：关键字

src：引用网络地址

name：框架标识名

<ifrane src="引用网站" name="框架标识符" width="宽度" height="高度"></ifrane>

input：

input：输入什么类型

type：类型可以是 text（文本框） password（密码文本框） image（图片）radio（单选框标签）默认是文本框

size：指定文本框长度

vlaue：初始值

maxlength：最大长度

name：表示组

size的使用

checked：默认选择

<input  type="text"  name="username" vlaue="名字只能取8位" maxlength="8" size="30">

radio的使用格式必须要要value（单选框）

<center><p>
	性别：
<input type="radio" value="boy" name="sex"/>男   //name取名相同,相当于同一个组只能选择一个
<input type="radio" value="girl" name="sex"/>女
	</p></center>

checkbox多选框必须要value（多选框）

  <input type="checkbox" value="sleep" name="like">睡觉
	<input type="checkbox" value="study" name="like">上课
	<input type="checkbox" value="code" name="like">敲代码
	<input type="checkbox" value="game" name="like">打游戏
	<input type="checkbox" value="1" name="like">撩妹
	<input type="checkbox" value="food" name="like">干饭

按钮

<input type="button"普通按钮

<input type="image"图片按钮

<input type="submit"提交按钮

<input type="reset"重置按钮

两种方法

<input type="button" value="按钮1" name="anniu" >
	
<button name="button">按钮2</button>
	

下拉框

select：下拉框关键字

option ：选择权

<select name="study">
		 <option value="china" checked>中国</option>
		<option value="us">美国</option>
		<option value="japanese">日本</option>
		<option value="y">英国</option>
		 </select>

文本域

textarea:关键字

cols：文本高度

rows：文本宽度(行)

<p>反馈：
	<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
	</p>

文件域

file：文件

<p>上传文件
		<input type="file" name="filef">
		<input type="button" value="上传" name="button11"
	</p>

简单验证

邮箱E-mail

<p>邮箱：
	<input type="email" name="email">
	</p>

url验证

<p>url<input type="url" name="url"</p>

滑块rabge

<p>音量<input type="range" name="audio" max="100" min="0"></p>

数字取值范围

max:最大

min：最小

step：累加（步骤）

<p>数字<input type="number"name="number" max="100" min="0" step="5"</p>

搜索框

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

提交

<input type="submit" disabled>

清空

<input type="reset" value="清空">

标签的应用

隐藏域

hidden

<p>数字<input type="number"name="number" max="100" min="0" step="5" hidden></p>

禁用

disabled 禁用按钮也可以禁用文本框

<input type="submit" disabled >

只读

readonly 只能看value的属性不能修改

<input type="text" maxlength="8" value="只能输入8位" readonly>

表单初级验证

placeholder 提示信息（好像只能在文本框内使用）

<input type="text" maxlength="8" placeholder="只能输入八位">

requred 非空判断

pattern 正确表达式