Web基本笔记~01.HTML基础元素

一 : 标题

标题（Heading）是通过 < h1 >- < h6 > 标签进行定义的。

< h1 > 定义最大的标题。 < h6 > 定义最小的标题。

<!DOCTYPE html>
<html><head><title></title><meta charset="utf-8" /></head><body><h1>标题A</h1><h2>标题B</h2> <h3>标题C</h3> <h4>标题D</h4> <h5>标题E</h5> <h6>标题F</h6></body>
</html>

标题来呈现文档结构是很重要的,因为用户可以通过标题来快速浏览您的网页。

将 h1 用作主标题，其后是 h2，再其次是 h3，以此类推

二 : 段落

段落是通过 < p > 标签定义的。如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 < br > 标签

 <p>这是一个段落 </p><!--     这是一行注释        --><br/><p>br标签可以实现换行</p>

三 : 水平线

< hr/ > 标签在 HTML 页面中创建水平线可用于分隔内容。

<hr color="" width="" size="" align=""/>

color：设置水平线的颜色

width：设置水平线的长度

size：设置水平线的高度

align：设置水平线的对齐方式（默认居中），可取值 left | right

四 : 图片

< img > 标签定义 HTML 页面中的图像。

<img src="" alt="" title="" width="" height=""/>

src：路径（相对路径、绝对路径）

Alt：规定图像的替代文本

Width：规定图像的宽度

Height：规定图像的高度

Title：鼠标悬停在图片上给予提示

五 : 超链接

HTML 使用标签 < a >来设置超文本链接。在标签< a > 中使用了 href 属性来描述链接的地址。

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

六 : 文本格式化标签

　　<body><b>粗体文本</b><em>着重文字</em><i>斜体字</i><small>小号字</small><strong>加重语句</strong><sub>下标字</sub><sup>上标字</sup><ins>插入字</ins><del>删除字</del></body>

七 : 列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用

标签

 <ul type="square"><li>无序列表</li><li>无序列表</li></ul>

type 拥有的选项

disc 默认实心圆

circle 空心圆

square 小方块

none 不显示

有序列表

 <ol type="a"><li>有序列表</li><li>有序列表</li><li>有序列表</li></ol>

< ol >< li >的属性 type 拥有的选项

1 表示列表项目用数字标号（1,2,3...）

a 表示列表项目用小写字母标号（a,b,c...）

A 表示列表项目用大写字母标号（A,B,C...）

i 表示列表项目用小写罗马数字标号（i,ii,iii...）

I 表示列表项目用大写罗马数字标号（I,II,III...）

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 < dl > 标签开始。每个自定义列表项以 < dt > 开始。每个自定义列表项的定义以 < dd > 开始。

　　<body><dl> <dt>animal</dt><dd>- is dog</dd> <dt>foot</dt> <dd>- i love apple</dd> </dl></body>

八 : 表格

表格在数据展示方面非常简单，并且表现优秀，通过与 CSS 的结合，可以让数据变得更加美观和整齐。单元格中内容的填充间距通过 cellpadding(默认 1px)属性来设置，单元格与单元格之间的间距通过 cellspacing(默认 1px)属性来设置。一般表格的第一行是标题，并且是文本居中、加粗，将 td 换成 th。

　　<body><table border="1px" align="center" cellpadding="10" cellspacing="0"><tr align="center"><th>姓名</th><th>年龄</th><th>部门</th></tr><tr align="center"><td>菠萝菠萝蜜</td><td>21</td><td rowspan="2">行合并</td></tr><tr><td colspan="2">列合并</td></tr></table></body>

Web全栈~01.HTML基础元素相关推荐

web全栈-第一讲：web开发基本知识点
移动互联网时代越来越凸显前端技术重要性! 最近在学习万门教育的WEB全栈工程师零基础特训班课程. 第一讲基本知识点以京东网站讲解网站案例. 看网站页面先看布局,了解共性.从大处着眼.小处着手. 整 ...
开课吧python全栈靠谱么-杭州Web全栈
Web全栈招生简章开课吧简介开课吧,中国有口皆碑的互联网人学习平台,为互联网从业者及潜在从业者提供O2O职业学习.就业.职业成长服务,让学习者收获互联网从业技能和能力,从而实现从"校园& ...
python学全栈还是运维_Python全栈学习——Python基础及Web开发
原标题:Python全栈学习--Python基础及Web开发在DevOps火热的敏捷行业中,无论是开发还是运维都在互联网快速发布下练就了一身的本领,微服务下的敏捷开发体系及智能运维体系都在实战中逐步 ...
Web全栈开发基础（小白入门版本）
博客传送门近几个月认真写了写Web全栈代码,有点小收获这里分享一下.我还做了个PPT,资源路径欢迎拍砖指点! Web全栈开发是一个听起来很虎的名词.本文从技术层面解释全栈开发,能帮助没有全栈概念, ...
php web教程视频教程下载,Web全栈 PHP+React系列视频教程下载
Web全栈 PHP+React系列视频教程下载课程介绍: 此套Web全栈 PHP+React系列视频教程覆盖PHP.前端和区块链应用开发三大热门职位,教程对网络基础.前端基础(HTML CSSJav ...
【融职教育】Web全栈开发就业班核心优势
IT技能培训行业现在是一片红海,在红海中求生存和发展就要具有一定的特色和竞争优势.本质上都是为学员提供更好的服务,提高教学品质,让学员可以学会技术,掌握足够工作技能,具有向企业交付的能力,让学员不仅可 ...
Bootstrap实战练习---Web全栈课程体系(表格+巨幕)
Bootstrap实战练习-Web全栈课程体系(表格+巨幕) 原网页效果图连接我的网页效果 -我的代码 <!DOCTYPE html> <html> <head> ...
苏州木渎计算机课程培训,苏州木渎H5/web全栈开发培训
课程名称:H5/web全栈开发课程类型:网页设计班型:全日制/周末班/晚班适用校区:全校区课程详情: 由于网络的发展以及人们使用网络的频繁性,企业需要通过网页呈现产品.服务.理念.文化,或向大 ...
开课吧WEB全栈架构师【6期，9-12期】
课程目标帮助那些追求卓越的初级前端工程师(至少-年以上经验)系统提升研发实力,达到一线互联网企业中高级前端工程师的技能水平.( 技能水平对标:百度T6-T7 ) 适合人群 1-3三年经验前端开发工程 ...

Web全栈~01.HTML基础元素