前端的基本标签

403 阅读3分钟

初识Html

骨架组成

英文感叹号!加回车 快速搭建页面 image.png

<!DOCTYPE html>document type文档类型 html 超文本标记语言

<html lang="en">html 根标签 language 语言 en English 英文 zh—CN 中文

<meta charset="UTF-8"> charset 字符集 UTF-8 编码格式 也称为万国码

<html></html>根标签

<title></title>网页的标题

<head></head>网页的头部标签

<body></body>网页的身体/主体 所需要想页面展示的内容 都写在body里面

块标签(block)

1.上下排布 2.独占一行 3.可以设置宽高 4.自动换行

<p>段落标签</p>
:段落文字使用,默认段尾进行换行
<div>可以嵌套任意标签</div>
:划分块的主要标签
<ul>无序列表</li>
:无序标签,后面的标号为黑色圆点
ul li 不能分来使用 必须在一起
ul里面只能嵌套li,li里面可以嵌套任何标签
<ol>有序列表</li
:有序列表,后面的标号为1,2,3,4,..
ol里面只能嵌套li,li里面可以嵌套任何标签
<h1>标题标签</h1>
....
逐级递减
...
<h6>标题标签</h6>
:h1~h6为标题标签,字体的大小逐级变小
<br>换行标签
:换行标签,作用使代码效果被迫换行
<hr>水平分割线
:水平分割线,作用在代码下方产生一条水平分割线
<form action="">表单</form>
: 1.action是指把收集的数据 提交给哪一个服务器   里面填写服务器的地址
2. select 下拉菜单 属性值:option selected默认选中
3 textarer 文本域
3.1.  rasize=none 禁止缩放
3.2.  rasize=horizontal 水平缩放
3.3.  resiae:vertical 垂直缩放
3 4.  resiae:both 水平垂直缩放
<dl></dl>
dt 表头
dl 自定义列表
dd 文本内容
1. 对一个事件,时间点,名词等解析说明
2. 是一组标签 dl+dt+dd
3. t和 dd里面可以嵌套任何内容 

行标签(inline)

1.左右排布 2.不独占一行 3.宽高受到限制时,被迫换行 4.不可以设置宽高

<span>文本标签</span>
:主要用来对行内的文字进行一些样式以及其他的操作;
<em>斜体标签</em>
:一般对文字进行强调,用斜体体现出来
<strong>加粗标签</strong>
:一般对文字进行强调,用粗体体现出来
<del>删除线标签</del>
:删除线,在文本上产生一条删除线,只是语义上的删除;
<a href="">超链接</a>
1. :用来链接其他网页
2. 外链跳转href里面书写需要跳转的地址
3. 内部跳转 跳转到自己的文件夹里面 ./当前路径下;../上一级路径
4. '#'空链接 不做任何的链接和跳转
5. traget:_black 在新页面中打开
 <label for=""></label>
 1.常用于绑定内容与表单标签的关系
2.此时点击用户名,可以让输入框获取焦点
    -->

行内块标签(inline-block)

1.左右排布 2.不独占一行 3.宽高受到限制被迫换行 4.可以设置宽高

<img src="" alt="">插入图片标签</img>
:图片引用标签,其中src属性中写入图片的地址。
title鼠标停留在图片上的提示语句
alt 图片未加载成功的提示语句
<input>表单标签</input>
属性:
1. text 插入文本
2. password 密码
3. checkbox 复选框
4. placeholder 提示用户输入内容
5. radio 单选框 为了实现可以n选一需要给每一个属性为radio的input标签添加name属性,保证name的值是一样的
6. rest 重置按钮
7. submit 具有提交功能的按钮,如果不加value属性,默认为提交按钮
8. file 提交文件
9. autofocus 自动获取焦点
10. readonly 只能读,不能更改和添加内容
11. checked 添加后 刷新页面自动勾选

表格样式(table)

  1. tr 表格
  2. th 表头
  3. td 表格单元
  4. border边框
  5. width 宽度
  6. height 高度
  7. cellpadding 规定单元格边沿与其内容的空白
  8. cellspacing 规定单元格之间的空白
  9. rowspan 列合并
  10. colspan 行合并
  11. caption 定义表格的大标题 书写在table内部