HTML学习

HTML学习

• 超文本标记语言，HTML

• head：网页头部

• meta：描述性标签

• title：网页标题

• body：网页主体

• < h1>一级标签，< p>段落标签

• < br/>换行标签

• < hr/>水平线标签

• 字体样式标签粗体：< strong> ；斜体< em>

• 注释

• 特殊符号

• • 空格< &nbsp
  • 大于&gt
  • 小于&lt
  • 版权符号&copy

• 图像标签

width宽、height高

• 超链接标签

<a href==“网页的地址” target=“_blank”>网页名字（在空白页打开）

<a href==“网页的地址” target=“_self”>网页名字（在自己页面打开）

• 锚链接

回到顶部

前面用顶部作为前面的指引

现在多用id代替name

• 功能性链接

点击联系邮件

块元素和行内元素

块元素：p、h1-h6

行内元素：a、strong、em

列表

有序列表

1. q
2. w

ol表示整个表，li表示每个行

无序列表

ul表示整个表，li表示每一行

自定义列表

dl表示整个,dt表示列表名称，dd表示每一行

名字

1

2

多用于公司下面的介绍自定义列表

表格标签

table表示表格标签,tr行，td列,border表示格子线

1,1	1,2	1,3
2,1	2,2	2,3
3,1	3,2	3,3

如何实现跨行？

rowspan=“跨的行数”

colspan=“跨的列数”

媒体元素

音频和视频

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

video视频文件

src资源路径

controls控制

autoplay自动播放

audio音频文件

属性同视频的控制和自动播放

页面结构

• header标题头部
• footer标记脚部区域
• section独立区域
• article独立文章内容
• aside侧边栏
• nav导航类辅助内容

iframe内联框架

< iframe src=“路径” name=“框架标识名”>内联框架

表单post和get

用户名和密码等都属于表单注册登陆等

< form method=“post” action=“result.html”>(其中method规定如何发送表单数据常用值get/post，action表示向何处发送表单数据)

< input type="text">#文本输入框

<p>密码：<input type="password" name="pwd"></p>#密码框

<input type="submit">#提交

<input type="reset">#重置

get方式可以在url看到提交信息，不安全但高效，post比较安全

文本框

• type：指定元素的类型，text文本框，password密码，radio单选框
• name：指定表单元素的名称
• value：元素的初始值
• size：指定表单元素的厨师宽度
• maxlength：输入的最大字符数，最长写几个字符
• checked：指定按钮是否被选中

两个单选框放在一个组里，name相同才表示放在一个组里

按钮

按钮

按钮的type为button

button普通按钮；image图像按钮；submit提交按钮；reset重置按钮

多选框

checkbox是type，value表示初始值,name相同则表示在一组里面，checked默认选中的

爱好 学习 跑步

列表框

下拉框

下拉框 中国 美国 印度

selected默认被选

文本域

反馈 文本内容

cols行，rows列

文件域

file

文件域

邮件域

邮件验证

邮箱

都是用input只是type不同，用input开头

滑块

滑块：

搜索框

搜索：

表单的应用

hidden是表示隐藏的框，但是其属性还是在的

增强鼠标可用性

点击

• 只读readonly
• 禁用disable

表单初级验证

placeholder提示信息

required非空判断

pattern正则表达式

html总结