HTML

最新推荐文章于 2024-10-17 10:32:26 发布

weixin_39838466

最新推荐文章于 2024-10-17 10:32:26 发布

阅读量107

点赞数 2

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_39838466/article/details/88095662

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、服务器

启动服务器：在终端输入http-server，在页面可以用localhost:8080打开

二、DOCTYPE声明

1.告诉浏览器你的语法
2.可能还会影响到JS的功能

三、HTML文档的基本结构

    <!DOCTYPE html> 
    <html>
        <head>
            <meta charset="utf-8">
            <title>标题</title>
        </head>
        <body>
            <p></p>
            <div></div>
            <img src="images/1.jpg" alt="图片">
            <a href="https://github.com">Git</a>
            <h1></h1>
            <ul><!--无序列表-->
                <li></li>
            </ul> 
            <ol><!--有序列表-->
                <li></li>
            </ol>
        </body>
    </html>

四、HTML文档

1、设定文档语言

1.页面设置

<html lang="zh-CN">

- SEO(搜索引擎优化)
- 有助于视觉障碍人士通过读屏器阅读页面

2.设定部分页面内容的语言

<p>日语<span lang="jp">ご飯が熱い</span> 的意思是什么？</p>

2、属性

1.布尔属性
例如<input>被添加disabled属性后，就接收不到用户输入了。

<input type="text" disabled>
<input type="text">
2.全局属性

id,class,style,title都是全局属性，可以被任何HTML元素使用
hidden可用于隐藏某个页面元素

<div class="notice" hidden>请先登录</div>

contenteditable全局属性可以使元素内容变成可编辑

<p contenteditable> hello </p>

3.特殊字符转译

显示	代码
<	`<`
>	`>`
"	`"`
’	`'`
&	`&`

4.HTML头部

1.指定文档编码

<meta charset="utf-8">

2.适配移动页面

<meta name= "viewport" content= "width=device-width,initial-scale=1.0">

3.定制页面图标

<link rel="shortcut icon" href="favicon.ico" type ="image/x-icon">

4.设置referer

<meta name="referer" content="never">

5.添加页面描述

<meta name="description" content= "这是一段页面的描述，不会在页面显示">
在搜索的关键字里面如果有这里面的某个字就能搜索到

5.添加JS和CSS

<link href= "aaa.css" rel="stylesheet">

<script src="app.js"></script>

6.超链接

1.title属性

<a href="http://github.com" title="开源社区" >Git </a>

Git 鼠标移动到超链接上就会有提示哟

2.文档内部链接
用于定位到文档的某一部分，<a>的href要对应文档内某个元素的id(id的值在文档内要唯一)

<a href= "#one">链接</a>
<p id="one">hello word</p>

3.下载链接

<a href="httpd://github.com/....svg" download> 下载...</a>

4.电话链接

<a href="tel:+8617621032097"> +86 17621030297</a>

5.Email链接

<a href="mailto:939761094@qq.com">发送邮件给我</a>

7.文件路径

1.相对路径

相对于文档本身的路径

2.绝对路径

在网络上的真实链接，或者从源文件开始的路径

weixin_39838466

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录