前端学习笔记第一部分:HTML

        前段时间正式开始踏上我的全栈开发工程师之路,为了实现这一目标也为了以后更好的工作,决定重新学习一遍前端开发的基本知识,所谓基础不牢,地动山摇,对于程序猿来讲打好基础是非常重要的。因为之前接触并学习过前端开发的缘故,由于时间过于长久很多东西也已遗忘,这一次学习这部分知识的时候速度会加快一点,并对一些遗忘的知识和重要的知识点做一些笔记,还是那句话好记性不如烂笔头,相信做笔记可以加深自己的印象和理解。

 

1、浏览器内核

浏览器内核分为渲染引擎和JS引擎两部分,渲染引擎负责取得网页的内容包括HTML、XML等格式的内容并整理讯息;

js引擎负责解析JavaScript,执行js语言,实现网页动态效果等。

如今使用的主流浏览器都使用了不同的内核,这也是导致他们性能和速度不同的主要因素,例如IE浏览器内核为Trident,Firefox内核为Geeko,苹果浏览器Safari内核为webkit,谷歌浏览器Chrome内核为blink。

2、Web标准

  • 结构标准:对网页元素进行整理和分类,包括HTML和XML;
  • 样式标准:设置网页元素的版式,颜色大小等样式,主要指css;
  • 行为标准:使用js进行网页模型的定义和交互的编写,包括DOM和ECMAscript两部分;

3、常用标签和属性

单标签:   直线<hr />        换行 <br />    图片 <img />     

               设置整体链接的打开状态  <base  target= "_blank"  />     //另外启动新的窗口

链接标签:  <herf = "链接地址"  />

锚点定位:  <a  id = #  >    <herf = "#"  />

4、无序列表:

<ul>
        <li>  liebiao1 </ li>

        <li>  liebiao2  </ li>
</ ul>

有序列表:

<ol>
        <li> zhongguo  </ li>

        <li> meiguo  </ li>
</ ol>

自定义列表:

<dl>
    <dt>  beijing  </ dt>

    <dt>  changping  </ dt>
</ dt>

5、表格

<table width = "500"  height = "300"  border = "1"  align = "center">
<caption>  表格的标题  </ caption>                 <!-- 表格的标题 -->
<thead>               <!-- 表头结构 -->
    <tr>                                         <!-- 一行 -->
         <th>  单元格内的文字   </ th>             <!--一列    表头标签  -->
         <th>  单元格内的文字   </ th>
         <th>  单元格内的文字   </ th>
    </ tr>
</ thead> 
<tbody>                        <!-- 表格主体 -->
     <tr>                                   
         <td>  单元格内的文字   </ td>        
         <td>  单元格内的文字   </ td>
         <td  rowspan = "2">  单元格内的文字   </ td>          <!-- 跨行合并 -->
    </ tr>

                      //合并单元格   
     <tr>                                    
         <td>  单元格内的文字   </ td>        
         <td>  单元格内的文字   </ td>

    </ tr>
</ tbody> 
</ table>

表格属性: border:设置表格的边框

                   cellspacing:边框的宽度

                   cellpadding:内容与边框的间距

表头标签:<th>  </ th>            替换第一行中的<td>  </ td>标签

表格结构:<thead> </ thead>

                   <tbody>  </ tbody>

合并单元格:跨行合并:rowspan = "2";

                     跨列合并:colspan = "2";              合并之后要删除合并掉的单元格

 

6、表单和表单域

input控件的用法:

<! DOCTYPE html>
<html  lang="en">
    <head>
        <meta charset="utf-8">
    </ head>
    <body>
        <form action="xxx.php"  method="post" name="usermessage">       <!--表单域-->
            <!--input标签,这也是一个单标签-->
        <lable>用户名:<input type = "text"  value = "用户名" />  </lable>         <br />
        密&nbsp;&nbsp;码:<input type = "password"  maxlength="6" />          <br />
        性  别:
                <input type = "radio" name="sex" checked = "checked" /> 女  
                <input type = "radio" name="sex" /> 男         </ br>
                    <!--单选框  如果是一组,通过相同的name值来实现-->
        爱  好:<input type = "checkbox" name="hobby" /> 足球
                <input type = "checkbox" name="hobby" /> 篮球
                <input type = "checkbox" name="hobby" /> 乒乓球
        搜  索:<input type = "button" value="搜索啥" />    <!--普通按钮-->    <br  />
        <input type = "submit" value="提交表单" />
        <input type = "reset" value="重置表单" />                             <br />
        <input type = "image" src=".img" />    <!--图像按钮-->    <br  />
        上传文件:
                <input type = "file"  multiple />           <!--文件按钮-->    <br  />
        </form>

        留言板:
                <textarea cols="每行中的字符数"  rows="显示的行数" >  文本内容  </textarea>
        下拉菜单:
                <select>
                    <option>点击选择您的城市</option>
                    <option>北京</option>
                    <option>上海</option>
                    <option>福州</option>
                </select>
        </form>
    </body>
</html>

7、        lable标签:

用于绑定一个表单元素,当点击lable标签时被绑定的元素获得输入焦点;

              textarea文本域

             下拉菜单   <select></select>

              表单域   <form>  </form>

8、HTML5新标签和新增表单属性

      header               footer                  nav:导航栏链接             section:定义区域         aside:侧边,定义其所处内容外的内容

      datalist:用于输入框中快速选择,与input建立连接

      fieldset:可将表单内的相关元素分组打包

      placeholder:占位符,当用户输入时里面的文字消失

      autofocus:input元素自动获得输入焦点;

       multiple:多文件上传;

      autocomplete:是否自动补全(1、首先要提交表单  2、表单要有名字)

      required:不能为空内容;

      accesskey:规定激活元素的快捷键,采用alt+字母的形式。

9、表单综合案例——学生档案

<! DOCTYPE html>
<html  lang="en">
    <head>
        <meta charset="utf-8">
    </ head>
    <body>
        <form action="xxx.php"  method="post" name="usermessage">       <!--表单域-->
        <filedset>
            <legend>学生档案    </legend>
            <lable>姓名:<input type="text"  palceholder="请输入姓名" /> </lable> <br />
            <lable>手机号:<input type="tel"  />  </lable>   <br />
            <lable>邮箱:<input type="emil"  />   </lable>  <br />
            <lable>所属学院:<input type="text" palceholder="请选择学院" list="xueyuan"/>                  </lable>  <br />
                <datalist id="xueyuan">
                    <option>java</option>
                    <option>php</option>
                    <option>js</option>
                </datalist>
            <lable>出生日期:<input type="data"  />  </lable>   <br />
            <lable>成绩:<input type="number"  /> </lable>    <br />
            <lable>毕业时间:<input type="data"  />  </lable>   <br />

            <input type = "submit" value="提交表单" />
            <input type = "reset" value="重置表单" />  
        </filedset>
        </form>
    </body>
</html>

10、引入视频和插入音频、播放视频

<!--embed插入多种格式的视频-->
<embed src="www.xxx.com"  allowfullscernn="true" width  height />  </embed>

<!-- 插入音频  -->
<audio src="bg.mp3"   autoplay  controls   loop="1"  /> </audio>

<!-- 播放视频 多种格式的插入-->
<vidoe src="video.mp4"  autoplay controls />  </ video>

<vidoe   autoplay controls /> 
    <source src="video.mpeg4" />
    <source src="video.mp4" />
</video>

 

发布了15 篇原创文章 · 获赞 3 · 访问量 904
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览