HTML实训学习代码

     1.块标签或者称为块元素
            特点：默认独占一行
            div   ul li  无序列表    ol li  有序列表    dl dt dd  自定义列表     p 段落标签
            h1      标题标签，h1通常在网页中只出现一次，通常在网站logo部           hr    水平线
            定义表格的盒子     table      
             tr 定义行   th 定义表头     td 定义列   
            bordercolor="red"  定义表格的边框颜色
            cellspacing="0"    指的是单元格和单元格之间的距离
            cellpadding="20"   指的是内容和边框之间的距离
            rowspan="2"  合并2行         colspan="2"  合并2列    
        <!--行内标签或者称为内敛标签
            特点：默认在一行显示
            行内标签         span  无意义          i 斜体      em 斜体         strong  加粗     b 加粗      sup  上标        sub  下标    del 删除线
              mark 标记       big  大的     small 小的    br 换行       a  超链接   img 图片标签    ins 插入标签     u 下划线 
             input输入框    select  下拉选择框
             a  超链接标签   target="_blank" 新窗口打开   target="_self"   在本窗口打开    
            label 使用label标签的for属性关联input type="radio"中的id，可以在label中添加文字点击文字选中
            <input type="radio" name="sex" id="nan"  /> 
            <label for="nan">男</label>
        链接：
        <a href="https://www.baidu.com" target="_blank">百度</a>
        <img src="images/1.jpg" title="鼠标移动到图片上边，提示文字"/>
        <img src="images/2.jpg" alt="图片加载失败，用文字来代替图片显示" title="hello"/>
2.表单    表单提交方式：post get     
        <form action="">
        去掉文本原来轮廓线 outline:none
  文本框：<input type="text" name="username" placeholder="请输入用户名" />  <!--单行文本输入框-->
        <input type="password" placeholder="请输入密码" />  <!--密码框-->
  复选框：<input type="checkbox" id="music" checked="checked"/> <!--复选框-->默认选中checked="checked"
        <label for="music">音乐</label>
  单选框 :<input type="radio" id="sex" checked="checked"/>   单选框   默认选中checked="checked"
        <label for="sex">男</label>
   扩大点击区域:  label 使用label标签的for属性关联input type="radio"中的id，可以在label中添加文字点击文字选中
            <input type="radio" name="sex" id="nan"  /> 
            <label for="nan">男</label>
  下拉选择框: <select name="">
                <option value="">洛阳</option>
                <option value="">郑州</option>        
                <option value="" selected="selected">商丘</option>  <!--selected="selected" 默认选中-->
            </select>         
    按钮:  <input type="button" value="普通按钮" />
        <input type="reset" value="重置按钮" />
        <input type="submit" value="提交按钮" />
        </form>
   多行文本输入框 ：    textarea  定义多行文本输入框      rows   定义可见行      cols   定义可见列
            <textarea name="" rows="10" cols="100"></textarea>
3、css
      内部引入
        <style type="text/css">
        </style>
      外部引入
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
      行内引入
        <div style="color: red;">我是行内引入样式修饰的</div>
4、盒子设置
     background: pink;  背景色设置      border: solid 10px black;/ 设置边框   solid实线  10像素宽   颜色为black黑色*/
    solid实线 dashed虚线 dotted点线 double双实线
     border-radius: 50%; 设置边框的弧度  50%指的是半径*/  内填充:padding: 30px;  外填充:margin: 20px; line-height: 20px; 行高设置*/
5、文本设置
     文本:   vertical-align: middle;垂直居中对齐*/   white-space: nowrap;设置文本不换行*/  文本缩进:text-indent: 4em;    
    文本颜色:color   文本大小:font-size: 20px;  加粗:font-weight: bold;  text-decoration: none;去下划线    text-align: right;文本方向向右
6、 阴影:text-shadow: 1px 1px 1px red,    盒子是box-shadow:
7、背景图片:  background-repeat: no-repeat  不重复         背景图片位置设置:background-position: center center; 水平和垂直方向居中显示
           background-size:第一个值是水平方向  第二个值是垂直方向;
        margin: 0px auto;水平居中
         overflow: hidden;垂直居中
         clear: both;设置一堵墙，防止下面浮动上去
                  鼠标经过显示颜色.box:hover{
                            background-color: #f00;
                        }
         背景图片缩写：background: url(images/addr.png) no-repeat left center;