继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

前端基础——一篇文章带你了解HTML语法

慕先生0340613
关注TA
已关注
手记 483
粉丝 23
获赞 120

#### 3).图片映射

通过点击图片跳转到相应链接页面。

图片无法显示


### 8.表格

有时候我们也需要插入表格来展示一些数据,表格的制作稍微有点麻烦,不过用Sublime Text 3它可以十分轻松的创建表格。表格一般由表头,表的标题,表的内容组成。最常用的就是Table标签了。

1--one 2--two 3--three 4--four h j k l a b c d ```

9.列表

列表就是我们常常见到的一篇文章的目录,它一般以一种树型状存在着,它可以分为有序列表和无序列表。

1).有序列表

以标签ol为主体,li为父目录,具体表现为:

<ol><li>任性</li>
<li>90后</li>
<li>boy</li>
</ol><ol start="45"><li>90后</li>
<li>boy</li>
<li>任性</li>
</ol><ol type="a"><li>90后</li>
<li>boy</li>
<li>任性</li>
</ol><ol type="A"><li>90后</li>
<li>boy</li>
<li>任性</li>
</ol><ol type="I"><li>90后</li>
<li>boy</li>
<li>任性</li>
</ol><ol type="i"><li>90后</li>
<li>boy</li>
<li>任性</li>
</ol>

可以看出有序列表支持多种排序前缀,它就好比Word中的项目符号一样。

2).无序列表

与有序列表唯一不同的就是没有数字也没有字母,只有图形,也是犹如项目符号一样。

<ul><li>任性</li>
 <li>90后</li>
 <li>boy</li>
</ul><ul type="disc"><li>90后</li>
 <li>boy</li>
 <li>任性</li>
</ul><ul type="circle"><li>90后</li>
 <li>boy</li>
 <li>任性</li>
</ul><ul type="square"><li>90后</li>
 <li>boy</li>
 <li>任性</li>
</ul>

可以看出无序列表的默认项目符号就是类型就是黑圆圈

3).自定义列表

<dl><dt>1</dt>
  <dd>计算机</dd>
  <dt>2</dt>
  <dd>电脑</dd>
  <dt>3</dt>
  <dd>PC</dd>
</dl>

可以看到自定义列表由我们自己定义列表项目符号,项目的内容

10.块级元素和内联元素

1).块级元素

什么是块级元素,其实就是这个元素在进行显示后会换行输出下一个元素,比如我们的P标签,还有Blockquote 标签都是,不过今天我们要说的是Html中运用的最广的块级元素,它就是Div。

<div align="center">
<p>小花猫</p>
<a href="">小色猫</a>
<img src="1.png" alt="1.png" /><a href="">小白猫</a>
<blockquote>小懒猫</blockquote>
</div>

可以看到在Div中的块级元素都换行了,然而内联元素都没有换行。

2).内联元素

和块级元素正好相反,不用换行输出的那种,比如a标签,或者是Big  Small这些段落中的文本标签都是内联元素,当然也有例外,比如Pre标签,这里不再细说。今天我们要着重讨论的是Span标签。

<span>
</span><p>小花猫</p>
<a href="">小色猫</a>
<img src="1.png" alt="1.png" /><a href="">小白猫</a>
<blockquote>小懒猫</blockquote>

注意:Span标签是没有Align属性的。

11.框架

框架是什么?框架就是在一个窗口可以显示多个页面内容的一个容器。框架又分为垂直和水平框架。

1).垂直框架

不可与Body标签同时出现

 #设置框架的列占有比例
   #无法调整框架的大小
  

2).水平框架

不可与Body标签同时出现

 #设置框架的行占有比例
   #无法调整框架的大小
  

3).内联框架

#存在body标签中
frameborder:是否显示框架周围的边框 0隐藏 1显示
scrolling:是否显示滚动条 yes显示 no隐藏 auto自动
width:宽度
height:高度
name:锚点名称

<img src="1.jpg" alt="1.jpg" />
<a href="https://www.baidu.com">fadf</a>  

4).判断是否支持框架


您的浏览器不支持框架

12.表单元素

这个算是Html中的重中之重了,因为用的比较多,基本上所有的表单元素都包含在Form标签中。每一个表单中的空间要么独立存在,要么处于Input中,下面我们来详细了解下:


 #字段组
表单数据 字段组名
表单控件的标记
 for必须指向id

文本输入框: 
密码输入框:
单选框:
多选框:
按钮:button1
下拉列表:
1234
文本域:
 行占10个字符 列占20个字符,一个汉字等于两个字符
hello world

菜单:
<menu>


</menu>
提交:

Html5表单类型
预定义选项列表
 

表单的密钥对生成器字段
当提交表单时,私钥存储在本地,公钥发送到服务器。


输入框只允许数字输入


日期


颜色


范围


月份和年份


星期和年份


时间


日期时间选择(有时区)


日期时间选择(无时区)


邮箱


搜索


电话


url


action:处理表单数据的服务器脚本语言(如php)
method:请求方法 如get post
accept-charset:提交表单时的字符编码 如utf-8
target:页面跳转方式
autocomplete:自动完成表单 off关闭 on开启
enctype:表单数据的编码 如application/x-www-form-urlencoded(默认),multipart/form-data(文件上传),text/plain
novalidate:浏览器不验证表单


formtarget   覆盖target属性,用于type="submit"和type="image"。
formnovalidate覆盖novalidate属性,用于 type="submit"
formmethod   覆盖method 属性,用于 type="submit"以及type="image"
formenctype   覆盖enctype属性,用于type="submit"以及type="image",仅针对method="post"的表单
formaction   提交表单时处理该输入控件的文件的URL
form         规定input元素所属的一个或多个表单
autofocus     当页面加载时自动获得焦点
disabled     输入字段应该被禁用
max           输入字段的最大值
maxlength     输入字段的最大字符数
min           输入字段的最小值
pattern       通过其检查输入值的正则表达式
readonly     输入字段为只读
required     输入字段是必需的
size         输入字段的宽度
step         输入字段的合法数字间隔
value         输入字段的默认值
multiple     常用于邮箱和文件,可多个上传文件
placeholder   提示用户该如何正确输入

13.Html 头部,标题

之所以现在讲这个,是不想一开始就长篇大论,增加一些没必要的修饰,免得扰乱学习的进度。

我们都知道Html,既然是Html,怎么可以没有Html标签了,当然是有的,只是我一开始没有写罢了,当然也可以不用写,不过为了美观为了不出错,建议写上。浏览器标题在浏览器头部里面被它包裹着。


 浏览器头部
 浏览器标题 规定所有链接的默认地址
 引入外部css文件
设置浏览器内容类型为Html,编码为utf-8
 五秒刷新
 五秒后跳转到百度
 设置搜索关键字 SEO
http-equiv   浏览器的内容头部
content-type 内容类型
expires     cookie过期时间
refresh     刷新
set-cookie   设置cookie
charset     编码

name   一般做搜索关键词
author         作者
description   页面描述内容
keywords   关键词
generator   生成器
revised       修改后的值
others         其它

scheme 用于翻译网页文本的格式
http https 协议
YYYY-MM-DD 日期格式


浏览器主体内容
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP