HTML学习笔记

目录:

  1. 基本框架

  2. 文本相关标签

  3. 图像、超链接

  4. 创建表单

  5. 音频and视频

  6. 绘制图形

 

1、首先是html的基本框架

 1 <!DOCTYPE HTML>   //这行是告诉浏览器要以html5的标准运行
 2 <html lang="en"> //lang属性作用:告诉搜索引起是 ‘en’英文网页 还是 ‘zh’中文网页
 3 <meta charset="UTF-8">
4 <head> 5 <title> </title>//头部:浏览器、搜索引擎需要的信息 6 </head> 7 <body> 8 //主体:网页中包含的具体内容 9 </body> 10 </html>

  详细补充说明:

    meta 元数据:包含网页作者是谁、什么时候修改了、修改的最新版本是什么

                 charset 属性:字符集编码方式(一般用用UTF-8 国际编码)

                       常见编码方式

ASCII 数字、英文字母、符号
GB2312 简体中文 
Unicode 所有语言
UTF-8 所有语言,占用空间小

 2、文本相关标签

  文字排版:

      标题、段落、换行

标题:h1~h6 
                            段落:p 
段内换行:br 
                            预留格式:pre 
段内分组:span 
                            水平线:hr 
特殊标志: 
    空格:&nbsp;
    注释:<!---->

详细说明:

  p:每个段落自动换行

       (ps:<p></p>与<br>呈现的效果一样,但因逻辑不通,对后续css渲染处理有影响)

  span:组合行内元素,以便通过CSS样式来格式化(大概操作如下图)

  

 

案例演示:

代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>首页</title>
 6 </head>
 7 <body>
 8     <h1>web前端开发</h1>
 9     <h2>HTML</h2>
10     <p>超文本标记语言,用于构建网页结构</p>
11     <hr>
12     <h2>CSS</h2>
13     <p>层叠样式表,用于构建网页样式</p>
14     <hr>
15     <h2>JS</h2>
16     <p>JavaScript,脚本语言,用于构建网页行为</p>
17     <hr>
18 </body>
19 </html>

效果图:

区域 div
                无序列表   ul
                有序列表   ol
                  列表项 li
          表格标签  table
              
            标题  caption
            分行 tr
            单元格(分列) td
            表头单元格 th
              属性:
                合并列 colspan
                合并行 rowspan
                背景色 bgcolor
                背景图

                合并行 rowspan
                 背景色 bgcolor
 

使用示例:

    1、无序列表演示代码and效果图:

                                                  

    2、有序列表演示代码and效果图:

                                                 

    3、表格演示代码and效果图:

                                

                                

详细说明:

    div用于把页面元素区域化,可方便后续css渲染和网页布局

              border属性可以时表格边框显现(若不加,则table的表格无表象),后续学习CSS时可以用其他办法实现相同功能

    th是表头单元格,网页表象是加粗字体起强调作用

 


3、图像、超链接

超链接:a
作用:
    1、链接到本站点其他网页
    2、链接到其他站点
    3、虚拟超链接
插入图像:img

详细说明:    

            href:超链接的意思
            src:路径+文件名
            alt:图片无法找到or由于其他原因
                  图片无法显示时,就会显示alt里的文字

 

JPG  有损压缩,色彩丰富图片
GIF 简单动画、背景透明
PNG 无损压缩、透明、交错、动画

透明:某种指定颜色透明,也可以背景色透明
交错:从模糊概貌到逐渐到高清

              相对路径:

              1、网页文件和图片在同一层时:直接用 ''图片名/文件名''

                                                             

    2、图片在网页文件同一层的文件夹里:''文件夹名+图片名/文件名''

                                                                        

    3、图片在向上n级文件夹的同一层里: ''../图片名''

                                                                      

    4、图片在向上n级文件夹的同一层文件夹的里:''../文件夹名+图片名''

 

 

 

                                                         


 

 4、创建表单

  • 表单:是一个区域,采集用户信息
  • 表单元素:文本框、按钮、单选、
                      复选、下拉列表、文本域
表单标签:form
        表单元素:
            <input type="">
            取值:
                文本类:
                    text
                    password
                按钮值:
                    submit 提交按钮 
                        value 按钮上显示的文字(value也是属性)
                    reset 重置按钮
                单选框、复选框:
                    radio
                    checkbox
                        value属性表示传到后端的数据
                        name属性表示传的值名字是什么
                        check属性表示当前的想是否被默认选择
        多行文本框标签:textarea
            属性:
                rows 行数
                cols 列数
        下拉列表框:select、option
            select
            otion
            属性:
                selected="selected":被选择的一项
            //为了节省页面空间的时候,一般用下拉列表框

详细介绍:

  (1)表单标签:<form>:

  <form action="数据处理页面">
       //action收集到的数据交由后端页面处理表单元素
   </form>

     案件示例:

       代码演示:

 1 <form >
 2         <!-- 
 3             type="text"文本框
 4                  "password"密码框
 5          -->
 6          账户:<input type="text" name="userName">
 7          <br>
 8          密码:<input type="password" name="UserPassWord"> 
 9          <br>
 9          <input type="submit" value="确认">
 9          <input type="reset" value="重置">
10          <!--name属性用于后端查找操作 -->
11      </form>

     效果图:

                       

   (2)

<form action="数据处理页面">    //action收集到的数据交由后端页面处理 表单元素 </form>

posted @ 2019-10-13 13:24 逸非安逸 阅读(...) 评论(...) 编辑 收藏