html1,初识html
vs code编辑器
安装插件
chinese 中文支持
open in browser 快速预览文件
view in browser
快捷键
快捷键 | 描述 |
---|---|
shift + end | 选中从光标到行尾 |
shift + home | 选中从光标到行首 |
shift + alt + 方向上下 | 快速复制粘贴当前行 |
alt + 方向上/下 | 快速和上/下行移动 |
tab | 向后缩进 |
shift + table | 向前缩进 |
alt + 鼠标左键 | 多光标编辑 |
ctrl + d | 选择相同元素的下一个 |
web三大核心技术
HTML
CSS
javaScoript
HTML
超文本标记语言
超文本: 文本内容+非文本内容(图片,视频,音频等)
初始代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
代码 | 描述 |
---|---|
<!DOCTYPE html> | H5文档声明,告诉浏览器这是一个html文件 |
<html> | html文件的最外层标签 |
lang="en" 表示是一个英文网站 | |
lang="zh-CN" 表示一个中文网站 | |
<meta charset="UTF-8"> | 元信息,是编写网页中的一些赋值信息 |
charset="UTF-8" 国际编码,让网页不出现乱码的情况 | |
<title> | 网页的标题 |
注释
写法
<!-- 注释的内容 -->
意义
- 1 为代码添加提示
- 2 将代码注释起来,方便以后使用
快捷键
ctrl+/
光标放在要注释的内容前面,执行ctrl+/
shift + alt + a
选中要注释的内容,执行shift + alt +a
标题和段落
标题
h标签
在一个网页中,h1标签很重要,并且一个.html文件中只能出现一次h1标签
h5和h6标签不常用
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
段落
p标签
<p>段落,会自动换行</p>
文本修饰标签
文本修饰标签 | 描述 |
---|---|
<strong> | 表示强调,会对文本进行加粗 |
<em> | 表示强调,灰度文本进行斜体 |
<sub>,<sub> | 下标文本,插入文本 |
<del>,<ins> | 删除文本,插入文本 |
图片标签
图片标签
img
属性 | 描述 |
---|---|
src | 引入图片的地址 |
alt | 当图片出现问题的时候,可以显示一段文字 |
title | 提示信息,鼠标放到图片上,会显示提示信息 |
width,height | 图片的大小(高,宽),默认单位是像素.当网络比较慢,图片未加载的时候,这两个属性可以先撑起图片所占据的位置 |
<img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg" alt="正在努力加载中" title="人生如梦" width="600" height="430">
引入文件的地址路径
相对路径
- .在路径中表示当前路径
- ..在路径中表示上一级路径
绝对路径
- C:\Users\inmeditation\Pictures\1.1\1.PNG
- https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg
<!-- 插入本地图片 -->
<img src="../../Pictures/1.1/1.PNG" alt="">
其中1.png文件在当前文件的上一层的上一层的Pictures目录中
<!-- 插入本地图片 -->
<img src="C:\Users\inmeditation\Pictures\1.1\1.PNG" alt="">
发现斜线和反斜线都可以正常预览,但是要尽量避免使用反斜线
跳转链接
a标签
属性 | 描述 |
---|---|
href属性 | 链接的地址 |
target属性 | 可以改变链接打开的方式 |
_self 在当前页面打开,默认方式 | |
_blank 新窗口打开 |
<!-- 为文字添加链接 -->
<a href="http://www.sunlizhao.cn" target="_blank">我的网站</a>
<!-- 为图片添加链接 -->
<a href="http://www.sunlizhao.cn"><img src="../../Pictures/1.1/1.PNG" alt=""></a>
base标签
改变a链接的默认跳转行为的
当整个页面的标签,都需要做成新窗口打开的方式
可以为每一个a标签设置target属性,也可以通过base标签全局设置
<head>
<base target="_blank">
</head>
跳转锚点
和跳转链接的区别
锚点是在当前页内间的跳转
常用在目录,回到行首和行尾等操作上
实现一
<a href="#html">html</a>
<a href="#css">css</a>
<a href="#JavaScript">JavaScript</a>
<h2 id="html">html</h2 id="html">
<p>模拟的段落</p>
...
<p>模拟的段落</p>
<h2 id="css">css</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>
<h2 id="JavaScript">JavaScript</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>
实现二
<a href="#html">html</a>
<a href="#css">css</a>
<a href="#JavaScript">JavaScript</a>
<a name="html"></a>
<h2>html</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>
<a name="css"></a>
<h2>css</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>
<a name="JavaScript"></a>
<h2>JavaScript</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>
特殊符号
可以解决冲突,左右尖括号,添加多个空格的实现
符号 | 描述 | 效果 |
---|---|---|
| 空格 | |
© | 版权 | © |
® | 注册商标 | ® |
< | 小于号 | < |
> | 大于号 | > |
& | 逻辑和 | & |
¥ | 人民币 | ¥ |
° | 摄氏度 | ° |
列表
无序列表
- 列表的最外层容器
- 列表项
规范:ul和li标签必须成对出现,他们之间不能有其他标签
代码:
<!-- 无序列表 -->
<ul>
<li><strong>第一项</strong></li>
<li>第二项</li>
</ul>
输出:
- 第一项
- 第二项
type属性,改变前面标记的样式(一般都是css去控制)
值 描述 disc 默认值,实心圆 circle 空心圆 square 实心方块 代码:
<ul type="circle">
<li><strong>第一项</strong></li>
<li>第二项</li>
</ul>
输出:
- 第一项
- 第二项
有序列表
- 列表的最外层容器
- 列表项
有序列表用的非常少,经常用的是无序列表,无序列表可以代替有序列表
type属性,改变前面标记的样式,一般都是用css控制
值 描述 1 默认值,数字有序列表 a 按字母顺序排列的有序列表,小写 A 按字母顺序排列的有序列表.大写 i 罗马字母,小写 I 罗马字母,大写 代码:
<ol type="A">
<li>第一项</li>
<li>第二项</li>
</ol>
输出:
- 第一项
- 第二项
定义列表
- 定义列表
- 定义专业术语或名词
- 对名词进行解释和描述
代码:
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>css</dt>
<dd>层叠样式表</dd>
<dt>JavaScript</dt>
<dd>网页脚本语言</dd>
</dl>
输出:
- HTML
- 超文本标记语言
- css
- 层叠样式表
- JavaScript
- 网页脚本语言
html1,初识html的更多相关文章
- web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 规范 HTML结构详解 {前端之前端初识}
前端之前端初识 前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...
- day 41 前端之前端初识
前端之前端初识 前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...
- Android动画效果之初识Property Animation(属性动画)
前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...
- 初识Hadoop
第一部分: 初识Hadoop 一. 谁说大象不能跳舞 业务数据越来越多,用关系型数据库来存储和处理数据越来越感觉吃力,一个查询或者一个导出,要执行很长 ...
- python学习笔记(基础四:模块初识、pyc和PyCodeObject是什么)
一.模块初识(一) 模块,也叫库.库有标准库第三方库. 注意事项:文件名不能和导入的模块名相同 1. sys模块 import sys print(sys.path) #打印环境变量 print(sy ...
- 初识IOS,Label控件的应用。
初识IOS,Label控件的应用. // // ViewController.m // Gua.test // // Created by 郭美男 on 16/5/31. // Copyright © ...
- UI篇(初识君面)
我们的APP要想吸引用户,就要把UI(脸蛋)搞漂亮一点.毕竟好的外貌是增进人际关系的第一步,我们程序员看到一个APP时,第一眼就是看这个软件的功能,不去关心界面是否漂亮,看到好的程序会说"我 ...
- Python导出Excel为Lua/Json/Xml实例教程(一):初识Python
Python导出Excel为Lua/Json/Xml实例教程(一):初识Python 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出 ...
- 初识SpringMvc
初识SpringMvc springMvc简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 s ...
随机推荐
- 2019-2-21-PowerShell-通过-WMI-获取设备厂商
title author date CreateTime categories PowerShell 通过 WMI 获取设备厂商 lindexi 2019-2-21 20:2:45 +0800 201 ...
- 【JQ】toggle / slideToggle / fadeToggle 的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- H3C PPP基本配置
- PythonWeb框架之Django
Django 简介: Django是一个开放源代码的Web应用框架,由Python写成.采用了MTV的框架模式,即模型Model,模板Template和视图View.此框架设计模式借鉴了MVC框架的思 ...
- git的安装与命令行基本的使用
1.https://git-scm.com/ 点击这个网址进入git的官方网站 2,.进去里面会有提示,64位于32位的,根据自己的电脑安装 3 下载完了过后就直接安装,一般会安装在c盘里面 ,进入安 ...
- C# 操作XML学习笔记
1. Customers.xml <?xml version="1.0" encoding="utf-8"?> <cust:customers ...
- 【图数据库】史上超全面的Neo4j使用指南
转自:https://cloud.tencent.com/developer/article/1336299 在这篇文章中: 第一章:介绍 Neo4j是什么 Neo4j的特点 Neo4j的优点 第二章 ...
- spring boot + thymeleaf 乱码问题
spring boot + thymeleaf 乱码问题 hellotrms 发布于 2017/01/17 15:27 阅读 1K+ 收藏 0 答案 1 开发四年只会写业务代码,分布式高并发都不会还做 ...
- H3C DHCP租约更新
- linux初始化和关停
如已提到的, 模块初始化函数注册模块提供的任何功能. 这些功能, 我们指的是新功能, 可以由应用程序存取的或者一整个驱动或者一个新软件抽象. 实际的初始化函数定义常常 如: static int ...