HTML基础知识

最新推荐文章于 2024-09-08 19:45:37 发布

野生技术协会副会长

最新推荐文章于 2024-09-08 19:45:37 发布

阅读量175

点赞数

文章标签： html java

本文链接：https://blog.csdn.net/weiyoo55/article/details/108364994

版权

HTML

1.概念：是最基础的网页开发语言

Hyper Text Markup Language 超文本标记语言

超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
标记语言：
（1）由标签构成的语言。<标签名称> 如html，xml
（2）标记语言不是编程语言

2.快速入门

*语法：

1.html文档后缀名 .html 或者 .htm

2.标签分为

(1）围堵标签：有开始标签和结束标签。
(2）自闭和标签：开启标签和结束标签在一起。如
换行

3.标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：<a><b> </a></b>
正确：<a><b></b></a>

4.在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来

5.html的标签不区分大小写，但是建议使用小写

3.标签

1.文件标签：构成html最基本的标签

html：html文档的根标签

head：头标签。用于指定html文档的一些属性。引入外部的资源

title：标题标签

body：体标签

<!DOCTYPE html>：html5中定义该文档是html文档

2.文本标签：和文本有关的标签

*注释：

<h1> to <h6> ：标题标签

h1~h6：字体大小逐渐递减

<p> ：段落标签

<br>：换行标签

<hr>：展示一条水平线

属性：

color：颜色
width：宽度
size：高度

align：对齐方式

center：居中
left：左对齐
right：右对齐

<b>：字体加粗

<i>：字体斜体

<font>：字体标签

color：颜色
size：大小
face：字体

<center> 文本居中标签

*属性定义：

color：
1.英文单词：red,green,blue
2.rgb(值1，值2，值3)：值的范围：0~255 如：
rgb(0,0,255)
3.#值1值2值3：值的范围：00~FF之间。如：#FF00FF
width：
1.数值：width = ‘20’,数值的单位，默认是px(像素)
2.数值%：占比相对于父元素的比例

特殊字符集
在这里插入图片描述
案例：公司简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未央老王程序员简介</title>
</head>
<body>
<h1>
    公司简介
</h1>
<hr color="#ffd700">
<p>
<font color="ff0000">"未央老王程序员训练营"</font>是由<b><i>未央老王</i></b>中关村软件园、CSDN， 并委托未央老王进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
</p>
<p>
目前，“中关村未央老王程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。
</p>
<p>
未央老王程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 未央老王程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“未央老王程序员”， 必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，未央老王程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。
中关村未央老王程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
</p>
<p>
一直以来，未央老王程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
</p>
<hr color="#ffd700">
<font color="gray" size="2">
    <center>
    四川未央老王教育科技股份有限公司<br>
    版权所有Copyright 2006-2018&copy;, All Rights Reserved 川ICP备16007882
    </center>
</font>

</body>
</html>

3.图片标签：

img：展示图片
属性：

src：指定图片的位置

相对路径:

(1)以.开头的路径
(2) ./代表当前的目录 ./image/1.jpg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
 <!-- 展示一张图片-->
<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="300"/>
   <!--
    相对路径
         *以.开头的路径
         ./代表当前的目录 ./image/1.jpg
         ../代表上一级目录
   -->
<img src="./image/jiangwai_1.jpg">

 <img src="../image/jiangwai_1.jpg">
</body>
</html>

4.列表标签

*有序列表
ol
li

*无序列表
ul
li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>

<!--有序列表 ol-->
早上起床干的事情
<ol type="I" start="5">
    <li>睁眼</li>
    <li>看手机</li>
    <li>穿衣服</li>
    <li>洗漱</li>
</ol>

<!--无序列表  ul-->
早上起床干的事情
<ul type="disc" >
    <li>睁眼</li>
    <li>看手机</li>
    <li>穿衣服</li>
    <li>洗漱</li>
</ul>
早上起床干的事情
<ul type="square" >
    <li>睁眼</li>
    <li>看手机</li>
    <li>穿衣服</li>
    <li>洗漱</li>
</ul>
早上起床干的事情
<ul type="circle" >
    <li>睁眼</li>
    <li>看手机</li>
    <li>穿衣服</li>
    <li>洗漱</li>
</ul>

</body>
</html>

5.链接标签

a：定义一个超链接

属性：

href：指定访问资源的URL(统一资源定位符)
target：指定打开资源的方式
_self：默认值,在当前页面打开
_blank：在空白页面打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>

<!-- 超链接 a -->
<a href="http://www.baidu.com"> 点我 </a>
<br>
<a href="http://www.baidu.com" target="_self"> 点我 </a>
<br>
<a href="http://www.baidu.com" target="_blank"> 点我 </a>
<br>

<a href="./5_列表标签.html"> 列表标签 </a> <br>

<a href="mailto:315821128@qq.com">联系我们</a>
<br>

<a href="http://www.baidu.com"><img src="image/jiangxuan_1.jpg"></a>

</body>
</html>

6.div和span:

div：每一个div占满一整行。块级标签
span：文本信息在一行展示，行内标签，内联标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块标签</title>
</head>
<body>

<!--
    div：每一个div占满一整行。块级标签
    span：文本信息在一行展示，行内标签，内联标签
    -->

<span>老王程序员</span>
<span>未央老王</span>

<hr>
<div>老王程序员</div>
<div>未央老王</div>

</body>
</html>

7.语义化标签：html5中为了提高程序的可读性，提供了一些标签

(1)<header>

(2)<footer>

8.表格标签：

table：定义表格

width:宽度
border:边框
cellpadding：定义内容和单元格的距离
*cellspacing：定义单元格之间的距离。如果指定的距离为0，单元格的线合为一条
bgcolor：背景色
align：对齐方式

tr：定义行

bgcolor：背景色
align：对齐方式

td：定义单元格

colspan：合并列
rowspan：合并行

th：定义表头单元格

<caption>:表格标题

<thead>：表示表格的头部分

<tbody>：表示表格的体部分

<tfoot>：表示表格的脚部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#f5f5dc" align="center">
 <thead>
    <caption> 学生信息表</caption>
        <tr>
        <!--   <td>编号</td>
               <td>姓名</td>
               <td>成绩</td>-->
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
        </tr>
 </thead>
    <tbody>
    </tbody>
    <tr bgcolor="#7fffd4" align="center">
        <td>1</td>
        <td>小龙女</td>
        <td>100</td>
    </tr>
    <tr>
        <td>2</td>
        <td>杨过</td>
        <td>50</td>
    </tr>
    <tfoot>
    <td>3</td>
    <td>尹志平</td>
    <td>59</td>

    </tfoot>
</table>
<hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#f5f5dc" align="center">
    <caption> 学生信息表</caption>
    <tr>
        <th rowspan="2">编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
    <tr bgcolor="#7fffd4" align="center">
        <td>小龙女</td>
        <td>100</td>
    </tr>
    <tr>
        <td>2</td>
        <td colspan="2">杨过</td>
    </tr>
</table>

</body>
</html>

在这里插入图片描述

野生技术协会副会长

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识

HTML1.概念：是最基础的网页开发语言Hyper Text Markup Language 超文本标记语言超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本标记语言：（1）由标签构成的语言。<标签名称> 如html，xml（2）标记语言不是编程语言2.快速入门 *语法： 1.html文档后缀名 .html 或者 .htm 2.标签
复制链接

扫一扫