1. 技术文章
  2. HTML基础

HTML基础

由 丶灬走出姿态 提交于 2020-01-10 00:45:12

1.h1~h6  p  b  i  br

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一个html页面</title>
</head>
<body>
<h1 align="right">这是h1</h1>
<h2 align="center">这是h2</h2>
<h3>这是h3</h3>
<h4>这是h4</h4>
<h5>这是h5</h5><h6>这是h6</h6>
<p align="center">段落1</p>
<p>段落2</p>
<p>段落3</p>
<!-- 字体加粗  和 斜体  br换行-->
<b>abc</b><br><i>abc</i> 
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 align="center">个人简历</h1>
<h2>基本信息</h2>
<p>姓名：苍老师</p>
<p>性别：男</p>
<p>爱好：男</p>
<h2>个人经历</h2>
<p>2019年最佳男演员<br>2019年男神评比底一名</p>
</body>
</html>

2.无须列表 有序列表 定义列表  列表嵌套

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>无序列表</h3>
<ul type="circle"><!-- unordered list -->
    <li>刘备</li><!-- list item列表项 -->
    <li>貂蝉</li>
    <li>程咬金</li>
    <li>孙尚香</li>
    <li>苍老师</li>
</ul>
<h3>有序列表</h3>
<!-- type序号类型 start起始值 reversed降序 -->
<ol type="1"
    reversed="reversed" 
    start="10"><!-- ordered list 有序列表 -->
    <li>打开冰箱门</li>
    <li>把大象装进去</li>
    <li>关上冰箱门</li>
    <li>啦啦啦</li>
</ol>
<h3>定义列表</h3>
<!-- 自带层级显示效果 -->
<dl><!-- 定义列表 -->
    <dt>凉菜</dt>  <!-- 定义术语 -->
    <dd>拍黄瓜</dd><!-- 定义描述 -->
    <dd>果仁菠菜</dd>
    <dd>芥末鸭掌</dd>
    <dt>炒菜</dt>
    <dd>鱼香肉丝</dd>
    <dd>宫保鸡丁</dd>
    <dd>猪肉炖粉条</dd>  
</dl>
<h3>列表嵌套</h3>
<!-- 有序列表和无序列表可以任意无限嵌套 -->
<ul>
    <li>凉菜
        <ol>
            <li>拍黄瓜</li>
            <li>花毛一体</li>
        </ol>
    </li>
    <li>炒菜
        <ol>
            <li>宫保鸡丁</li>
            <li>鱼香肉丝</li>
        </ol>
    </li>
</ul>
</body>
</html>

3.图片 img

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- src路径 -->
<img width="50%" title="漂亮不？" src="abc/1.jpg">
<!-- alt当图片不能正常显示时显示的文本 -->
<img alt="这是一张美女图片意淫一下吧" 
src="http://cdn.tmooc.cn/bsfile//courseImg///B9805366EB6914EC887629E182B3FB37B.png">
<img src="../imgs/2.gif">
</body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
    </head>
    <body>
        <a href="demo01.html">本地页面链接</a>
        <a href="http://www.tmooc.cn">TMOOC链接</a>
        <a href="../imgs/a.jpg">美女图片</a>
        <!-- 浏览器如果不支持浏览某文件则会触发下载 -->
        <a href="day01.zip">文件</a>
        <!-- 图片超链接 -->
        <a href="../imgs/1.jpg">
        <img src="../imgs/2.gif"></a>
    </body>
</html>

4.表格 table

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1"><!-- border 边框粗细 -->
    <!-- 表格标题 -->
    <caption>学生表</caption>
    <tr><!-- table head表头 -->
        <th>姓名</th><th>性别</th><th>年龄</th>
    </tr>
    <tr><!-- table row行 --><!-- table data表格数据 -->
        <td>1-1</td><td>1-2</td><td>1-3</td>
    </tr>
    <tr><!-- table row行 --><!-- table data表格数据 -->
        <td>2-1</td><td>2-2</td><td>2-3</td>
    </tr>
