HTML入门



概述

HTML 教程 | 菜鸟教程 (runoob.com)

骨架标签

image-20220613203813281
image-20220613204612152

HTML常用标签

HTML常用标签可分为一下几类:

  • 排版标签、图片标签、超链接标签、表格标签、列表标签、表单标签

标题标签

标题标签一共有6个,h1~h6, h1是─级标题,最大;h6是六级标题,最小

align

align是标题的重要属性,能够决定标题中文字的显示位置

<h1>标题标签一共有6个</h1>
<h2>align属性可以设置文本对齐方式</h2>
<h3>align有三个可选值:left、center、right</h3>
<h4 align="left">left:左对齐方式,也是默认值</h4>
<h5 align="center">center:居中对齐方式</h5>
<h6 align="right">right:右对齐方式</h6>

水平线和换行

 <hr> 或 <hr/> 是水平线标签
 html文档中无法使用回车进行换行,要进行换行就必须使用
 <br>或<br/> 标签

段落标签

p 标签中也有align属性,用来控制文字显示的位置,默认值是left

<p>段落</p>
HTML实体

在html文档中空格至多只能使用一次,要使用更多空格必须使用html实体

&nbsp;代表一个空格
&emsp;代表全角空格
&lt;代表 <
&gt;代表 >
其它实体
60cdcc7e090fea6506400593

div 和 span标签

div标签主要是用来对网页进行布局的( div+css )

span标签通常用来将文本的一部分独立出来,从而对独立出来的内容设置单独的样式

  • div 标签一行只能放一个
  • span 一行可以放多个

字符与图片标签

字符格式化标签

image-20220613214331082

图片标签

img 标签:用来在页面中引入图片

src 属性:设置图片路径(相对路径绝对路径均可)

alt 属性:如果图片因为某种原因未能引入,则显示alt指定的字符串

width \ height 属性:用来设置图片宽高

链接标签

a 标签:超链接标签(从一个页面跳转到另一个页面)

锚链接:从也免得一个位置跳转到另一个位置

超链接

image-20220613221837612
图片超链接
<!-- 点击图片就能跳转到京东首页 -->
<a href="http://www.jd.com">
    <img src="./images/1.jpg" alt="京东首页" />
</a>

锚链接

  1. 使用a标签设置锚链接
  2. 在要跳转的标签上设置锚点
<!-- 设置锚链接 -->
<a href="#info">锚链接</a>
<!-- 设置锚点 -->
<p id="info">
    锚点
</p>

表格标签

table用来制作表格的外边框

table中嵌套tr用来制作表格的行

tr 中嵌套td用来制作表格的单元格(也叫列)

image-20220613224339497

常用表格属性

image-20220613224540022

colspan

用于列合并

rowspan

用于行合并

表格完整结构

  • caption、thead、th、tbody、tfoot

以上标签都要嵌套在table中

标签总结

  • 核心标签:
    • table: 表格的外边框
    • tr: 表格行
    • td: 表格单元格(列)
  • 表格结构标签:
    • caption: 表格标题
    • thead:表格头部
    • th:表头(居中、加粗、加黑)
    • tbody:表格主体
    • tfoot:表格脚部
  • 主要属性:
    • border:表格边框
    • width/height: 表格宽高、tr/td也能使用
    • cellspacing: 单元格与单元格、单元格与边框的间隙
    • cellpadding: 单元格中内容与单元格的间隙
    • align: 设置表格在页面中的位置; 设置tr/td中文字对齐方式
    • bgcolor: 设置表格、tr、td的背景色

列表与表单标签

列表

列表分为有序列表、无序列表和自定义列表三种

有序列表

有序列表由olli组成

<ol>
    <li>苹果</li> <!--1.苹果-->
    <li>香蕉</li>    <!--2.香蕉-->
    <li>葡萄</li>    <!--3.葡萄-->
</ol>
无序列表

无序列表由 ulli 标签组成

<ul>
    <li>苹果</li> <!-- · 苹果-->
    <li>香蕉</li>    <!-- · 香蕉-->
    <li>葡萄</li>    <!-- · 葡萄-->
</ul>
自定义列表

自定义列表由 dldtdd 三种标签组成

<dl>
    <!--dt和dd同级-->
    <dt>水果</dt>        <!--水果-->
        <dd>苹果</dd>        <!--苹果-->
        <dd>香蕉</dd>        <!--香蕉-->
        <dd>葡萄</dd>        <!--葡萄-->
    <dt>蔬菜</dt>        <!--蔬菜-->
        <dd>白菜</dd>     <!--白菜-->
        <dd>土豆</dd>     <!--土豆-->
        <dd>青椒</dd>     <!--青椒-->
</dl>

表单

image-20220615151907208

form标签:表单的外层

method 属性︰指定表单提交的方式,get(默认)、post

action属性∶指定表单提交的位置

<!--文本框-->
<input type="text"/>
<!--密码框-->
<input type="password"/>
常用属性
image-20220615152723802
value 和 placeholder
  • value:字体颜色深;当光标定位到框中,光标在值得最后。修改值时,必须先删除原有值。value优先级高于placeholder
  • placeholder:字体颜色浅;当光标定位到框中,光标在框的最前面,可以直接输入值

单选框和复选框

name属性用来将单选框/复选框限制成为一组复选框的name必须是数组形式,所以需要使用[](hobby[])

<!--type="redio":代表单选框-->
性别:<input type="radio" name="gender" value="1">男
    <input type="radio" name="gender" value="2">女
    <input type="radio" name="gender" value="0">未知
<!--type="checkbox":代表复选框-->
职业:<input type="checkbox" name="hobby[]" value="java">Java
    <input type="checkbox" name="hobby[]" value="php">PHP
    <input type="checkbox" name="hobby[]" value="c">C

其他域

文件域

文件域能够让表单具有文件上传能力

<input type="file" multiple="multiple"/>

multiple 属性:允许同时选中多个文件

按钮

<input type="button" value="普通按钮" />

<input type="reset" value="重置表单" />

<input type="submit" value="提交按钮" />

隐藏域

不显示在页面上,但是表单提交时又会被提交到action指定位置的域

<input type="hidden">

下拉菜单

下拉菜单由selectoption 两个标签组合而成

<select name="addr">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="gz">广州</option>
    <option value="sz">深圳</option>
</select>
文本域

文本域也叫做多行文本框\

多行文本框:<textarea name="sign"></textarea>

image-20220615172437572
其他属性
610a017409b0ee6305260530
HTML入门-HuaのJava之旅
HTML入门
此内容为免费资源,请登录后查看
0
免费资源
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片