html基本概念

最新推荐文章于 2022-09-07 11:53:33 发布

d.r.young

最新推荐文章于 2022-09-07 11:53:33 发布

阅读量630

点赞数 1

分类专栏： web 文章标签： html

本文链接：https://blog.csdn.net/dearyangjie/article/details/78156921

版权

web 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

HTML

互联网三大基石

统一资源定位符（url）
互联网上每个资源都对应一个单独的url
超文本传送协议（http，hypertext trasfer protocol）
负责规定浏览器和服务器怎样相互交流
超文本标记语言（html，hypertext markup language）
定义超文本文档的结构和格式

定位-传输-下载到浏览器进行html（以及css+js)解析

浏览器解析html文档显示其内容

HTML文档编辑

文本编辑器，.html，.html格式
dreamweaver等
由web服务器（或http服务器）实时动态生成

理解：
html文档也只不过是字符串
可以通过任何语言进行字符串处理（如拼接等），生成新的html

标记：规定的有特殊意义的字符串

标签元素：<title>My First PAGE</title>

标签元素+属性：<title align="center"> My First Page </title>
属性隶属于标签元素，属性间使用空格隔开

标签元素间关系：父子，兄弟

常用标签

head标签元素及属性

- <head>，设置文档标题以及其他不在网页上显示的信息
    出现在文档的开头部分；
    其中的内容不会在浏览器的文档窗口显示；

    对文档做整体的控制
    SEO（Search Engine Optimization）的重要内容

- <title>
    定义html文档的标题
- <meta>
- <link>
- <scrip>
- <img>

 标签的 href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段
 标签的 rel 属性用于指定当前文档与被链接文档的关系
 标签的 type 属性规定元素的类型

 http-equiv属性相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容
 ＜meta http-equiv="参数" content="参数变量值"＞

 一个典型的head：
 <head>
    <title>典型的head</title>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
    <meta name="author" content="young">
    <link rel="shortcut icon" href="panda.ico"/>

    <link rel="stylesheet" type="text/css" href="css/xx.css"/>
    <script type="text/javascirpt" src="js/search.js"> </scirpt>

</head>

元素及元素属性

html文档的主体部分
- <body>元素属性（不推荐，现已用css实现）
    <body bgcolor="#000000" background="images/future.jpg>
- <p> </p> 段落
- <h1> .. <h6>标题元素（与SEO相关）
- <br> 或 <br/>换行标签（单标记）
- <hr size="9" width="80%" color="red"> 水平线
- <del> </del> 删除线
- <b> </b>粗体字（bold）
- <i> </i> 斜体（italic）
- <font color="red" size="1" </font>, 1是最小的字体
- <pre> 
    pre 元素可定义预格式化的文本。
    被包围在pre元素中的文本通常会保留空格和换行符
    <pre> 标签的一个常见应用就是用来表示计算机的源代码

图片标签img

- 图片
    <img src="images/.jpg" width="100px" height"100px"
             alt="picture" title="young" />
    现在的搜索引擎，搜索图片，其实是通过搜索标题文字！！
    或者图片的上下文！

内嵌

可以播放视频、音频等
<embed src="ww.wmv" autostart="true" loop="true" hidden="false"
        width="100px" height="100px" />

可通过查看源码，然后找ctrl+f搜索标签<vedio> 或 .mp4等视频格式

超链接

<a href="url_addr" target="_blank"> xx</a>
xx 可以是文本、图片；

target属性定义在什么地方打开链接地址，用name属性标识

    - 锚标签和name属性
        锚标签相当于内链接，定位

    - 创建邮件链接

列表标签（较为常用，与css联合使用）

    unorder list无序列表：
    <ul type="xx">
        <li> x1 </li>
        <li> x2 </li>
    </ul>

    有序列表：   
    <ol type="a">
        <li> x1 </li>
        <li> x2 </li>
    </ol>

表格标签

    <table 属性="属性值">
        <tr>
            <td>姓名</td> <td>手机</td>
        </tr>
        <tr>
            <td>李四</td> <td>15158xxxxx</td> 
        </tr>
    </table>

    tr: table row
    td: table data

    使用表格可以用于网页的布局排版，现在已被css布局替代！

块元素

<div>
    可以定义文档中的分区或节(division/section)
    可以把文档分割为独立的、不同的部分
    可以用作严格的组织工具，且不使用任何格式与其关联
    其内容可以自动地开始一个新行

行内元素

<span>
    用于组合文档中的行内元素

框架标签

<frameset> <frame>
    用于布局；
    使用框架，可以在一个浏览器窗口中显示不止一个页面；切割页面
    不和<body>一起使用

    <frameset cols="200px,30%,*">
        <frame src="http://www.baidu.com" name="left"> </frame>
        <frame src="http://www.baidu.com" name="left"> </frame>
        <frame src="http://www.baidu.com" name="left"> </frame>
    </frameset>

内嵌框架

<iframe>

html字符实体

有些字符，如"<"字符，在html中有特殊的含义，因此不能再文本中使用；
想要在html中显示一个小于号"<"，需要用到字符实体：&lt；或者&#60；（ascii）
大小写敏感

字符实体拥有三个部分：一个and符号(&)，一个实体名或者一个实体号，最后一个是分号(;)

表单

比如注册账号，需要填写内容
表单域元素属性需要定义name，不然不会提交到服务器！

<form method="post" name="regFrm" action="xx">