</table>
<table border="1"> 
    <tr>
        <td colspan="2" align="center">1-1</td>
        <td>1-3</td><td rowspan="3">1-4</td>
    </tr>
    <tr>
        <td>2-1</td><td rowspan="2">2-2</td>
        <td>2-3</td> 
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-3</td> 
    </tr>
</table>
<table border="1">
    <tr>
        <td colspan="2" align="center">1-1</td>
        <td rowspan="2">1-3</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td><td>2-2</td>
    </tr>
    <tr>
        <td align="center" colspan="2">3-2</td> 
    </tr>
</table>
</body>
</html>

5.表单 form

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- action提交地址 -->
<!-- 表单中的任何控件必须有name属性 -->
<form action="http://www.tmooc.cn">
    用户名:<input type="text" 
    placeholder="请输入用户名" name="username"><br>
    密码:<input type="password" 
    placeholder="请输入密码" name="password"><br>
    性别:<input type="radio" value="nan" name="gender">男
    <!-- checked默认选中  value提交的值-->
    <input type="radio" value="nv"
    checked="checked" name="gender">女<br>
    兴趣：<input type="checkbox" name="hobby" 
        value="cy">抽烟
        <input type="checkbox" checked="checked" name="hobby" 
        value="hj">喝酒
        <input type="checkbox" name="hobby" 
        value="tt">烫头<br>
    生日：<input type="date" name="birthday"><br>
    靓照：<input type="file" name="pic"><br>
    <!-- 下拉选 -->
    城市：<select name="city">
            <option value="bj">北京</option><!-- 选项 -->
            <!-- selected默认选中 -->
            <option value="sh" selected="selected">上海</option>
            <option value="gz">广州</option>
        </select><br>
    <input type="submit" value="注册">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
  <form action="http://www.tmooc.cn">
    <!-- cellspacing单元格间距 -->
    <table border="1" cellspacing="0"
       align="center">
       
      <caption>注册&nbsp;&nbsp;&nbsp;表单&lt;abc&gt;</caption>
      <tr>
        <td>用户名：</td>
        <td><input type="text" name="username"></td>
      </tr>
      <tr>
        <td>密码：</td>
        <td><input type="password" name="pw1"></td>
      </tr>
      <tr>
        <td>确认密码：</td>
        <td><input type="password" name="pw2"></td>
      </tr>
      <tr>
        <td>昵称：</td>
        <td><input type="text" name="nick"></td>
      </tr>
      <tr>
        <td>性别：</td>
        <td><input type="radio" name="gender" value="m">男 <input
          type="radio" name="gender" checked="checked" value="f">女</td>
      </tr>
      <tr>
        <td>爱好：</td>
        <td><input type="checkbox" name="hobby" value="cy">抽烟
          <input type="checkbox" name="hobby" value="hj">喝酒 <input
          type="checkbox" name="hobby" value="tt">烫头</td>
      </tr>
      <tr>
        <td>生日：</td>
        <td><input type="date" name="birthday"></td>
      </tr>
      <tr>
        <td>靓照：</td>
        <td><input type="file" name="pic"></td>
      </tr>
      <tr>
        <td>城市：</td>
        <td><select name="city">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="gz" selected="selected">广州</option>
        </select></td>
      </tr>
      <tr>
        <td>验证码：</td>
        <td><input type="text" name="yzm"> 
        <img width="40" height="20" 
        src="../imgs/2.gif"></td>
      </tr>
      <tr>
        <td colspan="2" align="center">
           <input type="submit" value="注册">
        </td>
      </tr>
    </table>
  </form>
</body>
</html>

6.div span

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>

