专栏首页达达前端前端零基础入门:页面结构层HTML

前端零基础入门:页面结构层HTML

HTML页面结构层HTML 分以下方面学习: HTML基础, HTML表格, HTML表单, 搭建网页结构

html基础

学习前端的第一门课程,为HTML基础,HTML标记语言,它是网页制作的第一步。

学习内容: HTML概念,了解HTML发展史,基础语法,常用标签(段落,图片,链接等) 结合小例子

什么是HTML HTML(Hypertext Markup Language)即超文本标记语言

html发展史 1993(IETF)HTML1.0 1995(W3C)HTML2.0 1996(W3C)HTML4.0 1997(W3C)HTML4.0.1 2000(W3C)XHTML1.0 2001(w3c)xhtml1.1 xhtml2.0? 2004年(WHATWG)HTML5草案 2008年(合并)HTML5正式版 2014年HTML5定稿

html特点

HTML不需要编译,直接由浏览器执行 HTML文件是一个文本文件 HTML文件必须使用HTML或htm为文件名后缀 HTML大小写不敏感,HTML与html一样

HTML是一个文本文件

file

HTML基础语法

学习内容 HTML基本结构 HTML标签 HTML元素 HTML属性 注解

注解:div标签为块级结构布局元素,因此将在css中结合盒模型进行讲解。

HTML基本结构

<html>
// 头部信息
<head>
 <title>标题</title>
</head>
// 网页内容
<body>
 网页主体内容
</body>
</html>

file

file

html标签属性

语法: <标签名 属性名1=“属性值” 属性名2=“属性值” ...> ... </标签名>

DOCTYPE文档类型声明

<!DOCTYPE> 声明必须放在html文档第一行

<!DOCTYPE> 声明不是HTML标签

<!DOCTYPE html>
<html>
<head>
 <!-- 网页头部内容 -->
 <title>标题</title>
 </head>
 <body>
 <!-- 网页主体内容 -->
 </body>
</html>

网页编码设置 问题: 当网页显示出现乱码时 解决: 在<head></head>标签之间添加

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

注:utf-8,GB2312,gbk等编码

file

文字和段落标签

标题标签:

<h1></h1> ~ <h6></h6>

file

段落标签:

<p></p>

align对齐属性值:

值,描述
left 左对齐内容
right 右对齐内容
center 居中对齐内容
justify 对行进伸展,这样每行都可以有相等的长度。

换行标签:

<br/>
<p align="justify"></p>

列表标签

html标签 html标记标签通常被称为HTML标签 HTML标签是由尖括号包围的关键词 HTML标签通常是成对出 标签对中的第一个标签是开始标签,第二个标签是结束标签

什么是HTML HTML是用来描述网页的一种语言 HTML超文本标记

无序列表

<ul>
 <li>1</li>
 <li>2</li>
</ul>

type属性值: 值,描述 disc:圆点 square:正方形 circle:空心圆

有序列表

语法:

<ol>
 <li>1</li>
 <li>2</li>
</ol>

type属性值: 值,描述: 1,数字1,2,。。。 a,小写字母a,b。。。 A,大写字母A,B。。。 i,小写罗马数字i I,大写罗马数字I

列表标签 定义列表:

<dl>
 <dt>定义列表项</dt>
  <dd>1</dd>
    <dd>2</dd>
    
 <dt>列表</dt>
  <dd>1</dd>
    <dd>2</dd>
</dl>

定义标签内可以有多个<dt> 对于每一个<dt>可以有多个<dd>

图像和超链接标签

图像标签 语法:

<img src=" " alt=" " ...>

img属性: 属性,值,描述

src,url,显示图像的Url alt,文字,图像替代文本 height,数值和百分比,图像的高 width,数值和百分比,图像的宽

HTML路径: 相对路径 绝对路径

超链接标签 语法:

<a href=" ">内容</a>

href:链接地址,可以是内部链接或外部链接

超链接(空链接—target-title属性)

超链接标签 属性,描述 href:链接地址 target:链接的目标窗口

_self, _blank, _top, _parent

title链接提示文字 name链接命令

修饰标签和特殊符号

文字斜体:<i></i>,<em></em>

加粗:<b></b>,<strong></strong>

下标:<sub>

上标:<sup>

特殊符号: 属性,显示结果,描述

&lt; < 小于号或显示标记
&gt; > 大于号或显示标记
&reg; ® 已注册
@copy; © 版权
&trade; ™ 商标
&nbsp; Space 不断行的空白

列表标签应用场景

锚链接(同一页面)

超链接标签 定义锚:

<a href="#锚名1">目录1</a>
<a href="#锚名2">目录2</a>
<a href="..." name="锚名1" >内容</a>
xxxx
<a href="..." name="锚名2">内容</a>
xxxx

在不同页面如何定义锚点 定义锚(不同页面):

网页1:<a href="网页名称#锚名">...</a>
网页2:<a name="锚名">...</a>

html基本结构: 语法:<标签名></标签名> 例如:<html>...</html>

规范: 1,<和>括起来 2,成对出现,开始标签和结束标签,结束标签比开始标签多了一个/

HTML表格

基础表格

学习内容: 了解表格应用场景 表格基本结构 如何操作表格 表格属性 表格跨行跨列 表格嵌套

数据的展示

HTML表格 <table>表格 <tr><td>单元格


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 1-html标签介绍

    onkeypress在用户按下按键后,按着按键时触发。该属性不会对所有按键生效,不生效的有,alt,ctrl,shift,esc

    达达前端
  • 面试题必备-web页面基础

    html标签是由<>包围的关键词 html标签是成对出现的 有部分标签是没有结束标签的,叫单标签, 页面中所有的内容,都是要放在HTML标签中的

    达达前端
  • 2-HTML的标签

    <video src="" controls="controls"></video>

    达达前端
  • html基础

    HTML简介 超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。 本质上是浏览器可识别的规则,我们按...

    人生不如戏
  • HTML5 & CSS3初学者指南(1) – 编写第一行代码

    介绍 网络时代已经到来。现在对人们来说,每天上网冲浪已经成为一种最为常见的行为。 在网页浏览器中输入一段文本地址,就像http://www.codeprojec...

    葡萄城控件
  • HTML初学笔记1

    [TOC] 什么是HTML HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) ...

    听城
  • 外链建设:HTML链接写法

    如果你们熟悉HTML链接这节课可以忽略。但在我接触过的企业或者市场营销员工很多都不知道HTML链接写法。他们在做SEO的时候花了很多时间在学习HTML这是方向性...

    林雍岷
  • 「人物特写」微软加速器CEO罗斌:小公司只做小公司的生意,就是个伪命题

    镁客网
  • 嵌入式,过时了没?

    疑惑一 作者你好,我是本科生,之前是学java的,但是后来签的工作是嵌入式软件开发,我对嵌入式开发不太了解的,这行有前景吗? 这是小编在后台接收到的小伙伴的疑惑...

    程序员互动联盟
  • 你想知道的Socket,统统打包给你~

    实现网络间通信,要解决一个首要问题是-如何唯一标识一个进程,在网络上,通常利用ip地址+协议+端口号唯一标示网络中的一个进程。IP层的ip地址可以唯一标示...

    软测小生

扫码关注云+社区

领取腾讯云代金券