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>
```
输出:
- 第一项
- 第二项
有序列表
1. 列表项
  
  有序列表用的非常少,经常用的是无序列表,无序列表可以代替有序列表
  
  type属性,改变前面标记的样式,一般都是用css控制
  
  值描述
  
  1 默认值,数字有序列表
  
  a 按字母顺序排列的有序列表,小写
  
  A 按字母顺序排列的有序列表.大写
  
  i 罗马字母,小写
  
  I 罗马字母,大写
  
  代码:
```
<ol type="A">

    <li>第一项</li>

    <li>第二项</li>

</ol>
```
  输出:
  1. 第一项
  2. 第二项
  定义列表
  定义列表
  
  定义专业术语或名词
  对名词进行解释和描述
  
  代码:
```
<dl>

    <dt>HTML</dt>

    <dd>超文本标记语言</dd>

    <dt>css</dt>

    <dd>层叠样式表</dd>

    <dt>JavaScript</dt>

    <dd>网页脚本语言</dd>

</dl>
```
  输出:
  
  HTML
  
  超文本标记语言
  
  css
  
  层叠样式表
  
  JavaScript
  
  网页脚本语言
  
  html1,初识html的更多相关文章
  1. web标准浏览器介绍开发工具介绍 HTML介绍 HTML颜色介绍规范 HTML结构详解 {前端之前端初识}
    前端之前端初识前端初识本节目录一 web标准二浏览器介绍三开发工具介绍四 HTML介绍五 HTML颜色介绍六规范七 HTML结构详解一 web标准 web准备介绍: 1. ...
  2. day 41 前端之前端初识
    前端之前端初识前端初识本节目录一 web标准二浏览器介绍三开发工具介绍四 HTML介绍五 HTML颜色介绍六规范七 HTML结构详解一 web标准 web准备介绍: 1. ...
  3. Android动画效果之初识Property Animation（属性动画）
    前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...
  4. 初识Hadoop
    第一部分: 初识Hadoop 一. 谁说大象不能跳舞业务数据越来越多,用关系型数据库来存储和处理数据越来越感觉吃力,一个查询或者一个导出,要执行很长 ...
  5. python学习笔记（基础四：模块初识、pyc和PyCodeObject是什么）
    一.模块初识(一) 模块,也叫库.库有标准库第三方库. 注意事项:文件名不能和导入的模块名相同 1. sys模块 import sys print(sys.path) #打印环境变量 print(sy ...
  6. 初识IOS,Label控件的应用。
    初识IOS,Label控件的应用. // // ViewController.m // Gua.test // // Created by 郭美男 on 16/5/31. // Copyright © ...
  7. UI篇（初识君面）
    我们的APP要想吸引用户,就要把UI(脸蛋)搞漂亮一点.毕竟好的外貌是增进人际关系的第一步,我们程序员看到一个APP时,第一眼就是看这个软件的功能,不去关心界面是否漂亮,看到好的程序会说"我 ...
  8. Python导出Excel为Lua/Json/Xml实例教程（一）：初识Python
    Python导出Excel为Lua/Json/Xml实例教程(一):初识Python 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出 ...
  9. 初识SpringMvc
    初识SpringMvc springMvc简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 s ...
  随机推荐
  1. 第三期行为规划——11.在C ++中实现第二个成本函数
    在大多数情况下,单一成本函数不足以产生复杂的车辆行为.在这个测验中,我们希望您在C ++中实现更多的成本函数.我们稍后会在本课中使用这两个C ++成本函数.这个测验的目标是创建一个成本函数,使车辆在最 ...
  2. 1、Python 日期时间格式化输出
    今天帮朋友写自动化脚本,又需要用格式化日期,又忘记怎么写了,还是写到自己博客里面,方便日后需要的时候看一眼吧.So,临时加一篇 Python 的文章. 1.Python的time模块 import t ...
  3. git卡在Resolving deltas 100%的解决办法
    很多同学都有这样的问题.不知道是git的问题,还是tortoisegit的问题. 我的版本: Git-1.8.4-preview20130916 TortoiseGit-1.8.6.0-32bit 已 ...
  4. Python--day46--mysql触发器
    触发器:当对某张表做:增删改操作时,可以使用触发器自定义关联行为 1,为什么需要创建mysql触发器? 比如说我往tb1表里面插入一条数据的时候,同时需要往日志表tb2中插入这条数据,这时候就需要创造 ...
  5. 模板——Treap实现名次树
    Treap 是一种通过赋予结点随机权值的一种满足堆性质的二叉搜索树,它很好的解决了二叉搜索树顺序插入组成链式的局限性. 名次树是指在treap的每个结点中添加附加域size,表示以它为根的子树的总结点 ...
  6. H3C 单区域OSPF配置示例二
  7. word 筛选过的网页,网页,单个文件网页
    1)筛选过的网页:保存后会生成 xxx.htm和xxx.files文件夹,删除了还原成Word文档所需的格式标记和功能,也就是说存为纯网页了,文件尺寸小:2)网页:保存后会生成 xxx.htm和xxx ...
  8. P1081 弹珠游戏
    题目出处灵灵和他的小伙伴聪聪发掘了一个骨灰级别的游戏--超级弹珠. 游戏的内容是:在一个 n*n 的矩阵里,有若干个敌人,你的弹珠可以摧毁敌人,但只能攻击你所在的行.列里的所有敌人,然后你就可以获得 ...
  9. 【js】react-native Could not find iPhone 6 simulator 和 Entry, ":CFBundleIdentifier", Does Not Exist 两种报错解决办法
    一.在运行rn app应用时,react-native run:ios 报错出现 Could not find iPhone 6 simulator 解决办法: 1.react-native r ...
  10. ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理（14）之会员中心管理
    源码下载地址:http://www.yealuo.com/Sccnn/Detail?KeyValue=c891ffae-7441-4afb-9a75-c5fe000e3d1c 会员中心,主要包含了会员 ...

值	描述
1	默认值,数字有序列表
a	按字母顺序排列的有序列表,小写
A	按字母顺序排列的有序列表.大写
i	罗马字母,小写
I	罗马字母,大写

值	描述
disc	默认值,实心圆
circle	空心圆
square	实心方块

html1,初识html

初始代码

注释

标题和段落

文本修饰标签

图片标签

引入文件的地址路径

跳转链接

跳转锚点

特殊符号

列表

无序列表

有序列表

定义列表

html1,初识html的更多相关文章

随机推荐

热门专题