7.层叠样式表 CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 内部样式 -->
  <style type="text/css">
  /* 标签名选择器：选择页面中所有同名的标签 */
    h3{
      background-color: yellow;
    }
    /* id选择器  */
    #myh4{
      color: purple;
    }
    /* 类选择器 */
    .c1{
      color: pink;
    }
    /* 分组选择器 
    将现有多个选择器通过逗号合并成一个选择器 */
    .c1,#myh4,h5{
      /* 1个像素的实线边框  */
      border: 1px solid red;
    }
  </style>
  <!-- 引入外部css文件 -->
  <link rel="stylesheet" href="first.css">
</head>
<body>
<h3 style="color: red;">今天是星期一，真困！</h3>
<h5 style="background-color: green;">
        该吃中午饭了，真饿！</h5>
<h3 style="color: red;">吃点儿啥？</h3>

<h4 id="myh4">好好学习</h4>
<h4>天天向上</h4>
<div class="c1">div1</div>
<div>div2</div>
<div>div3</div>
<span class="c1">span1</span>
<span>span2</span>
<span>span3</span>
<h1 class="c1">快下课了！</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  /* 子孙后代选择器 
  div里面的div里面的所有span */
  /* div div span{
    color: red;
  } */
  /* div里面的所有span */
 /*  div span{
     color: red;
  } */
  /* 子元素选择器 */
  body>div>span{
    color: red;
  }
</style>
</head>
<body>
  <span >span1</span>
  <div>
    <span>span2</span>
  </div>
  <div>
    <div>
      <span>span3</span>
    </div>
    <span>span4</span>
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  /* 属性选择器 */ 
  input[type='text']{
    background-color: green;
  }
  /* 伪类选择器 */
  a:visited {/* 访问过 */
    color: red;
}
  a:link {/* 未访问 */
    color: yellow;
}
  a:hover {/* 悬停 */
    color: purple;
}
  a:active {/* 点击 */
    color: green;
}
/* 任意元素选择器 */
  *{
    border:1px solid red;
  }
</style>
</head>
<body>
<a href="../imgs/a.jpg">超链接1</a>
<a href="../imgs/b.jpg">超链接2</a>
<a href="../imgs/c.jpg">超链接3</a>
<a href="../imgs/d.jpg">超链接4</a>
<input type="text">
<input type="password">

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  h3{
    color: rgba(255,0,0,0.5);
    /* red    
       #ff0000  
       #f00   
       rgb(255,0,0) */
  }
  #d1{
    width: 200px;
    height: 200px;
    background-color: purple;
    background-image: url("../imgs/a.jpg");
    /* 修改背景图片尺寸 */
    background-size: 100px 100px;
    /* 禁止重复 */ 
    background-repeat: no-repeat;
    /* 控制位置 横向百分比 和 纵向百分比 */
    background-position: 90% 90%;
  }
  #d2{
    width: 611px;
    height: 376px;
    background-color: #e8e8e8;
    background-image: url("http://doc.tedu.cn/tstore_v1/images/itemCat/study_computer_img1.png");
    background-repeat: no-repeat;
    background-size: 318px 319px;
    background-position: 93% 50%;
  }
  span{
    border: 1px solid red;
    width: 1000px;
    height: 200px;
  }
</style>
</head>
<body>
<span>span1</span>
<div id="d1"></div>
<div id="d2"></div>
<h3>颜色测试</h3>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  div{
    border: 1px solid red;
    width: 100px;
    height: 100px;
    display: inline;/* 将块级元素改成行内元素 */
  }
  span{
    border: 1px solid red;
    width: 100px;
    height: 100px;
    /* display: block */;/* 将行内元素改成块级元素 */ 
    /* 行内块：即能修改宽高也能共占一行 */
    display: inline-block;
  }
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  #d1,#d2{
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }
  #d1{
  /* 某个方向添加外边距 */
   /*  margin-left: 50px;
    margin-bottom: 30px; */
    /* 上下20px 左右40px */
    /* margin: 20px 40px; */
    /* 居中 */
    /* margin: 0 auto; */
    /* 上右下左顺时针 */
    margin: 10px 20px 30px 40px; 
  }
  #s1{
    margin-left: 50px;
    margin-right: 30px;
    /* 行内元素上下外边距无效  */
    margin-top: 50px;
  }
  #big{
    width: 200px;
    height: 200px;
    background-color: red;
    overflow: hidden;/* 解决粘连问题 */
  }
  #small{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 50px;
    margin-top: 50px;
  }
