一、HTML基本标签
标签分类:块级标签和行内标签;自闭合标签和非自闭合标签;等等。
基础标签:
head:meta,title,link,type,script
body:h, p, br, div, span, a, form, input, lable, textarea, select, option, ul, ol, dl, li, dt, table, thead, tbody, tr, th, td, fieldset, legend,
<!DOCTYPE html> <!-- 不是一个HTML标签,它是用来告知web浏览器使用的HTML版本 -->
<html lang="zh-cn">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/> <!--设置字符集-->
<meta http-equiv="Refresh" content="30" /> <!--每30秒刷新页面-->
<meta http-equiv="Refresh" content="5,Url=http://www.baidu.com" /> <!--5秒后跳转到网页-->
<meta name="keywords" content="关键字信息1,关键字信息2,关键字信息N" /> <!--关键字信息-->
<meta name="description" content="描述信息1,描述信息2,描述信息N" /> <!--描述信息-->
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" /> <!--IE兼容-->
<title>网站名称</title> <!--网站标题显示信息-->
<!--<meta property="og:description" content="Day1 - Python基础1 介绍、基本语法、流程控制 Day2 - Python基础2 列表、字典、集合 Day3 - Python基础3 函数、递归、内置函数 Day4 - Pyth" />-->
<!--<link type="text/css" rel="stylesheet" href="/bundles/blog-common.css?v=giTNza-Of-PEt5UsELhFQAR7G6-bfaSa4oolcq7i9-o1"/>-->
<link rel="icon" href="icon路径"/> <!--网站图标-->
<!--<link id="MainCss" type="text/css" rel="stylesheet" href="/skins/SimpleBlue/bundle-SimpleBlue.css?v=0qK9u742QhZ2ygXQ2XvDKUpwAJ6TPVAq3vGGNZD4Qx81"/>-->
<!--<link type="text/css" rel="stylesheet" href="/blog/customcss/214271.css?v=ODe5WmG%2bltDcEYVCzhwetY8uopE%3d"/>-->
<!--<link id="mobile-style" media="only screen and (max-width: 767px)" type="text/css" rel="stylesheet" href="/skins/SimpleBlue/bundle-SimpleBlue-mobile.css?v=NNDA5QyCVOryYTTnKs-Bji3iJtsOwZNbIf8Qs7hMnyE1"/>-->
<!--<link title="RSS" type="application/rss+xml" rel="alternate" href="https://www.cnblogs.com/alex3714/rss"/>-->
<!--<link title="RSD" type="application/rsd+xml" rel="EditURI" href="https://www.cnblogs.com/alex3714/rsd.xml"/>-->
<!--<link type="application/wlwmanifest+xml" rel="wlwmanifest" href="https://www.cnblogs.com/alex3714/wlwmanifest.xml"/>-->
<!--<script src="//common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>-->
<!--<script type="text/javascript">var currentBlogApp = 'alex3714', cb_enable_mathjax=false;var isLogined=true;</script>-->
<!--<script src="/bundles/blog-common.js?v=fobKU6DuMF7uNOMKEOEwhhLiN2dvU4IL2UfTDgUZOsY1" type="text/javascript"></script>-->
</head>
<body>
<!--标签分类:块级标签,占整行;行内标签,占实际长度-->
<h1>1号标题最大,6号标题最小,特性自动加大加粗</h1>
<p> 段落标签,段落间有间距;  <br/>空格+换行 </p> <!--网站标题显示信息-->
<!--图标:空格  大于符号> 小于符号<-->
<div>块级标签:特性,白板,无格式</div>
<span>行内标签,特性白板无格式</span>
<form enctype="multipart/form-data" action="server ip" method="get">
<!--form + input系列标签 textarea select 实现与后台数据表单提交-->
<!--GET POST的区别,get在地址栏可见,post不可见-->
<div>
<label for="in1">用户名</label>
<input id="in1" type="text" name="user" value="赵云"/>
<label for="in2">密码</label>
<input id="in2" type="password" name="pwd" />
<input type="button" value="普通按钮"/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<!--for+id 实现点击光标选中ID功能;表单以字典的形式提交,注意type属性-->
</div>
<div>
<label>性别</label><br/>
<label>男:</label>
<input type="radio" name="XB" checked="checked" value="男"/>
<span> </span>
<label>女:</label>
<input type="radio" name="XB" value="女" /><br/>
<label>爱好</label><br/>
<label>篮球</label>
<input type="checkbox" name="loving" checked="checked" value="篮球"/>
<label>排球</label>
<input type="checkbox" name="loving" checked="checked" value="排球"/>
<label>足球</label>
<input type="checkbox" name="loving" value="足球"/><br/>
<label>上传文件</label>
<input type="file" name="fielname" /><br/>
<!--单选框,name相同则互斥;checked="checked"实现默认选择;上传文件须依赖form的enctype="multipart/form-data"属性-->
<label>备注-多行文本框</label>
<textarea name="text1">输入内容</textarea>
</div>
<div>
<label>地市-下拉复选框</label>
<select name="city" >
<!--<select name="city" multiple="multiple">-->
<option id="ct1" value="成都">成都</option>
<!--<optgroup label="川南"></optgroup>-->
<option id="ct2" value="自贡">自贡</option>
<option id="ct3" value="宜宾">宜宾</option>
<option id="ct4" value="乐山">乐山</option>
<option id="ct5" value="凉山">凉山</option>
</select>
<!--select的size属性设置显示多少个选项;optgroup分组,无法选择;multiple="multiple"可多选-->
</div>
</form>
<div>
<label>超级链接</label>
<a href="https://www.baidu.com/">
<img src="ASCII码表.png" alt="美女" title="点为到百度" style="height: 50px;"/>
</a><br/>
<label>锚点功能</label>
<a href="#某个标签的ID">跳转到当前页面的某个标签,书签功能</a>
</div>
<div>
<label>列表1</label><br/>
<ul>
<li>1111</li>
<li>2222</li>
</ul>
<label>列表2</label><br/>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
<label>列表3</label><br/>
<dl>
<dt>1234</dt>
<li>1111</li>
<li>2222</li>
<dt>4321</dt>
<li>3333</li>
<li>4444</li>
</dl>
<label>表格</label><br/>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>收入</th>
</tr>
</thead>
<tbody>
<tr>
<td>刘备</td>
<td rowspan="2">29</td>
<td>男</td>
<td>100</td>
</tr>
<tr>
<td>张飞</td>
<td>男</td>
<td>100</td>
</tr>
<tr>
<td>赤兔马</td>
<td colspan="2">29</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
<div>
<label>fieldset标签</label><br/>
<fieldset >
<legend>登录</legend>
<label>fieldset</label><br/>
<label>fieldset</label>
</fieldset>
</div>
</body>
二、CSS基本样式
样式选择器:id选择器、class选择器、标签选择器、层级选择器、组合选择器、属性选择器
通过link标签调用单独的.css样式文件 <link rel="stylesheet" href="style_file.css" />
.c1:hover{ }
基本样式:color, height, width, border: 1px solid red, font-size, font-weight:bold;
foalt, margin: 0 auto; padding, position: fixed; position : relative + position: absolute;
overflow: auto/hidden; z-index, opacity, background-image:url=""; background-repeat; background-position-x;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css样式</title>
<link rel="stylesheet" href="style_file.css" /> /*将样式单独写在.css文件中,通过link标签调用*/
<style>
#i1{ /*id 样式选择器*/
color: red;
}
.c1{ /*class 选择器*/
height: 200px;
}
.c2{
width: 400px;
}
div{ /*标签 选择器*/
background: aqua;
}
.c1 .c2 div{ /*层级 选择器*/
background-color: blue;
}
#i1,.c2,.div{ /*组合 选择器*/
background-color: yellow;
}
.c1[id="new"]{ /*属性 选择器*/
background-color: blue;
}
/*样式优先级:标签上的style优先,与编写顺序有关,即就近原则*/
.cc1{
height: 200px;width: 80%;border: 1px solid red;border-radius: 50%;
/*高:xx像素;宽:xx像素/50%;边框:x像素 solid实线/dotted虚线 颜色;圆*/
text-align: center;line-height: 200px; /*文字 水平方向居中,垂直方向居中(与标签高度一致)*/
font-size: 16px;font-weight: bold;color: white/*字体大小;字体加粗;字体颜色*/
}
.cc1:hover{ /*当鼠标移动到应用CC1样式的标签上时,执行此样式*/
background-color: yellow;
}
</style>
</head>
<body>
<div>
<label id="i1" class="c1 c2" style="background-color: black;">CSS example</label>
<label id="new" class="c1" >欢迎</label>
</div>
<div class="c1">
<a class="c2">
<div>HELLOOOOO</div>
</a>
<span CLASS="c1">HELLO</span>
</div >
<div style="background-color: antiquewhite" >
<div id="22" class="cc1" style="float: left" >adasdad</div>
<div id="23" style="float: left;width: 18%" >asdad</div>
<div style="clear: both" ></div> /*float之后,通过设置该样式使被底层标签包含*/
</div>
<div>
<span style="display: block;margin: 0 auto;padding: 2px" ></span>
</div> /*margin:外边距 margin: 0 auto 垂直边距为0,水平居中,padding:内边距*/
/*display:block行内标签变为块级标签;inline块级标签变为行内标签;none标签不显示;
inline-block同时具有行内和块级标签的属性,即行内标签,但又可以设置长宽高边距等属性
注意:行内标签无法设置长宽高边距等属性*/
<div style="position: fixed;bottom: 0;right: 0;z-index: 7;">TOP</div>
/*固定标签在浏览器的某个位置,即实现标签的分层; 分层显示顺序,z-index越大,显示越靠前*/
<div style="position: relative;z-index: 9;opacity: 50%;overflow: auto">
/*opacity: 50% 透明度 overflow: auto 内部标签比外部标签大时增加滚动条;overflow: hidden 隐藏*/
<div style="position: absolute;top: 0px;left: 0px;"></div>
</div> /*position: relative + absolute 固定标签到父类标签的某个位置,注意与position: fixed 的区别*/
<div style="background-image: url('图片路径');background-repeat: repeat-y;background-position-x: 10px" >
background-repeat:重复,x,y,no-repeat;background-position-x:移动北京图的位置 x,y
</div>
</body>
</html>
参考文章: