前端三大件：HTML入门-白红宇

前端三大件：HTML入门

阅读量：3948 次

发布时间：2019-05-24

本文共 2781 字，大约阅读时间需要 9 分钟。

快速链接：

一、什么是HTML

HTML（Hyper Text Markup Language）超文本标记语言

超文本：文字、图片、音频、视频、动画等

现在最多使用的是HTML5，它提供了一些新的元素和一些新的特性，同事也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图标、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。现在的web网页播放视频一般有两种方式：

1.使用flash插件播放（逐渐被浏览器淘汰禁用）

2.使用html5播放器播放（现在以及未来的趋势）

二、第一个HTML网页

  
     Title

1）DOCTYPE

向浏览器声明使用什么规范，现在浏览器默认的就是html5

2)标签

整个html网页的总标签，网页的所有标签和内容均需要在此标签之内进行编辑

3）标签

meta是一个描述性标签，它用来描述我们网站的一些信息，一般用来做搜索引擎优化（SEO）

3）<head>头部标签

代表网页头部

4）<title>标题标签

代表网页的标题

5）网页主体标签

三、网页的基本标签

1)标题标签

一级标题
二级标题
三级标题
四级标题
……

2）段落标签

用户名密码

用户名

密码

3）换行标签

使用换行标签之后，原本应该显示在同一行的数据将会进行换行，作用形同“Enter回车”，一般将换行标签写为“闭合”形式

用户名

密码

使用两个p标签和使用换行标签显示的内容的区别：

使用两个p标签，则两行数据之间的间隔较大，而单纯使用换行标签，则两行数据之间的间隔比较小

在这里插入图片描述

4）水平线标签

水平线标签就是在网页中显示出一条横向贯穿的水平线，我们一般也写成“闭合”形式。

5）字体样式标签


   粗体斜体

6）特殊符号标签

空格: 大于：>小于：<版权符号：©更多特殊符号可以查看:https://www.w3school.com.cn/tags/html_ref_symbols.html

四、常见的图像格式

1）JPG

2）GIF

3）PNG

4）BMP（位图）

src="图像地址"alt="图像的替代文字"（当图片因为一些原因无法显示的时候，就会					显示该文字）title="鼠标悬停提示文字"width="图像宽度"height="图像高度"

五、链接标签

链接文本或图像href="链接路径"target="链接在哪个窗口打开",常用值：_self、_blanktarget属性用于设置在何处打开链接文档

值	描述
_blank	在新窗口中打开被链接文档
_self	默认，在当前的页面中打开被链接文档
_parent	在父框架集中打开被链接文档
_top	在整个窗口中打开被链接文档
framename	在指定的框架中打开被链接的文档

5.1文本超链接

点击我跳转到另一个页面
点击我跳转到百度网站

5.2图像超链接

5.3按钮跳转


   
   顶部
   回到顶部
   
   锚点
   跳转至指定位置

5.4功能性跳转


   点击联系我

六、行内元素和块元素

6.1行内元素

内容撑开宽度，左右都是行内元素的可以排在一行

标签标签标签

6.2块元素

无论内容多少，该元素独占一行

标签

七、列表标签

7.1有序列表

带序号(1,2,3,4……)


   
     
    java
  
    python
  
    javascript
  
    运维
  
    前端

在这里插入图片描述

7.2无序列表


   
     
    java
  
    python
  
    javascript
  
    运维
  
    前端

在这里插入图片描述

7.2自定义列表

在这里插入图片描述

八、表格标签


   
   
                                                 1-1               1-2          
                           2-1               2-2

九、媒体标签


   
   
   
   src:资源路径controls:控制按钮，控制视频或者音频的播放、音量、窗口大小化等autoplay:自动播放

十、页面结构分析

元素名	描述
header	标题头部区域的内容（用于页面或者页面中的一块区域）
footer	标记脚步区域的内容（用于整个页面或者页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或者应用（常用于侧边栏）
nav	导航类辅助内容

十一、iframe内联框架

src:	显示资源路径name:	标识iframeframeborder:	规定是否显示  周围的边框。 取值：1/0width:	iframe的宽度height:	iframe的高度

十二、form表单提交


     
        用户名：  
  
        密码：  
  
    
   
action:	规定当提交表单时向何处发送表单数据，可以是一个网站，也可以是一个请求处理地址。method:	get/post 用于发送表单数据的http方法

十三、单选框和多选框

男女

checked: 默认勾选项（多选框一样）单选框和多选框最需要注意的是：name这个属性必须是一个组，也就是name属性必须是一样的才能实现单选功能，如果name属性不一样，则认为不是同一个单选框组，也就能够同时勾选两个了

爱好: 睡觉美食跑步游戏

十四、下拉框

国家：selected:	默认选项

十五、文本域和文件域


     内容……

十六、搜索框滑块和简单验证

邮箱地址：同理：URL:数字:

在这里插入图片描述

十七、表单的常见应用

disabled:	禁用readonly:	只读hidden:	隐藏placeorder:	规定可描述输入  字段预期值的简短的提示信息。required:	必需在提交表单之前填写输入字段pattern:	用于验证  元素的值的正则表达式。

👉

你可能感兴趣的文章

Android UI控件组合应用之一：建立数据模型

编译错误处理noproguard.classes-with-local.dex已杀死

android如何添加AP中要使用的第三方JAR文件

查看>>

利用sudo命令为Ubuntu分配管理权限

查看>>