</style>
</head>
<body>
<div id="big">
  <div id="small"></div>
</div>
<span id="s1">span1</span><span>span2</span>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

外部css文件

@charset "UTF-8";
h5{
    color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  div{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    /* 圆角 值越大越圆*/ 
    border-radius: 5px;
    /* 内边距 */
    padding-left: 130px;
    padding-top: 130px;
  }
  #s1{
    border-right: 1px solid red;
    /* 内边距 */
    padding-right: 20px;
    /* 外边距 */
    margin-right: 20px;
  }
  
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<span id="s1">span1</span><span>span2</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  body>div{
    width: 200px;
    height: 200px;
    background-color: red;
    /* 添加内边距宽度会受影响 */
    padding-left: 50px;
  }
  div>div{
    width: 50px;
    height: 50px;
    background-color: yellow;
    /* 添加外边距宽度不受影响 */
    /* margin-left: 50px; */
     
  }
  #s1{
    border: 1px solid blue;
    padding-left: 20px;
    padding-right: 20px;
    /* 行内元素影响元素所占宽度，但不影响所占高度 */
    padding-bottom: 20px; 
  }
</style>
</head>
<body>
  <div>
    <div></div>
  </div>
  <span id="s1">span1</span><span>span2</span>
  <div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  div{
  /* 文本修饰： 
      overline上划线
      underline下划线
      line-through 删除线
      none去掉文本修饰 */
    text-decoration: line-through;
    width:200px;
    height:50px;
    border:1px solid red;
    /* 水平对齐方式 */
    text-align: center;
    /* 文本颜色 */
    color: blue;
    /* 行高 */
    line-height: 50px;
    /* 字体大小 */
    font-size: 20px;
    /* 字体加粗 */
    font-weight: bold;
  }
  a{
    text-decoration: none;
    background-color: purple;
    color: white;
    /* 修改显示方式 目的：为了修改宽高 */
    display:inline-block;
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
  }
  h1{
  /* 去掉加粗 */
    font-weight: normal;
    /* 斜体 */
    /* font-style: italic; */
    /* 字体设置 */
    /* font-family: "黑体"; */
     font: 20px "simhei", Arial, Helvetica, sans-serif; 
  }
</style>
</head>
<body>
<h1>我是加粗的</h1>
<a href="">超链接</a>
<div>今天是第三天</div>
</body>
</html>

8.案例 定位

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  /* 设置全局的字体样式 body里面所有标签都会继承 */
  body{
    font: 12px "simhei", Arial, Helvetica, sans-serif;
  }
  body>div{
    width: 611px;
    height: 376px;
    background-color: #e8e8e8;
    background-image: url("http://xxx/study_computer_img1.png");
    background-size: 318px 319px;
    background-repeat: no-repeat;
    background-position: 90% 50%;
    overflow: hidden;/* 解决粘连问题 */
  }
  div>div{
    width:245px;
    height:232px;
    margin: 68px 0 0 36px;
  }
  .p1{
    font-size: 32px;
    color: #333;
    /* 把自带的外边距值改小，
    从而达到p1和p2之间的距离变小  */
    margin-bottom: 12px;
  }
  .p2{
    color: #666;
    /* 字体大小继承自body的12 */
    margin-bottom: 24px;
  }
  .p3{
    color: #0aa1ed;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 12px;
  }
  a{
    width: 132px;
    height: 40px;
    background-color: #0aa1ed;
    border-radius: 3px; /* 圆角 */
    color: white;
    text-decoration: none;/* 去掉下划线 */
    text-align: center;/* 横向居中 */
    line-height: 40px;/* 纵向居中 */
    font-size: 20px;
    display: block;/* 为了能修改宽高 */
  }
