首页 > Web开发 > 详细

HTML基础

时间:2019-11-15 17:43:27      阅读:70      评论:0      收藏:0      [点我收藏+]

一、HTML基本格式

  <!DOCTYPE html>

<html lang="zh_CN">
<head>
<meta charset="UTF-8"><!--元信息 防止乱码-->
<title>Web移动开发</title>
<link rel="stylesheet" href="">
<style type="text/css"></style><!--样式-->
</head>
<body> <!--身体-->

<!--行为-->
<script type="text/javascript"></script>
</body>
</html>

二、HTML语法

  •   HTML文件是由标签(元素、节点)构成的
  •   标签由两个< >组成
  •   标签可以分为单标签和双标签

      <meta>单标签  <head></head>双标签

  •   不管是单标签还是双标签都要符合开闭原则

      双标签 <head>开始(开放)标签    </head>结束(闭合)标签

      单标签 <meta /> 习惯性的规范性写法,同时具备单标签和闭标签

  •   开始标签里面可以存在多个属性,多个属性之间需要空格隔开

三、HTML基本分类元素

  • 文档元素:

<html>  定义 HTML 文档

<head>      定义关于文档的信息

<body>      定义文档的主体

<title>        定义文档的标题

<meta>      定义关于 HTML 文档的元信息

  可以用来做请求的重定向    

    <meta http-equiv="refresh" content="5;url=https://www.baidu.com" />

  可以用来设置网页的关键字

    <meta name="keywords" content="HTML5,JavaScript" />

  可以用来指定网页的描述,搜索引擎在检索页面时,会同时检索页面中的关键词和描述

    <meta name="description" content="发布h5,js等前端相关信息" />

<link>       定义文档与外部资源的关系

<style>     定义文档的样式信息

<script>    定义脚本

  • 文章元素:

<h1-h6>  标题标签

<p>         会换行的段落标签

<hr>        创建一条水平线

<br>        换行

<span>    一个文本标签,不会换行

<pre>       可以保留格式( 空白 换行 推进)的 p元素

  • 字体样式元素:

<i>            斜体

<u>     下划线

<b>     加粗

<strong>  加粗

  • 布局元素  div

作用:分割内容、包裹内容(将页面内容 分解成多块 并且包裹起来)

  • 框架元素  iframe

作用:  用来在页面中嵌套其他网页

src=" "  路径

  • 链接元素

a  标签

作用:

1、跳转  跳转到新的html页面(本地路径  或者网络  路径)

2、锚点  跳转到当前页面的指定位置

3、回到顶部  从页面的其他位置  跳回到顶部

4、下载  下载文件

5、发送邮件(Windows上无效,对Mac有效)

  • img  图片标签

src  本地路径    网络路径

alt  图片加载失败时  提示内容

<img src=" " alt="图片"/>

  • 表单元素  form

button  按钮

select  下拉框  option  下拉菜单  optgroup  下拉选项组

input    单行文本输入框

<input type=" " name=" " value="请输入"/>

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

<input type="checkbox" name=" " />多选框

<input type="radio" name=" " />单选框(name相同才能单选)

<input type=" " name=" " placheholder="请输入"/>

<input type="password" name=" " placheholder="密码框"/>

<input type="number" name=" " placheholder="数字框"/>

提交按钮和重置按钮只能在form表单里面生效

<input type="submit" name=" " value="提交按钮"/>

<input type="reset" name=" " value="重置按钮"/>

textarea  多行文本输入框

label 没有任何效果 可以优化用户体验

  • 无序列表

ul  >  li    li标签是里面的每一项 可以相互嵌套使用

  • 有序列表

ol  >  li    可以相互嵌套使用

 

HTML基础

原文:https://www.cnblogs.com/quanhao/p/11838510.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!