简单的学习html笔记

最新推荐文章于 2022-03-07 09:33:43 发布

xinpiannanhai

最新推荐文章于 2022-03-07 09:33:43 发布

阅读量241

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/xinpiannanhai/article/details/80009532

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

4/19/2018 8:22:31 AM

HTML

晨测

1. 增加一个用户的命令是              
2. Linux中定义用户账户的文件为
3. 切换用户命令为
4. 文件exer1的访问权限为rw-r--r--，现要增加所有用户的执行权限和同组用户的写权限
5. 在vi编辑器中执行存盘退出的命令是
6. 改变文件所有者的命令为
7. 申明一个环境变量的语法格式
8. 编写一个脚本，根据用户输入的数字n,计算1~n的累加和。（可选题）
    #!/bin/bash
    read -p "input your num:" num
    sum = 0;
    for(( n=1 ; n<=$num  ; n++))
    do
        sum=$[num+n]
    done
    echo sum=$sum

回顾

1. vim编辑器的使用    
2. linux用户和组管理
3. jdk,mysql安装
4. shell编程

今日概要

一、HTML概述
二、web相关的概念
三、HTML的常用标签

一、HTML概述

<1>概念

HTML:Hypertext Markup Language,超文本  标记语言，用来描述网页的一种语言。
非编程语言，由浏览器直接解释运行。

<2>作用

编写网页,显示网页数据

<3>特点

此语言编写的文件，以html或者htm为后缀。
由一组标签组成，不区分大小写。
    XML:标签自定义，存储数据，传输数据
    HTML:标签固定，每一个标签具有特定的含义，存储数据，传输数据

标签由开始和结束标签组成，开始标签<标签名> 表示，结束标签使用</标签名>表示


标准的HTML文件的结构：
<!DOCTYPE~> //代表HTML的版本，表明当前的HTML文件使用哪种版本的语法来进行编写
<HTML>   //表示页面的开始

    <HEAD>
        //放置一些页面的设置参数
        <TITLE>标题标签</TITLE>
    </HEAD>

    <BODY background="" bgcolor="">
        //网页的主体部分，在浏览器上直接显示的内容
    </BODY>

</HTML>

二、Web相关的概念

URL:统一资源定位符，互联网上资源的地址。可以通过URL找到互联网上的某一个具体的资源。
    可以标识一张图片，一部电影，或者一个HTML页面

HTTP协议:超文本传输协议，服务器端和客户端请求和应答的标准。

B/S结构：浏览器和服务器模式
        统一了客户端，将功能的实现全部交给服务器去实现，简化了开发，维护的成本。

浏览器：解析和显示HTML文件的软件。
        HTML文件解析（SAX,DOM）
        HTTP请求数据包和响应数据包的封装和解析

三、HTML常用标签

1.标签和属性

标签由开始和结束标签组成，开始标签<标签名> 表示，结束标签使用</标签名>表示            
元素指的是包含标签在内整体，除去标签的部分叫做内容。      
标签允许嵌套
属性在开始标签中指定，表示标签的性质和特征，通常表示为：属性名=“属性值” ，多个属性使用空格隔开

2.颜色的指定方式

方式一：使用颜色的名称
方式二：使用十六进制指定，在#后面把RGB三原色的各个数值使用十六进制表示出来。
       使用六位：#ffff00 ,黄色
       使用三位：#ff0 ，黄色

3.资源指定方式

在HTML中，使用URL来访问，指定资源

绝对路径：以http://资源路径，或者c://资源的路径
相对路径：以当前位置为标准，指定资源路径
        ./ 当前位置
        ../上一级目录位置
        ../../上一级的上一级目录位置

4. 标签

<meta 属性 =“属性值” ...>
设置整个页面的属性
此标签在<head>标签内部使用

例如：
    <meta charset="字符编码" /> 表示该HTML文件使用的字符编码
    <meta name="keywords" content="五一小长假，春游小长假" />
    <meta name="autor" content="作者姓名"/>

    <meta http-equiv="refresh" content="秒数；url= "/> 页面倒转功能
        content="秒数"
        url="跳转的页面"

    例如：<meta http-equiv="refresh" content="5;url=demo2.html"/>

5.标签

<body text="red" bgcolor="green" background="./htmlsrc/k11.jpg">    
<!-- 给body指定字体颜色 -->            
<!-- 给body指定背景颜色 -->    
<!-- 给body指定背景图片 -->

6. 文本类标签

