走进HTML学习一

简介: 走进HTML学习一

@TOC

在这里插入图片描述
CSS 预处理器

HTML、CSS:看到设计稿就能做网页
JavaScript学些什么:变量、数据类型、控制流程、内置对象、DOM、BOM
node与npm:node会安装就行,npm会常用命令
vue和vue全家桶:熟练常用功能,会做项目即可
数据交互,最好懂一些后台。ajax,node搭建后台(koa,express,egg)
第一层,做出实训项目:博客系统,内容管理系统
第二层:了解原理
第三层:优化项目
第四层:扩展后端、扩展算法、扩展。。。

不要盲目的去学那些花里户哨的东西,先做出一个项目再说。

w3school在线教程

网页的最基本结构是HTMLCSS是用来美化网页,JS能让我们的我那个页动起来,产生很多交互行为,JS原生代码学起来比较复杂,因此我们要学习Jquery,一个封装JS的库,为实现前后端的分离,我们要学习当下最主流的框架VUE

网页速成

一、初识HTML

1、什么是HTML

Hyper Text Markup Language超文本标记语言

  • 超文本包括:文字、图片、音频、视频、动画等
  • 现在主要的是html5+css3

    2、W3C

  • World Wide Web Consortium 万维网联盟
  • 标准包括
    1. 结构化标准语言(HTML,XML)
    2. 表现标准语言(CSS)
    3. 行为标准(DOM,ECMAScript)

二、网页基本标签


<!-- -->代表注释
<!DOCTYPE html>代表使用规范是html
<meta>描述性标签,它用来描述我们网站的一些信息,一般用来做SEO
<meta name=“keywords” content=“描述性的关键字,作为搜索关键字”>
<meta name=“description” content=“描述该网站是做什么的”>
<head>标签代表网页头部
<body>标签代表网页主体

1、标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2、段落标签

<p></p>

3、换行标签

<br/>

4、水平线标签

<hr/>

5、字体样式标签

粗体:<strong>I love you</strong>
斜体:<em>I love you</em>

6、特殊符号

空格:&nbsp;
大于号:&gt;
小于号:&lt;
版权符号:&copy版权所有
特殊符号的快速记忆:&开头,;结尾

三、图像,超链接,网页布局

1、图像标签

../:表示上一级目录
<img src="path" alt="text" title="text" width="x" height="y"/>
src:表示图像地址
alt:表示图像加载失败之后的替代文字【必填】
title:表示鼠标悬停提示的文字
width:表示图像宽度
height:表示图像高度

2、超链接标签及其应用

<a href="path" target="目标窗口位置>点击跳转到链接的文本或图像</a>
href:表示链接路径【必填】
target:表示链接在哪个窗口打开,_blank表示在新标签中打开,_self表示在自己的网页中打开
目标窗口位置:常用值——_self,_blank

2.1、文字链接

<a href="https://www.baidu.com>点击跳转到百度</a>

2.2、图像链接

<a href="https://www.baidu.com>
    <img src="../resources/images/1.jpg" alt="跳转图片" title="点击跳转" width="300" height="300">
</a>

2.3、页面间链接

3、锚链接

  • 需要一个锚标记
  • 跳转到标记处
    ```html 顶部
    此处省略若干行代码

回到顶部

### 4、从一个页面链接到另一个页面
`3.html`
```html
<a href="4.html#down>点击跳转</a>

4.html

<a name=”down“>跳转到该处</a>

5、功能性链接

5.1、邮件链接mailto

<a href=”mailto:2858802417@qq.com“>点击联系我</a>

5.2、QQ链接


百度搜索QQ推广官网
生成自己的推广

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::51" alt="点击这里与我取得联系" title="点击这里与我取得联系"/></a>

6、行内元素和块元素

  • 块元素
    无论多少,该元素独占一行
  • 行内元素
    内容撑开宽度,左右都是行内元素的可以在一行

    四、列表,表格,媒体元素

    1、列表

    列表是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息

    1.1、无序列表


    应用范围:导航、侧边栏……
    <ul>
      <li>Java</li>
      <li>Python</li>
      <li>C#语言</li>
      <li>运维</li>
      <li>前端</li>
    </ul>
    

1. 有序列表(order list)


应用范围:试卷、问答……

<ol>
    <li>Java</li>
    <li>Python</li>
    <li>C#语言</li>
    <li>运维</li>
    <li>前端</li>
</ol>

2. 自定义列表


应用范围:公司网站底部……

<dl>
    <dt>姓名数据库</dt>
        <dd>Mark</dd>
        <dd>Jery</dd>
        <dd>Tom</dd>
        <dd>Just</dd>
    <dt>年龄数据库</dt>
        <dd>18</dd>
        <dd>25</dd>
        <dd>21</dd>
        <dd>19</dd>
</dl>

2、表格

优势:简单通用,结构稳定
基本结构:单元格,行,列,跨行,跨列
tr:表示行
td:表示列
colspan=”行数“:跨列
rowspan=”列数“:跨行

<table border="1px">
    <tr>
        <!--colspan跨列-->
        <td colspan="4">1-1</td>

    </tr>
    <tr>
        <!--rowspan 跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

3、媒体元素

src:资源路径
controls:控制条
autoplay:自动播放

3.1、视频元素 video

<video src="../resource/video/video.mp4" controls autoplay></video>

3.2、音频元素 audio

<audio src="../resource/video/music.mp3" controls autoplay></audio>

五、页面结构

1、页面结构分析

2、内联框架iframe

<iframe src="path" name="mainFrame"></iframe>
path:表示引用页面地址
mainFrame:表示框架标识名

<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://blog.zhuhukang.com" target="hello">点击跳转至我的博客</a>
相关文章
|
3月前
|
存储 数据安全/隐私保护
走进HTML学习二
走进HTML学习二
|
4月前
|
前端开发
【前端学习从青铜到王者】—HTML常用标签(二)
【前端学习从青铜到王者】—HTML常用标签(二)
|
4月前
|
前端开发
【前端学习从青铜到王者】—HTML介绍(一)
【前端学习从青铜到王者】—HTML介绍(一)
|
7月前
|
移动开发 JavaScript HTML5
HTML5 基础学习
HTML5 基础学习
33 0
|
2月前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
48 0
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
64 1
|
3月前
|
移动开发 Python HTML5
Python办公自动化【发送普通邮件、发送HTML邮件、发送附件邮件-smtplib、批量发送邮件-smtplib、发送邮件-zmail】(八)-全面详解(学习总结---从入门到深化)
Python办公自动化【发送普通邮件、发送HTML邮件、发送附件邮件-smtplib、批量发送邮件-smtplib、发送邮件-zmail】(八)-全面详解(学习总结---从入门到深化)
44 0
|
3月前
|
JSON 定位技术 API
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)
33 0
|
3月前
|
移动开发 JavaScript 前端开发
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)(上)
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)
43 0