HTML从入门到会用

最新推荐文章于 2024-01-25 22:53:26 发布

林九

最新推荐文章于 2024-01-25 22:53:26 发布

阅读量5.2k

点赞数

分类专栏：前端技术

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_40670787/article/details/118554152

版权

前端技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML

概念：是最基础的网页开发语言
* Hyper Text Markup Language 超文本标记语言
* 超文本:
* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
* 标记语言:
* 由标签构成的语言。<标签名称> 如 html，xml
* 标记语言不是编程语言

常用标签及属性

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

html:html文档的根标签
head：头标签。用于指定html文档的一些属性。引入外部的资源
title：标题标签。
body：体标签
<!DOCTYPE html>：html5中定义该文档是html文档

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

注释：
<h1> to <h6> ：标题标签 h1~h6:字体大小逐渐递减
<p>：段落标签
<br>：换行标签
<hr>：展示一条水平线,属性:color颜色,width宽度,size高度, align对齐方式:center居中,left左对齐,right右对齐
<b>：字体加粗
<i>：字体斜体
<font>:字体标签
<center>:文本居中属性:color颜色 ,size大小,face字体

属性定义

color：

英文单词：red,green,blue
rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
#值1值2值3：值的范围：00~FF之间。如： #FF00FF

width：

数值：width=‘20’ ,数值的单位，默认是 px(像素)
数值%：占比相对于父元素的比例

图片标签

img：展示图片
src：指定图片的位置

列表标签

有序列表：
ol
li
无序列表：
ul
li

链接标签

a:定义一个超链接
href：指定访问资源的URL(统一资源定位符)
target：指定打开资源的方式
_self:默认值，在当前页面打开
_blank：在空白页面打开

div和span

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

表格标签

able：定义表格
* width：宽度
* border：边框
* cellpadding：定义内容和单元格的距离
* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
* bgcolor：背景色
* align：对齐方式
tr：定义行
* bgcolor：背景色
* align：对齐方式
td：定义单元格
* colspan：合并列
* rowspan：合并行
th：定义表头单元格

综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<form action="#" method="post">
  <table border="1" align="center" width="500">
    <tr>
      <td><label for="user">用户名</label> </td>
      <td><input type="text" name="user" id="user" placeholder="请输入账号"></td>
    </tr>

    <tr>
      <td><label for="password">密码</label></td>
      <td><input type="password" name="password" id="password" placeholder="请输入密码"></td>
    </tr>

    <tr>
      <td><label for="email">Email</label></td>
      <td><input type="email" name="password" id="email" placeholder="请输入Email"></td>
    </tr>

    <tr>
      <td><label for="name">姓名</label></td>
      <td><input type="text" name="name" id="name" placeholder="请输入真实姓名"></td>
    </tr>

    <tr>
      <td><label for="tel">手机号</label></td>
      <td><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
    </tr>

    <tr>
      <td>性别</td>
      <td>
        <input type="radio" name="sex" value="man" checked >男
        <input type="radio" name="sex" value="woman" >女
      </td>
    </tr>

    <tr>
      <td>出生日期</td>
      <td><input type="date" name="birthday" ></td>
    </tr>
    <tr>
      <td colspan="2" align="center"><input type="submit" value="注册" ></td>
    </tr>
  </table>
</form>
</body>
</html>

在这里插入图片描述

林九

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML从入门到会用

HTML概念：是最基础的网页开发语言* Hyper Text Markup Language 超文本标记语言* 超文本:* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.* 标记语言:* 由标签构成的语言。<标签名称> 如 html，xml* 标记语言不是编程语言常用标签及属性文件标签：构成html最基本的标签html:html文档的根标签head：头标签。用于指定html文档的一些属性。引入外部的资源title：标题标签。body：体标签&l
复制链接

扫一扫

专栏目录