区域标签：
    <fieldset>
        <legend>描述信息</legend>
        内容
    </fieldset>


标题标签：<h1> ...<h6>
         <h1>定义最大标题
         <h6>定义最小标题

段落标签：<p>段落</p>

保留数据源格式的标签：
    <pre></pre>

设置文本格式：
    <s></s>   ,<del></del> 删除线
    <b></b>    加粗
    <sup></sup>  上标
    <sub></sub>  下标
    <u></u>   下划线
    <i></i>  斜体
    <br>  回车换行

    <font 属性>文本</font> 文本标签，face="字体" size="字号" color="颜色"
    <big></big>
    <small></small>


特殊符号： 
    &nbsp;  空格
    &lt;    <
    &gt;    >
    &quot;  "
    ... ...

设置对齐方式：
    属性的方式align = "对齐方式"

设置居中的标签：<center>数据</center>  ，居中显示数据

超链接标签：<a href="">名称</a>
    hreft属性：指定链接的url，位置

    跳转到特定的位置：
        <a name="位置标识"  >
        <a href="#位置名称" > 跳转到头部</a>

    跳转到其他页面：
        <a href="url位置" ></a>
            绝对路径：http://www.baidu.com:80/   -----百度服务器----默认的项目------index.html
            相对路径：./demo1.html 


图片标签：<img/> 显示图片
    属性：src="url位置"   
         width="宽度"
         height="高度"
         alt="替代文件"
         border="边框"        
         align="对齐方式"            

    <img src="" alt="加载失败" width="300" height="500"/>

列表标签：<ol> <ul> <li>

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

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

7.结构类

表格标签：<table > <tr>  <td> 
    <table border="边框"></table> :整个表格
    <tr></tr> :单独一行
    <th></th> :单独一行，标题使用
    <td>数据</td> :一列

属性：border,设置表格的边框
     background,设置背景图片  
     bgcolor，设置背景颜色

     cellspacing,设置单元格之间的距离
     cellpadding,设置单元格内部的数据和边框的距离

     rowspan，垂直方向合并单元格
     colspan，水平方向合并单元格

     align ,行的对齐方式
     valign,列的对齐方式

<thead></thead>:表头部分
<tbody></tdody>：主体部分，可以有多个
<tfoot></foot>：标底部分

分区标签：<div>  <span> 分区

区块标签:<div></div> 
        <h1> <p> <table> <tr>

内联标签：<span> 
        <a> <img> <td>

8.框架类

<frameset rows="" cols="">
    <frame src="left.html"></frame> 
    <frame name="right"></frame>
</frameset>

9.表单类（将表单中的数据发送给服务器的）

<form action="服务器的url" method="传输的方式"> 数据</form>        
    URL:用来接收和处理表单数据的组件，Servlet
    method:get、post

制作不同功能的按钮：<input type="按钮的类型" value="按钮上显示的名称" name="名字">
    <input type="button" value="按钮上显示的名称" name="名字"> 一个普通按钮
    <input type="submit" value="按钮上显示的名称" name="名字"> 一个提交按钮
    <input type="reset" value="按钮上显示的名称" name="名字"> 一个重置按钮
    <input type="image" value="按钮上显示的名称" name="名字" url=""> 一个图片按钮

制作文本框：
    <input type="text" value="输入框中默认的数据" size="宽度" maxlength="字符的最大输入数量" name="标识输入框">  
    <input type="password" value="输入框中默认的数据" size="宽度" maxlength="字符的最大输入数量" name="标识输入框">  

    <textarea name="标识输入框" rows="行数" cols="列数" >    

制作单选和多选按钮：
    男 <input type="radio" name="标识" value="男">  

       <input type="checkbox" value="男" name="标识">  


制作菜单：
    <select name="标识">
            <option>内容1</option>
            <option>内容2</option>
            <option selected>内容3</option>
    </select>

作业：

编写个人简历页面
编写简易商城首页（table）
编写后台页面（frameset）
编写注册页面

xinpiannanhai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的学习html笔记

4/19/2018 8:22:31 AMHTML晨测1. 增加一个用户的命令是 2. Linux中定义用户账户的文件为3. 切换用户命令为4. 文件exer1的访问权限为rw-r--r--，现要增加所有用户的执行权限和同组用户的写权限5. 在vi编辑器中执行存盘退出的命令是6. 改变文件所有者的命令为7. 申明一个环境变量的语法格式8. 编写一个脚本，根据用...
复制链接

扫一扫

专栏目录