</style>
</head>
<body>
  <div>
    <div>
      <p class="p1">灵越 燃7000系列 </p>
      <p class="p2">酷睿双核i5处理器|256GB SSD| 8GB内存<br>英特尔HD显卡620含共享显卡内存</p>
      <p class="p3">￥4999.00</p>
      <a href="">查看详情</a>
    </div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  body{
     font: 12px "simhei", Arial, Helvetica, sans-serif;
  }
  body>div{
    width: 375px;
    height: 376px;
    background-color: #e8e8e8;
    background-image: url("http://xxx/study_computer_img2.png");
    background-size: 292px 232px;
    background-repeat: no-repeat;
    background-position: 75% 80%;
    overflow: hidden;
  }
  div>div{
    width: 253px;
    height: 232px;
    margin: 39px 0 0 25px;
  }
  .p1{
    font-size: 32px;
    color: #333;
    margin-bottom: 12px;
  }
  .p2{
    color: #666;
    margin-bottom: 24px;
  }
  .p3{
    color: #0aa1ed;
    font-size: 24px;
    margin-bottom: 12px;
    font-weight: bold;
  }
  a{
    display: block;/* 为了能修改宽高 */
    width: 132px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: white;
    font-size: 20px;
    text-decoration: none;
    background-color: #0aa1ed;
    border-radius: 3px;
  }
  
</style>
</head>
<body>
  <div>
    <div>
      <p class="p1">颜值 框不住</p>
      <p class="p2">
        酷睿双核i5处理器|256GB SSD| 8GB内存<br>英特尔HD显卡620含共享显卡内存
      </p>
      <p class="p3">￥6888.00</p>
      <a href="">查看详情</a>
    </div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  div{
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }
  div:hover {
    position: relative;/* 相对定位 */
  /* 从元素初始位置做偏移  */
    top: 20px;
    left: 20px;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  div{
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }
  #d2{
  /* 绝对定位 */
    position: absolute; 
    bottom: 50px;
    right: 50px;
  }
</style>
</head>
<body>
<div>div1</div>
<div id="d2">div2</div>
<div>div3</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  #big{
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 100px 0 0 100px;
    overflow: hidden;
    
  }
   #middle{
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin: 50px 0 0 50px;
    position: relative;/* 做位置参考 */
  }
   #small{
    width: 50px;
    height: 50px;
    background-color: blue;
    position: absolute;
    top: 0;
    left: 0;
  }
  
</style>
</head>
<body>
  <div id="big">
    <div id="middle">
      <div id="small"></div>
    </div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  #d1{
    width: 50px; 
    height: 200px;
    background-color: red;
    /* 固定定位  */
    position: fixed;
    right: 50px;
    bottom: 100px;
  }
</style>
</head>
<body>
<div id="d1"></div>
<img src="../imgs/a.jpg">
<img src="../imgs/a.jpg">
<img src="../imgs/a.jpg">
<img src="../imgs/a.jpg">
<img src="../imgs/a.jpg">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  body>div{
    width: 200px;
    border: 1px solid red;
    /* 解决自动识别高度为0的问题 */
    overflow: hidden;
  }
  #d1{
    width: 50px;
    height: 50px;
    background-color: red;
    float: left;
  }
  #d2{
    width: 50px;
    height: 50px;
    background-color: green;
    /* 禁止元素左右两侧出现浮动元素
    （不顶上去） */
    /* clear: both; */
    float: left;
  }
  #d3{
  float: left;
    width: 50px;
    height: 50px;
    background-color: blue;
  }
</style>
</head>
<body>
<div>
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  div{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    /* visible超出显示  hidden超出隐藏
    scroll超出滚动显示 */
    overflow: scroll;
  }
</style>
</head>
<body>
  <div>
    <img src="../imgs/b.jpg">
  </div>
</body>
</html>
标签
background
meta
border
input
margin
css样式
css
meta标签
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!