HTML基础

一、HTML页面结构

1.HTML定义

（HTML）为超文本标记语言，是写给浏览器的语言， 目前网络上应用最广泛的语言，目前已经更新到HTML5，HTML添加了一些写的语义化标签，放弃了一些旧标签。目的是兼容所有以往标签编写的网页。可以更加优良的识别。应用。

2.HTML标签

（HTML）标签的书写与大小写无关，一般推荐使用小写。特点：由尖括号包围关键词，如《hmtl》。通常成对出现：比如<div></div>,一个开始一个结束标签，一般HTML的标签都是闭合的成对出现，但是，页也有个别的例外。（单标签<img/>、<br/>、<input/>、等）。标签具有属性：属性用来表示标签的特性，如<img src=" " title=" "/>

3.html基本结构

<!doctype html>：声明语句，告诉浏览器该文档遵循HTML规范

<html>：页面基础元素，主要定义页面的开始和结束部分，其他内容包含在<body>标签内

<head>：页面头部元素，包含当前文档的相关信息，可包含<title>元素，等，定义标题，编码，使用此标签可以将基本信息部分和页面主题内容区分开来。

<meta charset="utf-8">：meta元信息元素用来定义页面的附加信息，其中包括页面的作者，版权，关键字等相关信息。此元素是一个自封闭的元素，通过其中的属性来添加各种附加信息。此元素在不适用任何属性时，对页面没有影响.(页面编码有多种，但常用的是utf-8,gb2312,utf-8为多国语言编码，gb2312为中文简体编码，设置网页编码的语句为<meta charset="utf-8"/>是在head标签内定义的)

<name>：元信息元素名称属性，制定文档附加信息名称，例如，最常用的值“keywords”用来定义文档中的关键字，方便搜索引擎的搜索，name属性的语法结构用法：<meta name="keywords" ontent=" 测试软件"/>

<title></title> ：设定文档的标题，标题名称，会显示在浏览器的窗口的标题栏

</head>

<body>：定义文档主题，包含文档的所有内容（文本，超链接，图像，表格等）

</body>

</html>

4.常用标签元素

行内元素：*和其他元素都在一行，*宽高设置无效，宽高就是内容撑开容器的宽高，*行内元素只能包含行内元素，不能包含块级元素。

超级链接：<a href="url"></a>标签定义超链接，href的作用是指明超链接连接到的网址，除了href属性，还有title属性表示链接的提示信息。target属性表示超链接要链接的打开方式，即当点击了链接，选择是在另一个页面打开还是本页面打开，其中属性值包括_blank（新的空白页），_self（当前页）_top（当前页）。

span标签：常用的文本标签。可以对特殊处理的文字部分添加样式<p>守护 <span style="color:red">执子之手与子偕老</span></p>

文本格式化标签： <b>粗体</b>,<strong>定义粗体</strong>，<i>斜体<i>，<em>斜体</em>，<del>定义删除</del>,4<sup>2</sup>定义上标文字。3<sub>5</sub>定义下标文字,<mark>表示提醒</mark>

img图像;展示图片,<img src=" 图片链接 " title=“ 图片名称” alt=“图片名称”/>

标签：input标签：账号：<input type="text" placeholder=" 输入框 " required=“required”/> 密码：<input type="password" placeholder="密码框"/>

单选框架：<label> <input type="readio" value="man" name="sex" id="man">男</label>  <input type="radio" value="woman" name="sex" id="woman"/><label fox="woman">女</label>

复选框架：兴趣爱好<label><input type="checkbox" name="hobby"/>听歌 </label>

<label><input type="checkbox" name="hobby"/>写字 </label>

<label><input type="checkbox" name="hobby"/>运动 </label>

下拉框架：科目<select><option value>语文</option>

<option value>数学</option>

<option value>英语</option>

</select>

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

<iniput type="button" value="取消">

文件类型的input：<input type="file" id=" " value=" "/>

多行输入：textarea <textarea placeholder="输入多行内容"></textarea>

按钮标签：<button></button>

块级元素：<div style="background; 颜色"width;宽度，height；高度/> 内容 </div>

段落元素：<p></p> 定义一段文字。

语义化标题，跟随数字增大标题大小:<h1-h6>

有序列表：<ul> <li></li> </ul>

无序列表：<ol><li></li></ol>

表格table:<table bordr="  px"  cellpadding="  px"  cellpadding=" ">

</thead>

<tr><th></th></tr>

<th><tr></tr></th>

</thead>

htmkl新增标签

1.section：独立内容区块，可以用h1到h6组成大纲，表示文档结构，也可以有章节，页眉，页脚，或页眉的其他部分、

