HTML 基础

举报
阿童木 发表于 2021/08/23 15:05:21 2021/08/23
【摘要】 图片标签属性说明src图像的路径alt图像不能显示时的替换文字title鼠标悬停时显示的内容border设置图像边框的宽度align对齐方式 相对路径相对路径分类符号说明同一级路径图像文件位于HTML文件同一级 <img src="baidu.gif"/>下一级路径/图像文件位于HTML文件下一级 <img src="images/baidu.gif"/>上一级路径…/图像文...

图片标签

属性 说明
src 图像的路径
alt 图像不能显示时的替换文字
title 鼠标悬停时显示的内容
border 设置图像边框的宽度
align 对齐方式

相对路径

相对路径分类 符号 说明
同一级路径 图像文件位于HTML文件同一级 <img src="baidu.gif"/>
下一级路径 / 图像文件位于HTML文件下一级 <img src="images/baidu.gif"/>
上一级路径 …/ 图像文件位于HTML文件上一级 <img src="../baidu.gif"/>

超链接

属性 作用
target 用于指定链接页面的打开方式,-self是默认值,_blank为在新窗口的打开方式

锚点链接

通过给内容中特定位置加id值来标记位置,然后用<a href="#id名">来实现位置的跳转

表格的基本语法

属性 说明
<table> </table> 定义表格的标签
<tr> </tr> 定义表格的行,嵌套在table标签中
<td> </td> 定义表格的单元格,嵌套在tr标签中
<th> </th> 定义表头部分,可以使单元格里的内容加粗居中
cellspacing 单元格之间的空白位置的大小,就是表格线的宽度
cellpadding 单元边沿与其内容之间的空白,就是内容与表格线的距离
 <table border="1" cellspacing="0" cellpadding="4">
     <tr> <th>球员</th> <th>薪资</th> <th>年龄</th> </tr>
     <tr> <td>salah</td> <td>2亿欧元</td> <td>28岁</td> </tr>
     <tr> <td>salah</td> <td>2亿欧元</td> <td>28岁</td> </tr>
 </table>

合并单元格

  • 跨行合并:rowspan="合并单元格的个数"
  • 跨列合并:colspan="合并单元格的个数"
三部曲
  1. 先确定跨行还是跨列
  2. 把合并代码写在目标单元格内(跨行就写在最上侧的单元格,跨列就写在最左侧的单元格)
  3. 删除多余的单元格

列表

属性 说明
ul元素 无序列表,没有层级,都是并列的,列表项前会有点
li 嵌套在ul,ol里面的列表项
ol元素 有序列表,会有顺序,1,2,3,
start 加在ol里面,可以设置编号的起始值<ol start="2">
dl元素 自定义列表,列表项前什么都没有,dt,dd

表单

form:用来定义表单域,就是创建表单
 <form action="网址" method="提交方式" name ="表单名称">
input 标签中的type属性
  1. 单行文本输入框<input type="text"/>
  2. 密码输入框<input type="password"/>,输入的内容用圆点显示
  3. 单选按钮<input type="radio"/>,几个选项添加相同name值后,可以单选(小圆圈)
  4. 复选框<input type="checkbox"/>常用于多选(小正方形)
  5. 普通按钮<input type="button"/>
  6. 提交按钮<input type="submit"/>
  7. 重置按钮<input type="reset"/>
input 中的其他标签
属性 说明
value 规定input控件的默认文本值
maxlength 规定输入字段中的最大长度
checked 首次加载就被选中,就是默认选中
textarea元素:创建多行文本框
<textarea cols="每行中的字符数" rows="显示的行数"></textarea>
select元素:创建下拉菜单
<select>
    <option>选项1</option>
    <option>选项2</option>
    <opyion>选项3</opyion>
    ...
</select>

在option中可以添加selected="selected"来设置默认选项


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。