前端与移动开发入门基础html完结版

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Denisedan/article/details/95673683

前端与移动开发

PC端

主要是电脑端,主要是网页开发

移动端

泛指可移动的设备(手机 平板) 可以开发运行在移动端的页面 如手机app 小程序

认识网页

网页主要由文字 图片 链接 音频 视频 动画等元素构成

常见的浏览器及内核(了解)

  • IE浏览器(内核trident)
  • Edge浏览器(同ie)
  • 谷歌浏览器(内核chromium/blink)
  • Safari浏览器(内核webkit)
  • 火狐浏览器(内核gecko)

web标准

通过web标准 让不同的浏览器 展示统一的内容

web标准的构成

html 结构层 负责整个网页元素的整理及分类
css 样式层 负责网页元素的版式 颜色 字体大小等外观样式
javascript 行为层 负责网页中的交互行为编写

程序员开发工具(IDE)

  • sublime
  • webstrom
  • vscode
  • HBuilder

HTML

hyper text markup language
超文本标签语言
只要带有尖括号的就是标签

vscode中插件安装

  • open in browser 从默认浏览器中打开
  • auto rename tag 自动修改标签名字
  • Vetur 让vscode软件提高对vue的支持(比如高亮 图标…)
  • Vue 2 snippets vue关键语法的提示

vscode快捷方式

  • alt + shift + ↓ 快速赋值当前行到下一行的位置
  • ctril + / 注释代码
  • ctrl + 回车 快速另起一行
  • alt + r 从默认浏览器中打开
  • ctrl + z 撤销
    (可以在键盘快捷方式搜索open in default browser 修改快捷方式)
  • 勾选自动保存
    在这里插入图片描述

HTML固定结构代码

//当前的文档类型是html5
<!DOCTYPE html>

//html 顶级标签/根节点
//lang 当前的文档语言  en 英文
<html lang = 'en'>

//头部标签  用来存储某些辅助型标签 如title base link等
	<head>
		<title>网页标题</title>
	</head>
	<body>
	//网页的内容
	</body>
</html>

快速搭建固定结构代码
html+tab
html:5+tab
!+tab(推荐)
三者选一

注意
记得文件添加后缀名.html
所有的代码符号都是英文标点符号
建议安装第三方输入法 我用的是搜狗

在这里插入图片描述

HTML标签

单标签

  • 只有一对尖括号
    <br />
    <img />

双标签

  • 有两对尖括号
    <p></p>
    <h1><h1>

标签的关系

  • 嵌套关系/父子关系
<div>
	<p></p>
</div>
  • 并列关系/兄弟关系
<p></p>
<div></div>

排版标签

  • 标题标签
    在这里插入图片描述

注意
< h1 >标签是最重要的标题标签 一个页面只能出现一次
一般h1给logo使用
只有h1到h6标签
重要等级依次递减 大小依次递减

  • 段落标签

浏览器对空格以及回车不敏感,不管有多少空格和回车 都只会编译成一个空格 这就是所谓的空格合并现象

< p >标签是段落标签 起到换行作用 独自占据一行

在这里插入图片描述

  • 水平线标签

< hr >标签 是一个单标签
一条水平线与屏幕同宽
文章中起到分割的作用

  • 换行标签

< br >标签 换行标签
是一个单标签

  • 拓展标签

< pre >标签 可以保存带有格式的文字
< blockquote >标签 引用长文本

  • 布局标签(重点)
    • div 独占一行 是一个块级元素
    • span 一行显示多个 是一个行内元素
  • 文本格式化标签(主要用前四种)
文本格式化标签 作用
strong标签 文字加粗效果
ins标签 文字带有下划线
em标签 文字倾斜
del标签 文字删除线
b标签 文字加粗效果
u标签 文字带有下划线
i 标签 文字倾斜
s标签 文字删除线
  • 无序列表

< ul >标签代表无序列表
< li > 标签存放数据内容
存放没有顺序的数据
ul标签中只能有li标签
如果有其他标签 要放在li标签中
li标签没有数量限制

<ul>
	<li></li>
	<li></li>
	<li>
		<p></p>
	</li>
</ul>
  • 有序列表

< ol >标签代表有序列表
存放的是有顺序的数据
不能随便修改顺序
ul标签中只能有li标签
如果有其他标签 要放在li标签中
li标签没有数量限制

<ol>
	<li></li>
	<li></li>
	<li>
		<p></p>
	</li>
</ol>
  • 自定义列表

一般用来存储有从属关系的数据
dl 自定义列表
dt 存储大类
dd 存储小类

<dl>
	<dt>手机品牌</dt>
	<dd>苹果</dd>
	<dd>三星</dd>
	<dd>华为</dd>
</dl>
  • 表格标签

table 代表一个表格
tr 代表表格的行
td 代表行内的单元格

  • 表格属性
属性名 含义
border 表格边框
cellspacing 单元格与单元格边框之间的空白间隙 默认2px
cellpadding 单元格内容到单元格边框之间的空白间隙 默认1px
width 表格宽度
height 表格高度
align 表格在网页中水平对齐方式 left center right

三参为0
border cellpadding cellspacing 为0
table 中设置align = ‘center’ 表示表格在页面中居中
tr 中设置align = ‘center’ 表示行内文字居中
th 中设置表头的数据
caption 表格的标题
thead 表格的头部
tbody 表格的主体