2.article：特殊独立区块，表示这篇页眉中的核心内容

3.aside：标签内容之外与标签内容相关的辅助信息

4.header：某个区块的头部信息/标题

5.footer:底部信息

6.nav导航条部分信息

2.媒体标签

（1）video：视频；<video src=" video/coens.mp4" controls="controls" preload=" auto" loop=" loop">您的浏览器不支持</video>

(2.)audio音频<atdio src="ocans.mp4" controls="controls"> 您的浏览器不支持</audio>

HTML+CSS基础学习标签代码的更多相关文章

  1. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  2. HTML&CSS基础-html标签的实体

    HTML&CSS基础-html标签的实体 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html&g ...

  3. HTML&CSS基础-meta标签

    HTML&CSS基础-meta标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.常见字符集 1>ASCII 我们知道计算机是由外国人发明的,他们当时也没有考虑到 ...

  4. C#学习笔记8：HTML和CSS基础学习笔记

    <!-- 1.<P>...</P>段落标签 2.<br/>折行标签. 3.<img src="" height="*px& ...

  5. HTML&CSS基础学习笔记1.25-input标签隐藏元素

    隐藏元素 有时候我们编写前端代码的时候,可能需要把一些数据告诉后台,但是这些数据又不想让用户看到,我们可以设置<input>标签的[type]属性为"hidden". ...

  6. HTML&CSS基础学习笔记1.24-input标签的单选与多选

    单选和多选 单选框和多选框是用<input>标签来实现的. <input>标签的type属性值为"checkbox"时,表示多选框,为"radio ...

  7. HTML&CSS基础学习笔记1.21-语义化标签

    语义化标签 “语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益. HTML 标签语义化是让大家直观的认识标签和属性的用途和作用,很明显<hx ...

  8. HTML&CSS基础学习笔记1.5-添加常用标签

    代码如下: <!DOCTYPE html><html lang="en"><head>    <meta charset="UT ...

  9. HTML&CSS基础学习笔记1.20-DIV标签2

    <span>标签 标签div把文档分割为独立的.不同的部分,而在HTML中,<span>标签则被用来组合文档中的行内元素. 看个实例: <!DOCTYPE html> ...

随机推荐

  1. Matlab R2017b 关联 .m 和 .fig 文件

    1. 前言 安装「Matlab R2017b」后,无法关联.m和.fig文件,每次需要在MATLAB里边打开,而不能之间点击.m文件打开,十分麻烦. 2. 解决方案 1.首先,在Matlab R201 ...

  2. SQL——INSERT INTO（增）

    一.INSERT INTO语句的基本用法 INSERT INTO 语句用于往表中插入新记录. student表: INSERT INTO语句有2种语法格式: 1.不指定列名,直接插入记录. 语法格式如 ...

  3. django类视图as_view()方法解析

    使用视图函数时,django完成URL解析之后,会直接把request对象以及URL解析器捕获的参数(比如re_path中正则表达捕获的位置参数或关键字参数)丢给视图函数,但是在类视图中,这些参数不能 ...

  4. sqlserver case when 的使用方法

    sql使用case when then 判断某字段是否为null没效果 CASE columnName WHEN null THEN 0 ELSE columnName END虽然columnName ...

  5. CCF 2017-03-1 分蛋糕

    CCF 2017-03-1 分蛋糕 题目 问题描述 小明今天生日,他有n块蛋糕要分给朋友们吃,这n块蛋糕(编号为1到n)的重量分别为a1, a2, -, an.小明想分给每个朋友至少重量为k的蛋糕.小 ...

  6. PCA(Principal Component Analysis)笔记

    PCA是机器学习中recognition中的传统方法,今天下午遇到了,梳理记一下 提出背景: 二维空间里,2个相近的样本,有更大概率具有相同的属性,但是在高维空间里,由于样本在高维空间里,呈现越来越稀 ...

  7. Vue.js 教程 -- 实例讲解

    一. Vue.js是什么 Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项目整合. 1.1 Vue.js的目的 ...

  8. 【亲测有效】vs2017无法断点

    解决方案: 一:设置为Debug模式 二:[工具]--[选项]--[调试]--[常规],取消打钩[要求源文件与原始版本完全匹配]

  9. 【leetcode】266. Palindrome Permutation

    原题 Given a string, determine if a permutation of the string could form a palindrome. For example, &q ...

  10. Python函数Day1

    一.函数的初识 函数的定义:函数最主要的目的是封装一个功能,一个函数就是一个功能 定义函数的格式: def 函数名(): 函数体 def my_len(): count = 0 s1 = 'hahah ...