1. 首页
  2. 前端开发
  3. 前端零基础入门系列-HTML精讲
22683人加入学习
(0人评价)
前端零基础入门系列-HTML精讲
价格 ¥ 9.90
该课程属于 YQX17C015 请加入后再学习

合并单元格

  1. 行合并
  2. 列合并

column span--跨列合并--合并为一行

rowspan--跨行合并--合并为一列

合并行--在进行合并的时候，合并行必须冲上往下合并，从下往上合并会出错

总结：

 

[展开全文]
用户名 · 2018-04-30 · 7、表格元素2 0

表格元素1

HTML<table>标签

table定义了HTML表格

一个HTML包括<table>元素，一个或多个<tr>/<th>以及<td>元素

<tr>--表格行

<th>--表格头--文字加粗和居中特性

<td>--表格单元

<table> 元素的属性

width--宽度

border--边框大小、

cellpadding--内容与边框之间距离

cellspacing--单元格与单元格之间间隔

<table border="1" cellspacing="0" width="">
		<tr>
			<th></th>
			<td></td>
		</tr>
	</table>

 

[展开全文]
用户名 · 2018-04-30 · 7、表格元素1 0

表单元素2

复选框

<input type="checkbox" id="" checked="checked">

单选按钮

<input type="radio" checked="checked">

三种按钮：

  1. <input type="submit" value="提交"/>  
  2. <input type="button" value="点击"/>  
  3. <input type="reset" value="重置"/>  

表单文本域<textarea></textarea>

定义多行文本输入控件

cols rows规定textarea尺寸

最好用css来定义width和height

下拉框select元素

<p>
		<!-- 表单下拉框select元素 -->
		请选择年级：<br>
		<select name="" id="">
			<option value="2018">2018级</option>
			<option value="2017">2017级</option>
			<option value="2016">2016级</option>
		</select>
	</p>

总结：

[展开全文]
用户名 · 2018-04-30 · 6、表单元素2 0

表单元素

  1. form--收集信息  的表单
  2. 语法：<form name="" action="" method=""></form> 

单选按钮：

<input type="radio" id="" name="" vlaue="">

label标签：

  • 是input元素定义的标注
  • 不会向用户呈现任何效果

 

[展开全文]
用户名 · 2018-04-30 · 6、表单元素1 0

内联块级元素2

input元素--收集用户信息，根据type不同，多种形式

<input type="">

内联块级元素特点

  • 和其他行内元素都是一行
  • 高度、宽度、行高以及顶部和底部都不可设置
  • 元素宽度就是它包含的文字或图片的高度

总结:

 

[展开全文]
用户名 · 2018-04-30 · 5、内联块状元素2 0

内联块级元素

img元素向网页嵌入一幅图片

语法：

<img src="" alt=""/>

../向外跳一级

相对路径写法小结：

  1. 当xxx.html和图片同级时，直接引用图片，路径xxx.png
  2. 当xxx.html和图片的父级同级时，需进入包含图片的文件夹，再引用图片，路径 文件夹名称/图片名称以及图片后缀名
  3. 当xxx.html的父级和图片的父级同级时，需要先向外跳出一级，再进入到包含图片的文件夹在引用图片，路径 ../文件夹名称/图片名称以及图片后缀名

 

[展开全文]
用户名 · 2018-04-30 · 5、内联块级元素1 0

span元素：

布局元素，随内容而占用空间，div标签占用一行

HTML斜体字元素：

<i></i>  <em></em>

b strong 粗体字

总结：

常见内联元素定义：

  • <a>标签可定义锚
  • <b>标签给字体加粗
  • <em>标签定义为强调内容
  • <i>标签定义斜体文本效果
  • <span>标签组合文档中的行内元素
  • <strong>标签语气更强的强调内容

常g见内联元素特点：

  • 和其他行内圆度在一行上，
  • 元素的高度、宽度、行高及底部边距不可设置，
  • 元素的高度就是包含文字或图片的高度，不可改变

内联元素和块级元素区别：

行内元素在一条直线上排列，都是同一行的，水平方向排列

块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

行内元素与块级元素属性的不同，主要是盒模型属性上--

行内元素设置width无效，height无效（可以设置line-height），margin上下无效，padding上下无效

总结：

[展开全文]
用户名 · 2018-04-29 · 4、内联元素2 0

内联元素：

超链接元素：

<a>元素定义超链接，用于一张页面到另一张页面

<a>元素最重要的属性是href属性，它指示链接的目标

基本语法：

<a href="" target="" title=""></a>

href--网址或文件相对路径

target--打开新页面窗口方式

title--超链接分类标题

用超链接在本页面进行命名锚记:

<a href="#"></a>

<div id=""></div>

[展开全文]
用户名 · 2018-04-29 · 4、内联元素1 0

div元素

div标签可以把文档分割为独立的、不同的部分。

<div></div>

<div>是一个块级元素--新的一行

p元素--网页文本的一个段落

p元素和div元素区别：

P元素一般只包括文字，不进行嵌套

标题元素：

<h1>...<h6>--字体大小逐渐减小

列表元素

  • 有序列表
  • 无序列表
  • 自定义列表

 

 

 

 

 

