一个菜鸡的HTML标签备忘录【点进来可能瞎眼】

常用知识点:

<!DOCTYPE html>
<html lang="zh-CN"><!-- 标识html语言为中文-->
<head><!--  注释的内容，推荐网站：https://www.runoob.com/tags/tag-div.html ，在线运行html代码链接:https://www.runoob.com/try/try.php?filename=tryhtml_hr_test--><meta charset="UTF-8"><!-- 标识网页编码--><meta name="keywords" content="学习作业，博客，教程，学习，资源"/><!-- 标识网页搜索关键字--><!--<meta http-equiv="Refresh" Content="3;Url=http://www.xuexizuoye.com"/>--><!-- 网页跳转到指定网站，延时三秒--><title>学习作业</title><!-- 标识网页标题--><link rel="stylesheet" href="css/float_test.css"><style>/*标签选择器*/body{background: #ffffff;}/*id选择器*/#spanid1{background: #332211;}/*class选择器*/.spanclass1{background: aqua ;}/*层级选择器*/.spanclass2 #divid0{background: blue;}/*组合选择器*/.spanclass2 #divid1, #divid2{background: #255555;}/*属性选择器*/.spanclass2 div[id="divid3"]{color:greenyellow;}</style>
</head>
<body><!-- 标签之间可以嵌套-->
本行：不用标签之间在body里面写也没问题，但代价是无法标识，后期无法使用css样式美化，也不好维护。
<hr><!-- 水平线标签，分开展示效果-->
<p>p标签效果展示<br/>换行符，&nbsp;&gt;&lt;展示效果</p><!-- 块级标签p创建一个段落，
br换行符号，&nbsp;空格,&gt;是'<'符号，&lt;是">"符号-->
<hr><!-- 水平线标签，分开展示效果-->
<h1 id="h1">h1标签展示</h1><!--块级标签 <h1> - <h6> 标签被用来定义 HTML 标题。<h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。-->
<h2>h2标签展示</h2>
<h3>h3标签展示</h3>
<h4>h4标签展示</h4>
<h5>h5标签展示</h5>
<h6>h6标签展示</h6>
<hr><!-- 水平线标签，分开展示效果-->
<span>span行内标签效果展示</span>
<span>span行内标签效果展示</span>
<span>span行内标签效果展示</span>
<span>span行内标签效果展示</span>
<hr><!-- 水平线标签，分开展示效果-->
<div>div块级标签效果展示</div><!-- <div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。<div>标签常用于组合块级元素，
以便通过 CSS 来对这些元素进行格式化。提示：<div> 元素经常与 CSS 一起使用，用来布局网页，所以非常常用。
用来排版大块HTML段落,也用于格式化表-->
<hr><!-- 水平线标签，分开展示效果-->
<form action="https://www.sogou.com/web" enctype="multipart/form-data"><!-- form表单标签，用于创建供用户输入的 HTML 表单。包含一个或多个如下的表单元素，表单元素脱离form表单也能显示出来，
但是将会无法提交，若想真正将数据发送给服务器，必须包裹在表单标签里，并在表单标签中加入指定属性action="规定当提交表单时向何处发送表单数据的URL"，
method="post"/"get"标志着HTTP提交的方式[post默认提交数据格式:{'text_name标签名字': '用户输入的用户','password_name标签名字': '密码' }]
表单元素有以下几种：
输入框/带标题的文本框-text是单行文本框
按钮-button，多选框/复选框-checkbox，单选框-radio，通用对话框-file[用于上传文件来获取文件名]-需要在form标签加入属性:
enctype="multipart/form-data"[byte数据] 或者 application/x-www-form-urlencoded[字符串数据]
下面的不是input所属type，而是另一类，用法举例:<textarea name="meno" >asdfasdf</textarea>
下拉框-select[size="10" multiple="multiple"，直接显示十个选项]，包含:通过 <optgroup> 标签把相关的选项组合在一起[可忽略，用于标识分类]：选项则是<option>
textarea是多行文本框。-通过size属性指定显示字符的长度，value属性指定初始值，Maxlength属性指定文本框可以输入的最长的长度；
<fieldset>-分组框，用于画出轮廓来分组
<label>-标签
--><input type="text" name="text_name标签名字" value="text-value"/><input type="password" name="password_name标签名字" value="password-value"/><input type="button" name="button_name标签名字" value="button按钮-value"/><input type="submit" name="submit_name标签名字" value="submit按钮-value"/><hr><!-- 提交链接和参数用?隔开，多个参数直接用&连接，参数name=参数value的方式提交参数--><input type="text" name="query" value="get方式测试"/><!-- get数据:https://www.sogou.com/web?text_name标签名字=text-value&password_name标签名字=password-value&query=get方式测试 --><input type="submit" value="搜索"/><hr><div><textarea name="textarea">textarea</textarea><select><optgroup label="game"><option value="cf">cf</option><option value="csgo">csgo</option></optgroup><optgroup label="it-language"><option value="python">python</option><option value="java">java</option></optgroup></select><p>请选择性别：</p>男：<input type="radio" name="gender" value="1"/>女：<input type="radio" name="gender" value="2" checked="checked"/>Alex：<input type="radio" name="gender" value="3"/><p>爱好</p>篮球：<input type="checkbox" name="favor" value="1"/>足球：<input type="checkbox" name="favor" value="2" checked="checked"/>皮球：<input type="checkbox" name="favor" value="3"/>台球：<input type="checkbox" name="favor" value="4" checked="checked"/>网球：<input type="checkbox" name="favor" value="5"/><p>技能</p>撩妹：<input type="checkbox" name="skill" checked="checked"/>写代码：<input type="checkbox" name="skill"/><p>上传文件</p><input type="file" name="fname"/></div>
</form>
<hr><!-- 水平线标签，分开展示效果-->
<a href="http://www.xuexizuoye.com">学习</a><!-- 链接标签，链接指定网页或充当锚点[比如点击目录跳转指定页]-->
<a href="#h1">a标签锚点展示</a>
<hr><!-- 水平线标签，分开展示效果-->
<img src="resourse\1.jpg" alt="美女图片展示" title="美女标题" style="height:60px;width: 80px;">
<hr>
<ul><li>asdf</li><li>asdf</li><li>asdf</li><li>asdf</li>
</ul><ol><li>asdf</li><li>asdf</li><li>asdf</li><li>asdf</li>
</ol><dl><dt>ttt</dt><dd>ddd</dd><dd>ddd</dd><dd>ddd</dd><dt>ttt</dt><dd>ddd</dd><dd>ddd</dd><dd>ddd</dd>
</dl>
<hr>
<table border="1"><tr><td>主机名</td><td>端口</td><td>操作</td></tr><tr><td>1.1.1.1</td><td>80</td><td><a href="sock\index.html">查看详细</a><a href="#">修改</a></td></tr><tr><td>1.1.1.1</td><td>80</td><td>第二行，第3列</td></tr>
</table><table border="1"><thead><tr><th>表头1</th><th>表头1</th><th>表头1</th><th>表头1</th></tr></thead><tbody><tr><td>1</td><td colspan="3">1</td></tr><tr><td rowspan="2">1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody>
</table>
<hr>
<fieldset><legend>登录</legend><label for="username">用户名：</label><input id="username" type="text" name="user"/><br/><label for="pwd">密码：</label><input id="pwd" type="text" name="user"/>
</fieldset>
<hr>
<!--下面进入css样式学习啦.
div在开发中很常见，一般指盒子或者叫容器，是放入内容的，至于内容可以是图片、文字等所有的东西。
通常，喜欢用属性：class，而不是Id,原因大概是class可以指一类，方便多个管理，而id是单个代号，不利于大局上进行维护和处理。
---------------------------------------------------------------------------------------------------------------
CSS盒子模型：所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
----------------------------------------------------------------------------------------------------------------
css插入方式：
A.外部样式表:
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。
每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
B.内部样式表:
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
C.内联样式:
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
---------------------------------------------------------------------------
优先级问题：
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
h3
{color:red;text-align:left;font-size:8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：
h3
{text-align:right;font-size:20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red;
text-align:right;
font-size:20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
_______________________________________________________________________________________________________________________
style 是样式的意思 而css和style是一样的作用
就是对网页 上 文字 的 字体 颜色 大小
图片的 大小 相对距离 层次
以及其他东西的样式
包含的常用属性有：height，高度 百分比；width，宽度 像素 百分比；text-align:center，水平方向居中；
line-height，垂直方向根据标签高度；color，字体颜色；font-size，字体大小；font-weight 字体加粗
重点:
1.float，让块级标签可以堆叠而不是占一行。
float后需要给外面标签加上：style="slear:both;"来控制住float的标签。
2.dispaly,可以让标签不显示[none]/行内转块级[inline]/块级转行内[block]/既有inline属性[行内标签有多少占多少]又有块级属性[可设置宽度，高度，padding margin]
----------------------------------------------------------------------
用法示范:
1.<style type="text/css">/*注意，用style的时候应该放在head标签里面，而不是Body*/
p/*注意，有多种用法，指定id:#id[id选择器]，指定class:.class[class选择器]，指定标签:标签名就行[标签选择器]，
嵌套标签里的标签:外面标签名/id/class+空格+id/class/标签[层级选择器]，多个id：id1,id2,id3.../多个class：cl1,cl2,cl3...[组合选择器]，
属性选择器：input[type='text']/id[type='text']/class[type='text']等       */
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
</style>//这里放各种定义的css样式
2.<h1 style="也是css属性"> 傻逼幻生</h1>
但是假如同时存在这两种，优先最近的style属性里的，而不是style标签定义的
----------------------------------------------------------------------
CSS声明总是以分号(;)结束，声明总以大括号({})括起来:每行只描述一个属性[建议]:
CSS注释:/*这是个注释*/
-->
<div style="background-color: aqua;height: 48px;color: darkred;">简单的CSS示例</div><!--但这样有点Low，写死了，不利于维护，缺乏重用性-->
<div id="spanid1">css id选择器展示</div>
<div class="spanclass1">css class选择器展示</div>
<div class="spanclass2"><div id="divid0">div层级选择器效果展示</div><div id="divid1">div组合选择器效果展示</div><div id="divid2">div组合选择器效果展示</div><div id="divid3">div属性选择器效果展示</div>
</div>
<hr>
<div style="float:left;background: blue;width: 30%;">div float示范-左边</div>
<div style="float:right;background: red;width: 60%;">div float示范-右边</div>
<!--盒子模型实例-->
<br><hr><br>
<div style="width: 300px;padding: 10px;border: 5px solid gray;margin: 1px;background: green;">盒子模型示范</div>
<div class="div_float_div_cl" style="width: 210px;background: blueviolet;border: 1px solid red;"><div class="div_float_div_test_cl">飘起来</div><div class="div_float_div_test_cl">飘起来</div><div class="div_float_div_test_cl">飘起来</div><div class="div_float_div_test_cl">飘起来</div><div class="div_float_div_test_cl">飘起来</div><div class="div_float_div_test_cl">飘起来</div><div class="div_float_div_test_cl">飘起来</div><div class="div_float_div_test_cl">飘起来</div><div class="div_float_div_test_cl">飘起来</div><div class="div_float_div_test_cl">飘起来</div><div style="clear: both;"></div>
</div>
<!--行内标签无法设置高度宽度和padding margin-->
<span style="display: block;width: 100px;height: 100px;">span 转变成块级标签</span>
<span style="display: block;width: 100px;height: 100px;">span 转变成块级标签</span>
<span style="display: inline-block;width: 100px;height: 100px;">span 转变成复合标签</span>
<div style="display: inline-block;width: 100px;height: 100px;">div 转变成复合标签</div>
<div style="display: inline;width: 100px;height: 100px;">div 转变成行内标签</div>
<div style="display: inline;width: 100px;height: 100px;">div 转变成行内标签</div>
</body>
</html>

用到的CSS：

.div_float_div_test_cl
{background: blanchedalmond;color: darkred;float: left;width: 66px;height: 55px;border: 1px solid black;
}

学习->CSS 教程 | 菜鸟教程

一个菜鸡的HTML标签备忘录【点进来可能瞎眼】相关推荐

记录一个菜鸡的大一立项：做一个跑步打卡APP
记录一个菜鸡的大一立项:做一个跑步打卡APP(///▽///) 1. 思路: 2. 具体功能: [ 记录跑步时间.距离] [ 跑步计划制定] [ 跑步路程追踪] [ 跑步信息记录 ] [ 校园景点介绍 ...
怎么在一里以外识别出一个菜鸡程序员
作者 | Scott Shipp 译者 | 核子可乐当我还是菜鸡程序员时,我看到资深程序员们写的代码会觉得:"这也太傻了吧,毫无特点."当我工作经验渐长后,才发现自己还是太年轻, ...
一个菜鸡的ACM之路
花絮做为一个大三计软狗,那么菜,打完19年的区域赛,也没时间打20年的区域赛了吧.这个学期,是我的第一次,也是最后一次,打CCPC和ICPC,忙前忙后,共打了3场:打完后,又去赶各种死亡DDL:DD ...
一个菜鸡关于区块链的个人见解
区块链技术是比特币的底层技术,也是比特币存在的基础技术之一.现在我们所学习的区块链技术就是将其从比特币技术中分离出来,利用其特性来保障信息安全. 第六章主要描述了区块链的不可变性以及其可以记录大量设备 ...
一个菜鸡初入职场的一年
前言:失眠了,一失眠就容易想很多,仔仔细细回顾了自己初入职场一年来的工作生活,有很多收获也有很多遗憾,有意气风发的时候也有失落的时候,甚至还有PUA和迷茫. 一.初入职场,幸运之神眷顾我我是在大三下 ...
java面试换背景颜色_实习｜渣二本Java菜鸡0 Offer的春招血泪史，一定要主动去找实习呀！
作者:codingCoge 链接:https://www.nowcoder.com/discuss/177823 来源:牛客网前言: 一个菜鸡的春招血泪史,共勉到现在还是0offer 先玄学求一波 ...
laravel改代码没变化_菜鸡程序员是如何写代码的？
每个程序员都要历经从菜鸡到大牛过程蜕变胡过程.当初大家起点都差不多,工作多年后,有些人依然停留在菜鸡,有些人却已成为大牛,所有的事情,都是一点一滴习惯养成.让我们看看菜鸡程序员是如何写代码的?有可能找 ...
来自菜鸡的前端权限简单实现
写在前面:作为一个菜鸡,关于权限这一块,只接触了vue-element-admin.若依(前后端分离版)这两个后台模板,踩了很多坑以后,也摸索出了一点经验. 关于菜单动态渲染我使用了两个方法: 1. ...
一个一年工作经验的菜鸡程序员的一年总结
坎坷并且顺利的一年前言一.为什么会干这一行? 二.入职 1.被大佬照顾的小白 2.被浪潮拍死的弄潮儿 3.重新出世的大菜鸡回顾以前展望未来前言刚开始准备投入这个行业是2020年8月的时候,当 ...

一个菜鸡的HTML标签备忘录【点进来可能瞎眼】

一个菜鸡的HTML标签备忘录【点进来可能瞎眼】相关推荐

最新文章

热门文章