【无标题】

文章目录

  • HTML标签总结
    • 常用标签
    • 图像标签
    • 超链接标签
    • 表格标签
    • 列表标签
    • 表单标签

好久没有学习前端了,从今天开始打算每天记录自己的学习复习记录。

HTML标签总结

常用标签

DOCTYPE html>  告诉浏览器按照html5版本来加载页面
<html lang="en"> 告诉浏览器html代码中的代码是英文的
<head>
    <meta charset="UTF-8"> 编码方式 告诉浏览器按照什么方式解码。utf-8万国码 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 下面两个是移动端
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签title>
head>
<body>
    
body>
html>
标签名 含义
center 居中
strong/b 加粗
em/i 倾斜
del/s 删除
ins/u 下划线
div 一个大盒子,独占一行
span div的小盒子

图像标签

图像标签 说明
img 所有属性都要在img中
src 图片路径(相对/绝对)
alt 替换文本
title 提示文本
width 图像宽度,等比例缩放
height 图像高度,默认等比例缩放
border 填写数值,表格边框宽度(一般css设置)

相对路径和绝对路径
相对路径
同一级src = “baodu.gif”
下一级:文件夹名/
上一级:…/
绝对路径
绝对路径斜杠向右\ 相对路径向左

超链接标签

加到其他标签里面

<a href="http://www.qq.com" target="_blank">腾讯a>
<a href="http://www.qq.com"><img src="../img/腾讯logo.jpeg">a>
超链接标签 href属性 说明
外部链接 target=“_blank” 新窗口打开
内部链接 target=“_self” 当前窗口打开
空链接 href=“#” 占位作用
下载链接 href=“…/xx.rar” href中地址是.exe或者.rar
网页元素链接 href=网页元素链接 网页中各种元素(文字/图像/表格/音频)都可加链接
锚点链接 href=“#名字” id=“名字” 快速定位(返回顶部)

表格标签

表格标签是用来展示数据的,不是用来布局页面的

表格结构标签

表格结构标签 说明
table 表格大标签
thead 表头
tbody 表身
tr 一个tr是一行
th 表头属性
td 单元格内容

 table表格大标签  一个tr占一行  tr-th 表头   tr-td 表格内容

表格属性标签
这些属性写到table标签中。实际开发中通过css设置

表格属性标签 说明
align 对齐方式 left/center/right
border 边框 " "/1
cellpadding 单元边沿与内容之间空白
cellspacing 单元格之间空白
width 表格宽 像素值/百分比

合并单元格

合并单元格步骤:
1、确定合并方式(跨行/跨列)
2、找到目标单元格,要合并的数目
3、删除多余单元格

<table align="center" border="3" cellpadding="10" cellspacing="0">
        <tr>
            <th colspan="5">个人简历th>
        tr>
        <tr>
            <td>姓名:td>
            <td>td>
            <td>性别:td>
            <td>td>
            <td rowspan="3">照片td>
        tr>
        <tr>
            <td>出生年月:td>
            <td>td>
            <td>民族:td>
            <td>td>
        tr>
        <tr>
            <td>政治面貌:td>
            <td>td>
            <td>学历:td>
            <td>td>
        tr>
 table>

列表标签

表格是用来显示数据的,列表是用来布局页面的
列表整齐有序额,布局页面更加自由和方便

列表类型 标签 说明
无序列表 ul – li ul中只能放li li中可以任何
有序列表 ol – li 前面有序号
自定义列表 dl --dt --dd dl中只能有dt和dd;dt和dd是并列关系

表单标签

表单:用于收集用户信息
表单的组成:表单域、表单控件(表单元素)、提示信息

1、input输入表单元素

type类型 说明
text 文本框
password 密码框 用户看不见按输入的密码
radio 单选框 checked="checked"默认勾选 设置name
checkbox 复选框 设置name checked
submit 提交 将表单数据发送到服务器
reset 重置按钮 还原初始状态
button 普通按钮 定义(验证码)
file 文件域 可上传文件

label标签——用于绑定一个表单元素 增加触发范围

<input type="radio" name="sex2" id="nan"> <label for="nan">label> 
<input type="radio" name="sex2" id="nv"> <label for="nv">label>  

2、select下拉表单元素
select - option
select=“selected”默认选择

3、text area文本域标签

  <textarea  rows="3" cols="60">感谢您的留言
  textarea>

你可能感兴趣的:(html,html)