html 学习常用的html标签及使用

html是什么

超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。

本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）

网页文件的扩展名：.html或.htm

http不是什么

HTML是一种标记语言（markup language），它不是一种编程语言。

HTML使用标签来描述网页。不像python编程语言一样，有逻辑什么的，这个标记语言是没有逻辑的

html标签：超文本标记语言就是标记用的

<!DOCTYPE html>声明为HTML5文档。

<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。

<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的。

<title>、</title>定义了网页标题，在浏览器标题栏显示。

<body>、</body>之间的文本是可见的网页主体内容。

html 标签分类

内敛标签（行内标签）：不独占一行 b\i\u\s\button\span\img\a

块级标签（行外标签）：自己独占一行

\h1-h6\br\hr\p\div

p标签:不能嵌套p标签,也不能嵌套块级标签

html常用标签

标签	意义
<title></title>	定义网页标题
<style></style>	定义内部样式表
<script></script>	定义JS代码或引入外部JS文件
<link/>	引入外部样式表文件
<meta/>	定义网页原信息

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com"> #如果把URL和后面的内容去掉，就是2秒钟刷新一次，这些内容了解一下就行
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微软的一个全新的浏览器,其实就是告诉IE浏览器，你按照最高标准来渲染我的页面，了解一下就可以啦

name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> #关键字，也就是别人是可以通过这些关键字搜索到我的这个文章的，搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的
#SEO就是做这个的，就是怎么让你们公司的网站在别人搜索的时候能够靠前显示，不算那个花钱的，百度是充值的，你冲个20w，别人可能一天就给你点击完了，特别的贵<meta name="description" content="xxxxxpythonxxx学习"

img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

src的路径又分为两种：网上的一个图片路径和本地的一个相对图片路径

a标签

<a href="http://www.baidu.com" target="_blank" >点我</a>

target_blank 以一个新的页面打开百度

href 超链接地址

target_self 当前窗口打得开百度页面

ul 标签无序列表

    <ul type="square"><li>mike</li><li>hahah</li><li>shenji</li></ul>

type属性：

disc 实心圆点默认值
circle 空心圆圈

square 实心方块

none 无样式

ol标签有序列表

    <ol type="A" start="2"><li>heihei</li><li>haha</li><li>amy</li></ol>

type属性：start是从数字几开始

1 数字列表，默认值

A 大写字母

a 小写字母

Ⅰ大写罗马

ⅰ小写罗马

标题列表标签就像大纲一样，有一个层级效果

    <dl><dt>动漫&nbsp;&nbsp;人物</dt><dd>玛卡&lt;巴卡&gt</dd><dt>剧情人物</dt><dd>汤波荔波</dd></dl>

特殊字符

空格(html中默认是不显示空格的，也就是说通过空格键加了空格也没有多个空格的效果，加多少个都是显示一个空格效果，需要这些特殊字符才能显示出空格效果)
>	>
<	<
&	&
¥	¥
版权标识（写公司网站的时候会用到）	©
注册（一个圆圈里面有个R）	®

表格标签

    <table border="1px" cellpadding="10" cellspacing="20"><thead><tr><th>姓名</th><th>年龄</th><th>爱好</th></tr></thead><tbody><tr><td>alex</td><td>14</td><td>奥利给</td></tr><tr><td>mike</td><td>16</td><td>heiheihei</td></tr><tr><td>amy</td><td>17</td><td>mike</td></tr></tbody></table>

border  外边框的宽度

border: 表格边框宽度.
cellpadding: 内边距（内边框和内容的距离）
cellspacing: 外边距.（内外边框的距离）
width: 像素百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

input标签

name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读针对输入框
disabled：所有input均适用只能读不能写但是有一个黑框效果设置了readonly的标签,它的数据可以被提交到后台,设置了disabled的数据,是不能提交到后台的

form 表单触发提交数据的操作必须放在from表单里面卸载外面就是普通按钮

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