name：表单的名称
action：只当表单输入完成送出时要进行的行动，目标是相关的动态网页，或者servlet（小服务程序）
method：指传送方式
    - get
        在url后面加上传送字符串，传送资料会显示在浏览器地址栏上，有安全问题，资料量不能太大
    - post
        传送的表单信息作为http request的一部分，资料不会显示在地址栏上，传送字量量大

客户端到服务器请求的格式：
一个请求包含：
    请求行：...
    头：...
    实体：...

通常简单信息使用get方法即可，即只使用请求行url，地址栏
复杂信息和保密信息使用post方法，采用请求实体传输

测试例

<html>
    <head>
        <title>My first Page！</title>
    <link rel="shortcut icon" href="images/panda.ico"/> 
    </head>

    <body bgcolor="#000000" background="images/future.jpg">
        <h1>A new Paragraph!</h1>
        <!-- 注释 <p align='center'>A new Paragraph!</p> -->

        <p align=center>
        <b>A new Paragraph!</b><br/>
        <b><i>A new start...</i></b>
        </p>

        <!-- 水平线-->
        <hr size="3" width="15%" color="red">

        <p>
        <del> start over </del> <br/>
        <font color="red" size="1">
        X<SUP>2</SUP>+Y<SUP>2</SUP> <br/>
        </font>
        <pre>
        public static void main(String[] args) {
            system.out.println("hello");
        }
        </pre>

        <b> &lt; </b> <br/>

        <img src="images/future.jpg" width="200px" height="100px"
                 alt="picture" title="future" />

        <img src="images/f.jpg" width="200px" height="100px"
                 alt="picture not exsist" title="future" />

        <img src="images/f.jpg" width="200px" height="100px"
                 alt="picture not exsist" border="3" />

        </p>

        <p>
        <embed src="video/031.mp3" autostart="false" loop="false" hidden="false"
            width="100px" height="60px" />
        </p>

        <p>
        <embed src="http://list.video.baidu.com/swf/ecomAdvPlayer.swf?tpl=coop&controls=progress,pause,volumn,fullscreen&video=http%3A%2F%2Fpgccdn.v.baidu.com%2F3427955792_3804772858_20171002163220.mp4%3Fauthorization%3Dbce-auth-v1%252Fc308a72e7b874edd9115e4614e1d62f6%252F2017-10-02T08%253A32%253A30Z%252F-1%252F%252F8db38b523847dfc133fafbc5a4ab3e7ef09ef50269a8b4ffc3af3a1d047cbc45%26responseCacheControl%3Dmax-age%253D8640000%26responseExpires%3DWed%252C%2B10%2BJan%2B2018%2B16%253A32%253A30%2BGMT%26xcode%3De65ba71a44ffff871381178cc932c8f484d6ab0024df2246%26time%3D1507091605" autostart="false" loop="false" hidden="false"
            width="200px" height="180px" />
        </p>

        <p>
            <a href="http://www.baidu.com" target="blank">
            百度</a>
        </p>

        <p>
        <ul> 
            <li> x1 </li>
            <li> x2 </li>
        </ul>

        <ol type="a">
            <li> x1 </li>
            <li> x2 </li>
        </ol>
        </p>
        <p>
            <table border="1" style="border-collapse:collapse">
            <tr>
                <td>姓名</td> <td>手机</td>
            </tr>
            <tr>
                <td>李四</td> <td>15158xxxxxx</td>    
            </tr>
        </table>
        </p>
    </body>
</html>

<html>
    <head>
        <title> 测试表单 </title>
        <meta http-equiv="content-type" content="text/html; charset="gb2312" />
    </head>

    <body>
        <h1> 欢迎注册！</h1>
        <hr/>
        <!-- 表单-->
        <form>
            用户名：<input type=text size=30 maxlength=10 value="请输入用户名" name=uname /> <br/>
            密码：<input type=password name=pwd /> <br/>
            性别：<input type=radio name=gender value=1 />男
            <input type=radio name=gender value=2 />女
            <br/>
            业余爱好：<br/>
            <input type=checkbox name=favor value=1 />打篮球<br/>
            <input type=checkbox name=favor value=2 checked />打豆豆<br/>

            <!--下拉列表-->
            籍贯：<br/>
            <select name=jiguan >
                <option value=1> 北京</option>
                <option value=2> 上海</option>
                <option value=3> 杭州</option>
            </select> <br/>

            曾今呆过的地方：<br/>
            <select name="province" multiple>
                <option value=1> 北京</option>
                <option value=2> 上海</option>
                <option value=3 selected> 杭州</option>
            </select> <br/>

            自我说明：<br/>
            <textarea name=self rows=20  cols=20> </textarea> <br/>


            <input type=submit value="注册" />
            <input type=button value="普通按钮" onclick="alert('aaaa')" /> <br/>
            <input type=reset value=重置 /> <br/>
            <input type=image src='images/panda.ico' />


        </form>
    </body>
</html>

d.r.young

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html基本概念

HTML互联网三大基石统一资源定位符（url）互联网上每个资源都对应一个单独的url超文本传送协议（http，hypertext trasfer protocol）负责规定浏览器和服务器怎样相互交流超文本标记语言（html，hypertext markup language）定义超文本文档的结构和格式定位-传输-下载到浏览器进行html（以及css+js)解析浏览器解析html文档
复制链接

扫一扫