HTML5CSS网页设计2023.3.13学习内容

HTML5网页设计-day01

每日一句:成功不是将来才有的,而是从决定去做的那一刻起,持续累积而成。

**学习内容:**静态和动态网页、标签、css样式

  • 静态和动态网页

    • 静态网页

      • 没有前后端交互的网页叫做静态网页
    • 动态网页

      • 有前后端交互的网页叫做静态网页
    • HTML默认模板代码

    DOCTYPE html>
    <html lang="en">
    网站的头部
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
    head>
    网站的身体部分,存放内容
    <body>
        
    body>
    html>
    
  • 认识网页中的标签

    • 如果我们想要在网页中去画东西,可以通过已经制定好的标签去使用

    • 标签

      • 1.<div>div> 	------------> 块元素,在浏览器中独占一行
        2.<p>p>		------------> 块元素,在浏览器中独占一行
        3.<a href="" target="">a> ------------>又叫做超链接 主要用于跳转页面的
        	herf 属性:设置跳转路径   
        	target属性:目标   _blank:打开一个新浏览器窗口   _self: 默认在当前浏览器窗口跳转
        4.<span>span>  ------------> 通常用来设置比较短的文字或者添加一些符号 小标记
        5.<img src="" alt=""> ------------>用来显示图片的标签
        	src属性:设置图片的所在的路径
        	alt属性: 如果图片未找到,则显示alt里面的内容
        6.<input type="text" checked> ------------>输入框
        	type属性:input标签会根据type属性值的不一样,呈现出来状态不一样
            type="text" 表示输入框
            type="password" 表示密码输入框
            placeholder属性:设置输入框的背景提示语句,输入内容后自动消失
            type="button" 表示按钮和value属性连用,value表示设置按钮内容
            type="radio" 表示单选框,通常是和name属性连用,如果name属性值系统的,认为这几个但选	框是一组
            checked 默认选中
            type="checkbox" 表示多选框, 
            type="hidden"隐藏输入框 通常和form表单连用
            注意:当我们进行前后端交互的时候是需要使用form表单,将数据提交到后台的,而表单中能够提	 交内容的标签只有input,如果提交的内容不想让用户看见,只供开发者使用,则我们可以使用		隐藏输入框
            type="submit"提交按钮 必须和 form表单连用
            type="reset" 重置按钮,必须和form表单连用
        7.<form action="" method="">form> ------------>表单标签
        	action属性,表单提交的路径,(将form中的input内容提交到那)
            method属性表单的提交方式两种get和post
        8.<ul><li>li>ul> ------------>无序列表
        9.<ol><li>li>olol> ------------>有序列表
        10.<table> ------------>表格标签  tr表示行  td表示列
            <th><td>td>th>
        	<tr><td>td>tr>
        	table>
        11.<select><option>option>select> ------------>下拉选项框
        12.<h1>h1> ------------>h1-h6标题标签
        
  • css样式

    • css样式就像是给我们新买的房子装修一样,通过css的修饰使整个网页的布局和样式更加好看

    • 
          list-style: none;
      
          text-decoration: none;
      
          text-decoration: underline; 
      
      font-size:20px;
      
      color:red;
      
      font-family:微软雅黑;
      
      font-weight:bold;
      
      margin: 两个值分别是 上下 左右
      margin: 四个值分别是 上 右 下 左
      margin: 一个值 分别是 上右下左
      margin-left: 左边
      margin-right: 右边
      margin-top: 上边
      margin-bottom 下边
      
      cursor:pointer;
      
      
      
      
      border-radius:8px;
      
      
       
      position: relative;
      left: 20px;
       
      position: absolute; 
      
      
      
      img:hover{
          border-radius: 50%;
          /* 让图片旋转720度,并且放大两倍 */
          transform: rotate(720deg) scale(1.5);
          /* 所有的效果在2秒完成 */
          transition: 2s all;
      }
      
      #d p下面的后代p标签
      #d>p下面的儿子p标签
      
      img : 导入图片的标签 可以直接在网页上右键另存为
      background: 样式贴入背景图 不能直接图片另存为
      
      
      background:url("图片.jpg") 10px 30px no-repeat;
      
  • 新手上路,以上内容仅供参考,如有不对的地方,望指出!

你可能感兴趣的:(前端网页设计技术,css,html5,学习,前端,html)