[展开全文]
用户名 · 2018-04-23 · 3、块级元素1 0

内联块状元素：

  • 和其他元素在一行上
  • 元素的高度、宽度、行高及顶和低边距都可设置

总结：

[展开全文]
用户名 · 2018-04-23 · 2、HTML元素3 0

块元素特点：

  • 每个块级元素都从新的一行开始，其后的元素也是另起一行
  • 元素高度、宽度、行高以及顶和低边距都可以设置
  • 元素宽度在不设置条件下，是它本身父容器的100%（和父容器的宽度一样），除非设定一个宽度

行内元素特点：

  • 和其他行内元素都在一行上
  • 元素的高度、宽度、行高及顶部和底部边距不可设置
  • 元素的宽度就是它包含的文字或图片的宽度，不可改变
[展开全文]
用户名 · 2018-04-23 · 2、HTML元素2 0

html元素定义

HTML文档是由HTML元素定义的

HTML元素--从开始标签到结束标签的缩影代码

空的HTML元素

  • 没有内容的HTML元素称为空元素，空元素实在开始标签中关闭的
  • <br>就是没有关闭标签的空元素
  • 所有的元素都必须关闭

HTML元素分类：

  • 块状元素
  • 内联元素
  • 内联块状元素

块状元素--<div> <p> <h1>..<h6> <ol> <ul> <dl> <table> <form> 

内联元素--<a> <span> <br> <i> <em> <b> <strong> <lable> 

内联块状元素--<img> <input>

 

[展开全文]
用户名 · 2018-04-22 · 2、HTML元素1 0

HTML网页基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>--HTML新声明，指定文档类型

<html lang="en"></html>--指定标签范围内的袁术的语言种类

<head></head>--网页头部标签，文档的附加信息

<meta charset="UTF-8">--编码格式

<body></body>--网页具体内容代码部分

网页提倡的标准--结构（HTML）、表现（CSS）、行为（JavaScript）

HTML编辑软件

DW/HBuilder/Sublime Text /PHPStrom/

编辑器编码的注意事项：

  • 标记符中的标记元素用尖括号括起来,带斜杠的尖角标签"</xx>"，表示该标记说明结束
  • 大多数标记符成对使用，表示标记的起始和结束
  • 标记元素忽略大小写，空格要用特殊符号标记“&nbsp”"&nbsp"要用全小写
  • 许多标记元素具有属性说明，可用参数对元素进行新一部的限定，多个参数或属性项说明次序不限，其间用空格分隔开即可
[展开全文]
用户名 · 2018-04-14 · 1、HTML简介2 0

html简介

HTML发展史

HTML--超文本标记语言（HyperText Markup language）

  • 头
  • 主体

主流浏览器及其内核

浏览器的内核：

渲染引擎：负责取得网页的内容（HTML、XML、图像）、整理讯息（如CSS），以及计算机网页的显示方式，然后会输出至是显示或打印机

js引擎：解析JavaScript语言，执行JavaScript语言来实现网页的动态效果

注：浏览器的内核的不同于网页语法街市会有不同，所以渲染的效果也不相同。

内核倾向于渲染引擎

 

[展开全文]
用户名 · 2018-04-14 · 1、HTML简介1 0

HTML元素

HTML元素定义：

HTML结构：

<!DOCTYPE HTML>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>html元素</title>
</head>
<body>

</body>
</html>

sublime注释：选中内容，按Ctrl+/

html元素语法：

  • HTML元素以开始标签起始
  • HTML元素以结束标签终止
  • 元素的内容是开始标签和结束标签之间的内容
  • 某些HTML元素具有空内容
  • 空元素在开始标签内进行关闭（以开始标签的结束而结束，例如：</br>）
  • 大多数HTML元素可拥有属性

嵌套的HTML元素

大多数HTML可以被嵌套

HTML元素分类：

  1. 块状元素--<div> <p> <h1>..<h6> <ol> <ul> <dl> <table> <form>
  2. 内联元素--<a> <span> <br> <i> <em> <b> <strong> <lable>
  3. 内联块状元素--<img> <input>
[展开全文]
用户名 · 2018-04-14 · 2、HTML元素1 0

浏览器内核：

  • 渲染引擎：赋值取得网页的内容（HTML、XML、图像等）、整理讯息（CSS），以及计算网页的显示方式，然后输出至显示器或打印机
  • JS引擎：是解析JavaScript语言，执行JavaScript语言来实现网页的动态效果

内核倾向渲染引擎

web标准提倡结构、表现和行为相分离--HTML结构、CSS表现、JavaScript行为

web标准组成：

网页由三部分组成：结构、表现、行为

zo

[展开全文]
用户名 · 2018-04-14 · 1、HTML简介 0

授课教师

高齐林老师
高级讲师
张旺老师
高级讲师
赖帆老师
高级讲师

课程特色

PPT(7)
视频(16)

最新学员

学员动态

hecl 加入学习
user1b2nbk 开始学习 6、表单元素1
user1b2nbk 开始学习 5、内联块级元素
usersv9mbs 完成了 5、内联块级元素
usersv9mbs 开始学习 4、内联元素