HTML入门及进阶笔记

最新推荐文章于 2024-11-08 10:30:00 发布

可口可乐了吗

最新推荐文章于 2024-11-08 10:30:00 发布

阅读量415

点赞数

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

本文链接：https://blog.csdn.net/weixin_51042892/article/details/122917760

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

HTML入门及进阶

前端开发技术

Ajax，即“Asynchronous Javascript And XML（异步JavaScript和XML）”，是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个页面。

段落与文字

段落标签

标签	  语义  说明
<h1>~<h6>header	标题
<p>	    paragraph	段落
<br>	break	换行
<hr>	horizontal rule	水平线
<div>	division	分割（块元素）
<span>	span	区域（行内元素）

网页特殊符号

HTML空格“ ”

自闭合标签

如<br/> , <hr/>

块元素和行内元素

块元素——h1~h6、p、hr、div等
– 独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素
– 块元素内部可以容纳其他块元素或行元素
行内元素——strong、em、span等
– 可以与其他行内元素位于同一行
–行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果

列表

有序列表—— ol
在css中，有序列表列表项符号由list-style-type属性定义
无序列表—— ul ，最常用

<ul  type="列表项符号">
    <li>无序列表项</li>
    <li>无序列表项</li>
</ul>
type属性值	    列表项的序号类型
disc        	默认值，实心圆“●”
circle      	空心圆“○”
square	        实心正方形“■”

在css中，无序列表列表项符号由list-style-type属性定义

定义列表—— dl

<dl>
    <dt>定义名词</dt>
    <dd>定义描述</dd>
    ……
</dl>

表格

合并行

语法：<td rowspan=“跨度的行数”>

合并列

语法：<td colspan=“跨度的列数”>

图像

<img src=“图片地址” alt=“图片描述（给搜索引擎看）” title=“图片描述（给用户看）”>
src 图像的文件地址
alt 图片显示不出来时的提示文字
title 鼠标移到图片上的提示文字

链接

超链接使用a标签，语法如下：
<a href=“链接地址” target=“目标窗口的打开方式”>

target的值： _self : 默认方式，即在当前窗口打开链接 _blank : 在一个全新的空白窗口中打开链接

超链接可分为：外部链接和内部链接

内部链接可分为：内部页面链接和锚点链接，锚点链接就是点击某一个超链接，它就会跳到当前页面的某一部分。

<body>

    <div>

        <a href="#music">推荐音乐</a><br />

        <a href="#movie">推荐电影</a><br />

        <a href="#article">推荐文章</a><br />

    </div>

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    <div id="music">

        <h3>推荐音乐</h3>

        <ul>

            <li>林俊杰-被风吹过的下图</li>

            <li>曲婉婷-在我的歌声里</li>

            <li>许嵩-灰色头像</li>

        </ul>

    </div>

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    <div id="movie">

        <h3>推荐电影</h3>

        <ul>

            <li>蜘蛛侠系列</li>

            <li>钢铁侠系统</li>

            <li>复仇者联盟</li>

        </ul>

    </div>

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    <div id="article">

        <h3>推荐文章</h3>

        <ul>

            <li>朱自清-荷塘月色</li>

            <li>余光中-乡愁</li>

            <li>鲁迅-阿Q正传</li>

        </ul>

    </div>

</body>
//只要我们点击“推荐音乐”、“推荐电影”和“推荐文章”这三个超链接，滚动条就会滚动到相应的版块。

表单 —— <input>、<textarea>、<select>和<option>

input

语法：<input type=“表单类型”/>

textarea

多行文本框
语法：<textarea rows=“行数” cols=“列数”>多行文本框内容</textarea>

表现形式如下：
在这里插入图片描述

下拉列表,由<select>标签和<option>标签配合使用

<select multiple="mutiple" size="可见列表项的数目">

    <option value="选项值" selected="selected">选项显示的内容</option>

    ……

    <option value="选项值">选项显示的内容</option>

</select>

多媒体

插入音频、视频和flash —— embed
<embed src=“多媒体文件地址” width=“播放界面的宽度(px)” height=“播放界面的高度(px)”></embed>
插入背景音乐
为某个网页设置背景音乐，使用的是bgsound标签。不过bgsound标签只适用于IE浏览器，在Firefox等浏览器中未必适用。
设置网页背景音乐时常用的方法除了使用bgsound标签，还有使用embed标签和object标签。
语法：
<bgsound src=“背景音乐的地址”/>
说明：
loop="2"表示重复2次，loop=“infinite"表示无限次循环播放，也可以使用loop=”-1"表示无限次循环播放。

浮动框架iframe

浮动框架，就是在一个页面嵌入一个或多个子页面
<iframe src=“浮动框架的源文件” width=“浮动框架的宽” height=“浮动框架的高” scrolling=“取值”></iframe>
scrolling属性取值如下：
auto 默认值，整个表格在浏览器页面中左对齐
yes 总是显示滚动条，即使页面内容不足以撑满框架范围，滚动条的位置也预留
no 在任何情况下都不显示滚动条

进阶内容

HTML 和 XHTML

HTML,全称HyperText Mark-up Language (超文本标记语言)，是构成网页文档的主要语言。我们常说的HTML指的是HTML 4.01。
XHTML,全称 Extensible HyperText Mark-up Language (扩展的超文本标记语言), 它是XML风格的HTML 4.01,我们可以称之为更严格、更纯净的HTML 4.01。
HTML语法书写比较松散，利于开发者编写。但是对于机器，如电脑、手机等来说，语法越松散，处理起来越困难。因此为了让机器更好地处理HTML,我们才在HTML基础上引入了 XHTML
XHTML相对于HTML来说，在语法上更加严格。
XHTML和HTML主要区别如下。
(1)、XHTML标签必须闭合。
在XHTML中，所有标签必须闭合，例如“<p></p>" “<div></div>”等。此外，空标签也需要闭合，例如<br>要写成<br/>。
错误写法：<p>欢迎来到绿叶学习网
正确写法：<p>欢迎来到绿叶学习网</p>
(2)、XHTML标签以及属性必须小写。
在XHTML中，所有标签以及标签属性必须小写，不能大小写混合，也不能全部都是大写。不过标签的属性值可以大写。
错误写法：<Body><DIV></DlV></Body>
正确写法：<body><div></div></body>
(3)、XHTML标签属性必须用引号。
在XHTML中，标签属性值必须用引号括起来，单引号、双引号都可以。
错误写法：<input id=txt type=text/>
正确写法：<input id=“txt” type=“text”/>
(4)、XHTML标签用jd属性代替name属性。
在XHTML中，除了表单元素之外的所有元素，都应该用id而不是name。
错误写法：<div name=“wrapper”>
正确写法：<div id=“wrapper”>