//快捷键 tr>td*3
<table border = '1px'  cellspacing = '0'  width = ' 500px' height = '300px' align = 'center' >
	<caption><h1>表格的标题</h1></caption>
	<thead>
		<tr align = 'center'>
		<th></th>
		<th></th>
		<th></th>
	</tr>
	</thead>
	<tbody>
		<tr align = 'center'>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	</tbody>
</table>
  • 合并单元格

从上往下合并 跨行合并 rowspan
从左往右合并 跨列合并 colspan
合并后不需要的数据要删除

  <table border = '1px'  cellspacing = '0'  width = ' 500px' height = '300px' align = 'center' >
        <caption><h1>表格的标题</h1></caption>
        <thead>
            <tr align = 'center'>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        </thead>
        <tbody>
        <tr align = 'center'>
            <td rowspan="2">121202</td>
            <td colspan="2">张三</td>
            <!-- <td>18</td> -->
        </tr>
        <tr align = 'center'>
            <!-- <td>121205</td> -->
            <td>李四</td>
            <td>20</td>
        </tr>
        </tbody>
    </table>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 表单标签

form标签
用于收集用户信息

<form>
	<input type = 'text' placeholder = '请输入账号'>
	<input type = 'password' placeholder = '请输入密码' maxlength ='6'>
	<input type = 'radio' checked name ='gender'>男
	<input type = 'checkbox' checked name = 'fruit'>草莓
</form>

注意
1.单选框要实现互斥效果 要利用name属性进行分组
都设置同一个name值

  • 表单控件
表单属性 含义
type 控件的类型
type = ‘text’ 文本输入框
type=‘password’ 密码输入框
type=‘radio’ 单选框
type=‘checkbox’ 复选框
type=‘button’ 普通按钮
type=‘submit’ 提交按钮
type=‘reset’ 重置按钮
type=‘file’ 文件域
type=‘image’ 图片按钮
type=‘date’ 万年历
value 默认值 用于记住账号密码
placeholder 占位符
maxlength 控制输入的最大字符数 用数字赋值即可
checked 默认选中状态
  • 新版本按钮
    <button>新版本按钮</button>
  • label标签
//第一种方式
<label>
	性别: <input type = 'radio' name = 'gender'>男
</label>

//第二种方式(label for id)
//通过for属性 找到对应的id进行绑定 更严谨
<label for = 'male'>男</label>
性别: <input type = 'radio' name = 'gender' id = 'male'>

  • textarea文本域(了解)
//用来给用户输入大段的文本
//rows 显示的行数
//cols  显示的字符数
<textarea rows ='20' cols ='50'></textarea>
  • select下拉列表
//option 下拉列表的选项值
//selected 下拉框中默认选中
<select>
	<option>2013</option>
	<option>2014</option>
	<option selected>2015</option>
</select>

标签的属性

<标签名 属性名=‘属性值’></标签名>
属性的个数没有限制 中间用空格隔开

  • 图片标签
<img src = '图片的路径.jpg'  alt ='图片加载失败时显示的图片描述文字' title = '鼠标悬停时显示的图片描述文字' width = '200px'>
//src 图片的路径的后缀名必须要有
//width/height 修改图片的尺寸
//如果不想图片变形 让图片等比例缩放 只控制一边 另外一边会自动等比例缩放
  • 超链接标签
<a href = '目标页面路径' target = '_blank'>点击跳转</a>
//a标签中必须有内容 否则无法跳转
//target 控制页面的跳转方式 
//target ='_self ' 默认值 不保留原来的页面
//target = '_blank' 保留原来的页面

注意
如果想把页面上所有的a标签都保留原来的页面进行跳转 可以使用 < base target = ‘_blank’ >
base标签写在head标签中
一个页面只需要写一次 就可以控制所有的a标签

  • 打开网络地址 必须保证域名完整
<a href = 'http://www.baidu.com'>百度</a>
  • 打开网络资源文件
<a href  = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562937841212&di=76fccdd5b9daad767a2b522c2b886f96&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F20%2F20141220003959_NTkZE.jpeg'>明星</a>

在这里插入图片描述

  • 空链接
<a href = '#' >我是一个空链接</a>

锚点定位

给目标元素设置一个唯一标识
id具有唯一性 不能重复
让a标签找到目标元素 通过 href = ‘# + id’
锚点定位要确保有滚动条出现 才能实现锚点定位

<p id = 'demo'></p>
.
.
.
.
<a href = '#demo' >锚点定位</a>

转义符(了解)

转义符 符号/含义
&lt ; < 小于号
&gt ; > 大于号
&nbsp ; 空格
&copy ; ©版权

路径

在电脑中的路径体现 其实就是一个个文件夹
路径就是帮助你在这些文件夹中找到你想要的目标文件 不管是图片 视频 还是音频

  • 绝对路径(了解)

完整的文件路径
带有盘符的路径就是绝对路径
完整的网络地址
缺点: 可移植性差

  • 相对路径(重点)

图片与html在同一级目录 直接通过图片的名字找到

<img src = '1.png'>

图片在html的下一级目录

<img src = '目录/1.png>

图片在html的上一级目录

<img src = '../1.png>

图片与html不在同一文件夹

<img src = '../目录/1.png>

注意
跨盘符无法使用相对路径 只能使用绝对路径

展开阅读全文

没有更多推荐了,返回首页