html 第一天
1、网页的组成部分
结构 html/xhtml
表现 css
行为 js
2、标准
w3c
html和css标准
ECMA
js标准
3、html 的版本
html 超文本标记语言
xhtml 可扩展超文本标记语言
h5
4、项目的命名
1.字母、数字、下滑线组成,不能中文,特殊符号
2.开头小写字母开头
5、文件的组成部分
css、js、images、html文件
6、编辑器的使用
必备的插件安装
1.汉化插件 chinese
2.打开浏览器插件 open in browser 扩展属性里可设置默认浏览器输入chrome
vscode alt+b浏览器打开网页
7、标记分为两种:
单标记(空标记)和双标记
<<标记名 属性=“属性值” 属性=“属性值”></标记名>
<标记名 属性=“属性值” >
标记可以看做盒子,装东西,
属性可以设置盒子的功能
8、标记的嵌套关系
一层嵌套:父子关系 (设置缩进,选中内容按tab键)
多层嵌套:后代关系
9、html的基本结构
<!DOCTYPE html>
<!-- 声明文档类型 html -->
<html>
<!-- html网页 -->
<head>
<!-- head网页的头部 -->
<title></title>
<!-- title网页文件的标题 -->
<meta charset="utf-8">
<!-- 设置文件的编码格式防止中文乱码 -->
</head>
<body></body>
<!-- 网页内容 -->
</html>~~
一些常用标记
~~
自动换行
文本标题<h1>文章或者重点标题<h2>大模块的标题<h3>小模块的标题<h4> h4标签<h5> h5标签<h6> h6标签
段落
<p></p>网页结构
div不换行
加粗
b和strong倾斜
i和em
线条
u 下划线
s 删除线
文本标签
span单标记
强制换行 <br /> 水平分割线 <hr />
转义字符
版权信息 © 商标 ® 空格 大于号和小于号 > <
列表
有序列表
<ol type="a" start="4">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ol>无序列表
<!--
无序列表的结构
ul和li组成
无序列表的属性
type 排序类型
disc 实心圆
circle 空心圆
square 实心方块
-->
<ul type="square">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>自定义列表
<dl>
<dt>商品的图片</dt>
<dd></dd>
</dl>图片 img
jpg
png
gif
文件的路径
同级文件 文件名
打开文件夹 文件名/
返回上一层 ../
img 图片
属性
src 插入图片的路径(图片所在的位置)
alt 优化图片
图片正常显示,alt值会给搜索引擎设置图片的关键字提示
图片显示错误,alt值会直接在浏览器显示,给用户一个提示
title 悬浮提示框<img src="https://hao123-online-img.su.bcebos.com/res/r/image/2021-4-6/dd.jpg" alt="美女" title="点击一下,了解更多"/>a超链接
属性
href 超链接跳转的url
线上网址 http://网址
本地文件 文件路径
下载功能 不能是浏览器直接打开的类型
title 悬浮提示框
target 超链接的打开方式
_self 原网页覆盖
_blank 新建打开<a href="http://www.baidu.com" title="百度" target="_blank">百度</a><a href="html/007_图片.html">点击跳转分页</a>
<a href="个人介绍.pptx">下载ppt</a>
















