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

最新推荐文章于 2024-03-29 19:44:50 发布

小卖部出来的Coder

最新推荐文章于 2024-03-29 19:44:50 发布

阅读量184

点赞数

分类专栏：前端开发学习笔记文章标签： HTML 前端开发学习笔记

本文链接：https://blog.csdn.net/lancerfm/article/details/101150123

版权

学习笔记同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

前端开发

13 篇文章 1 订阅

订阅专栏

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

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>

合并单元格：跨行合并：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>

小卖部出来的Coder

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记第一部分：HTML

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

扫一扫