checked 默认选中当属性名和属性值相同时可以简写

 <form action="http://127.0.0.1:9001">用户名:<input type="text" name="username">密码:<input type="password" name="password"><input type="radio" name="sex" value="1">man<input type="radio" name="sex" value="2">woman<input type="checkbox" name="hobby" value="a"> 喝酒<input type="checkbox" name="hobby" value="b"> 唱歌<input type="checkbox" name="hobby" value="c"> 烫头<!--        <input type="submit">--><button>提交按钮</button><hr><input type="date"><input type="button" value="普通按钮"><input type="reset"><input type="file"></form>

select 标签

        <select name="city" id="" multiple><option value="1">北京</option><option value="2" selected>上海</option><option value="3">天津</option></select>

multiple：布尔属性，设置后为多选下拉框，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

label标签

        <label for="username">用户名</label><input id="username" type="text" name="username"><label>密码:<input type="password" name="password"></label>

　　label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本，那么和他关联的input标签就获得了光标，让你输入内容
　　<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

textarea多行文本

    <textarea name="memo" id="memo" cols="30" rows="10">默认内容</textarea>

html 学习常用的html标签及使用相关推荐

我的javaweb学习之旅--html常用块级标签
html常用块级标签常用的有p,h1~h6,div,ul 等 1.h1~h6 <body> <h1></h1> 一级标题 ...... <h6>& ...
【融职培训】Web前端学习第2章网页重构2 常用的html标签
一.HTML语法上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法. 1 <!DOCTYPE html>  ...
html 学习常用标签
首先学习html 要知道 html的标准格式是什么样子的 <html> <head>这里是放一些引用的<title>这里是放标题的</title> &l ...
HTML5学习之语义化标签
一.为什么HTML5要引入新语义标签在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
深度学习训练数据打标签过程
深度学习训练数据打标签过程为了获取大量的图片训练数据,在采集数据的过程中常用视频的方式采集数据,但对于深度学习,训练的过程需要很多的有有标签的数据,这篇文章主要是解决视频文件转换成图片文件,并加标签 ...
深度学习常用python库学习笔记
深度学习常用python库学习笔记常用的4个库一.Numpy库 1.数组的创建 (1)np.array() (2)np.zeros() (3)np.ones() (4)np.empty() (5) ...
python缺失值与异常值处理_pandas学习(常用数学统计方法总结、读取或保存数据、缺省值和异常值处理)...
pandas学习(常用数学统计方法总结.读取或保存数据.缺省值和异常值处理) 目录常用数学统计方法总结读取或保存数据缺省值和异常值处理常用数学统计方法总结 count 计算非NA值的数量 de ...
深度学习入门之Python小白逆袭大神系列（三）—深度学习常用Python库
深度学习常用Python库介绍目录深度学习常用Python库介绍简介 Numpy库 padas库 PIL库 Matplotlib库简介 Python被大量应用在数据挖掘和深度学习领域,其中使用 ...
深度学习常用工具-数据增强+绘图
深度学习常用工具 1. 数据增强工具-albumentations 2.绘图工具-matplotlib 1. 数据增强工具-albumentations 推荐这个库的原因是:这个库可以将图片和标签一起 ...

html 学习常用的html标签及使用

html是什么

http不是什么

html标签：超文本标记语言就是标记用的

html常用标签

img标签

a标签

ul 标签无序列表

ol标签有序列表

标题列表标签就像大纲一样，有一个层级效果

特殊字符

表格标签

input标签

select 标签

label标签

textarea多行文本

html 学习常用的html标签及使用相关推荐

最新文章

热门文章

html 学习 常用的html标签及使用

html是什么

http不是什么

html标签： 超文本标记语言 就是标记用的

html常用标签

img标签

a标签

ul 标签 无序列表

ol标签 有序列表

标题列表标签 就像大纲一样，有一个层级效果

特殊字符

表格标签

input标签

select 标签

label标签

textarea多行文本

html 学习 常用的html标签及使用相关推荐

最新文章

热门文章

html 学习常用的html标签及使用

html标签：超文本标记语言就是标记用的

ul 标签无序列表

ol标签有序列表

标题列表标签就像大纲一样，有一个层级效果

html 学习常用的html标签及使用相关推荐