HTML 基本链接语法,布局,脚本

最新推荐文章于 2024-07-22 09:00:00 发布

harkecho

最新推荐文章于 2024-07-22 09:00:00 发布

阅读量2.2k

点赞数 1

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

本文链接：https://blog.csdn.net/u012581760/article/details/78412251

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

我们通过使用 <a> 标签在 HTML 中创建链接。
有两种使用 <a> 标签的方式：
1. 通过使用 href 属性 - 创建指向另一个文档的链接
2. 通过使用 name 属性 - 创建文档内的书签
链接的 HTML 代码很简单。它类似这样：
<a href="url">Link text</a>
href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
    <html>
        <body>
        <a href="http://www.w3school.com.cn/"; target="_blank">Visit W3School!</a>
        <p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>
        </body>
</html>

HTML链接-name属性
name属性规定锚点(anchor)的名称
可以使用name属性创建HTML页面中的书签
书签不会以任何特殊方式显示,它对读者是不可见的
    当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚的链接,这样滚动页面来寻找他们需要的信息
命名锚的语法:
    <a name=“label” >锚(显示在页面上的文本)</a>
锚的名称可以是任何你喜欢的名字
您可以使用id属性替代name属性,命名锚同样有效
实例:
首先,我们在HTML文档中对锚进行命名(创建一个书签)
<a name=“tips”基本的注意事项-有用的提示></a>
然后,我们在同一个文档中创建指向该锚的链接
<a href=“#tips”>有用的提示</a>
您也可以在其他页面中创建指向该锚的链接
    <a href=“http://www.w3school.com.cn/html/html_links.asp#tips”>有用的提示</a>
    在上面的代码中,我们将#符号和锚名称添加到URL的末端,就可以直接链接到tip这个命名锚了.

链接到同一个页面的不同位置

<html>
 <body>
     <p>
     <a href=“#C4”>查看Chapter 4.</a>
      </p>
       <h2>Chapter 1</h2>
     <p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name=“C4”>Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
 </body>
</html>

HTML<div> 块元素,可以用于组合其他HTML元素的容器
    <div>元素没有特定的含义,由于它属于块级元素,浏览器会在其前后显示折行;
它可以用于文档布局
HTML<span>元素是内联元素,可用于部分文本设置样式

HTML布局

margin与padding如何进行区分，这是很多学html人的困扰，其实说白了padding 就是内容与边框的空隙。而margin则是模块与模块的空隙

HTML5语义元素
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(比如侧栏)
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义details元素的标题

HTML响应式Web设计

HTML响应式Web设计
RWD指的是响应式Web设计(Responsive Web Design)
RWD能够以可变尺寸传递网页
RWD对于平板和移动设备是必要的
使用Bootstrap 创建响应式设计的方法是使用现成的CSS框架
Bootstrap是最流行的开发响应式web的HTML,CSS和JS框架

HTML脚本

javaScirpt使HTML页面更具有更强的动态和交互性
<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>
</body>
</html>


HTML script元素
<script>标签用于定义客户端脚本,比如JavaScript
script元素既可以包含脚本语言,也可通过src属性指向外部脚本文件
必需的type属性规定脚本的MIME类型
JavaScript最常用于突破操作,表单验证以及内容动态更新.