一、HTML5常用标签

<i>倾斜</i>
<u>下滑线</u>
<s>删除线</s>
<b>加粗</b><strong>加粗</strong>
<!-- 语义：强调语义的好处 -->
<em>em</em>
<ins>ins</ins>
<del>del</del>
<a href="##"><font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">假链接## </font></font>

无序列表标签（布局中的新闻标题列表，文章标题列表，可链接具体内容）

<ul>
      <li>列表标题</li>
  </ul>
  list-style 无序列表中小圆点   设为"无"list-style:none
表格元素及相关样式
<table>声明一个表格
<tr>定义表格中的一行
<td><th>定义一行中的一个单元格
  td普通单元格    th表头单元格
  常用属性：colspan 设置单元格水平合并，设置值是数值
      rowspan 设置单元格垂直合并，设置值是数值
表格的边线合并border-collapse:collapse;

二、css

2.1、css嵌入式
<style>
    大括号里面放css键值对：k:v;
    h2{ color:red; font-size: 12px;}
</style>

 <h2>风华绝代小浪浪</h1>
2.2、css行内式
<h2 style="color: red; font-size: 60px;">风华绝代小浪浪</h2>
2.3、外链式
<link rel="stylesheet" type="text/css" href="css/feng.css">

css常用选择器

  1. 标签选择器（用来通用设置）
div{color:red} 
<div>一个div</div>   <!-- 对应以上样式 -->
<div>二个div</div>   <!-- 对应以上样式 -->
  1. 类选择器（类名来选择元素，一个类可用多个元素，一个元素也可用多个类，应用最多的选择器）
.red{color:blue}
.big{font-size:15px}
.box{width:120px;height:1120px;background:gold} 
......
<div class="red">....</div>
<h2 class="red big box">....</h2>
<p class="red box">....</p>
  1. id选择器（id不能重复，不推荐）
#box{color:red} 
  <p id="box">标签</p> 标签有唯一的id名

css属性

布局常用样式属性
width 设置元素(标签)的宽度
height 设置元素(标签)的高度
background 设置元素背景色或者背景图片，
border 设置元素四周的边框border:1px solid black;1像素宽黑色实线边框
border-top 设置顶边边框，如：border-top:10px solid red;
      border-left 左边边框
      border-right 右边边框
      border-bottom 底边边框
padding 内容和元素边框的距离padding:20px;设4个边
      padding-top
      padding-left
      padding-right
      padding-bottom
margin 设置元素和外界的距离margin:20px;
      margin-top
      margin-left
      margin-right
      margin-bottom
float 元素浮动让块元素排列在一行，左浮动：float:left; 右浮动：float:right
文本常用样式属性
color 文字颜色
font-size 文字大小
font-family 文字字体
font-weight 文字是否加粗
font-weight:bold; 加粗 
font-weight:normal 不加粗
line-height文字行高
text-decoration 文字下划线   text-decoration:none; 去掉下划线
text-align 文字水平对齐方式   text-align:center 文字水平居中
text-indent  文字首行缩进     text-indent:24px
font-style 字体是否倾斜           font-style:'normal'; 不倾斜，font-style:'italic';倾斜
font：是否加粗 字号/行高字体；      font:normal 12px/24px '微软雅黑';

相对地址

引入外部图片      <img src="images/001.jpg" alt="图片" />
链接到另外一个网页   <a href="002.html">链接到网页2</a>
外链一个css文件   <link rel="stylesheet" type="text/css" href="css/main.css" />
外链一个js文件      <script type="text/javascript" src="js/jquery.js"></script>
当前文件所在目录下    ./
当前文件所在目录下的上一级目录  ../

两张图片排在一起的

<div class="imgbox">
    <img src=""><img src="">
</div>

代码如上所示dao，图片默认是竖du直排列，你想要的应该是水zhi平横排dao列，只需要在回css中添加如下样式

imgbox{overflow:hidden;}
.imgbox img{float:left};

Html基础(一)_python