HTML基础知识总结

~历桑

已于 2022-02-19 19:32:26 修改

阅读量725

点赞数

文章标签： html 前端

于 2022-02-19 19:32:00 首次发布

本文链接：https://blog.csdn.net/weixin_50053454/article/details/123017870

版权

块元素

独占一行，可以设置宽高。display:block;

form表单

form验证：

<form action="http://www.baidu.com/s">
    <!-- required 必填 -->
    <!-- \d正则表达式，代表0-9数字，{1,}1个或多个数字，{11}11位数字，{1,10}1-10位数字 -->
    <input type="text" name="wd" required pattern="\d{1,10}" id="wd">
    <button type="submit">提交</button>
</form>

required属性：使input标签变为必填项

pattern = "正则表达式\d"

\d 正则表达式代表0-9数字 {1,} 1个或多个数字 {11}11位数字 {1,10}1-10位数字

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title> New Document </title>
</head> 
<body>
    <form>
        <input id="user" type="text" required pattern="^[a-zA-Z0-9]{6,12}$" placeholder="请输入用户名"/>
        <input type="submit" value="提交">
    </form>
</body>
<script>
var user=document.getElementById("user");
    user.onblur=function(){
        if(user.value){
            user.setCustomValidity("");//现将有输入时的提示设置为空
        }else if(user.validity.valueMissing){
            user.setCustomValidity("用户名不能为空");  // 修改提示语
        };
        if(user.validity.patternMismatch){ 
            user.setCustomValidity("用户名只能是英文或数字，长度6到12位"); // 修改提示语
        }
    };
</script>
</html>

action：

里面提交的是地址

<!-- ?之前的是页面地址，之后的是搜索条件（传给后端的字段） -->
<!-- keyword=空调  键值对 =前面是键 =后面是值 多个键值对用&符号链接 -->
<form action="https://www.mi.com/search">
    <input type="text" name="keyword">
    <button type="submit">提交</button>
</form>

关键字：

name会在路径后面添加上一个搜索条件wd=xxx（输入框的内容）

<input type="text" name="wd">

button按钮：

<!-- 作用：修改form表单，跳转并且携带name到路径的后面 -->
<button type="submit">提交</button>
<!-- 作用：reset重置表单里面的所有项 -->
<button type="reset">重置</button>
<!-- 1.和上面两个button效果一样 -->
<!-- 2.不加value默认显示重置样式，加value不能为空，浏览器框内样式字样显示为value内设置的字样 -->
<input type="submit">
<input type="reset" value="111">

常用块标签

div：万能容器，划分器

p：段落标签

h1-h6：标题标签

hr：分割线

列表

ol、li：有序列表

ul、li：无序列表

表格

tr：定义行

td：定义列 th：表头，字体居中，加粗）（两者都放在tr标签内使用）

cellpadding 单元格的内边距
cellspacing 单元格之间的距离
border 表格边框
align 对齐方式（只有三个right、left、center）
width height 属性非样式
colspan 合并列
rowspan 合并行

行元素

多个标签在一行显示，宽高、行高、上下边距都不能设置，只能靠内容撑起来（水平排布，不独占一行，右边有位置就一直排列，不能直接设置宽高）display:inline;

常见的行元素标签

span：显示少量的文字

b、strong：字体加粗

i、em：字体倾斜

u：下划线

sup\sub：上标/下标

s\del：删除线

a：超链接标签
外部链接：href里面直接添加跳转的页面路径
内部链接：./+另一个html
空链接：href为空，点击刷新当前页---href里面只有一个#时，点击直接返回页面顶部，不会刷新页面
下载链接：./+被下载内容
嵌套其他元素：为其添加链接
锚点链接：给定位的目标设置一个唯一标识id 属性的值不能重复
<a href="#position">
<div id="position">
href - target：_self当前页面跳转，会有历史记录（默认）；_balnk打开新页面跳转，没有历史记录。

行内块元素

多个行内块标签可以一行显示，并且可以直接设置宽高(默认水平排列，右边位置不够才换行)display:inline-block;

行内块元素默认垂直方向的对齐方式是以基线对齐
vertical-align: top; 顶线对齐

img：引入图片

src：图片地址
相对路径：./当前目录 ../../上上级目录 ../上级目录/当前项目的根目录网络地址

绝对路径：从盘符(C:)开始，不建议使用

alt：当图片显示有问题时，alt里面的内容会代替图片显示当图片显示有问题时，alt里面的内容会代替图片显示

input：输入框

type：输入框类型

text：文本输入框
maxlength=" " 输入框可输入的最大长度

autofocus 自动获取焦点(刷新默认是可输入状态)

disabled 禁用输入框（无法望输入框里面输入内容）

number：数字输入框【只能输入数字】
min = " " 输入的数字最小值

step：每次点击增加或者减少的值

password：密码输入框
data：日期选择框
type为week：周选择器（某某某某年第某某周）

type为month：月选择器（某某某某年第某某月）

data-time-local：本地日期时间选择框，type为time：事件选择器
color：颜色选择器
checkbox：复选框
radio：单选框
range：范围滑块
file：上传文件框多文件上传：<input type="file" multiple> 文件夹上传：<input type="file" webkitdirectory>
image：图片
hidden：隐藏

输入框内容

placeholder 当输入框里面没有内容的时候，显示的提示信息，（无法操作）

value 输入框里面的内容（可以操作）

lable：扩大选择区域

for的值和 id的值相对应
<label for="username">姓名:</label>
<input type="text" id="username">
多个id只有第一个会生效【id是唯一标识】

与radio合用，不加name都可以选中，用相同的name使两者不能同时被启用起到选择的作用
<label>
        <input type="radio" name="gender">男
    </label>
    <label>
        <input type="radio" name="gender">女
    </label>

textarea：多行输入框

cols="" 控制输入框的列数(不同浏览器不太准确)
rows="" 控制输入框的行数
不设置的时候默认2行11列不建议用，直接用样式设置宽高

textarea里面的内容会保留换行和空格

maxlength 控制可输入的最大字符长度
<textarea cols="30" rows="10" placeholder="请输入备注">黄焖大鲤鱼</textarea>
<textarea cols="30" rows="10" placeholder="请输入备注">                            黄焖大鲤鱼</textarea>
<textarea cols="30" rows="10" placeholder="请输入备注">黄焖    大鲤鱼</textarea>

button按钮

select：下拉列表
option：列表选项 selected 更改默认选中项
optgroup：选项组
<select>
        
        <optgroup label="荤菜">
            <option>黄焖鸡儿</option>
            <option>小鸡炖蘑菇</option>
        </optgroup>
        <optgroup label="素菜">
            <option selected>紫菜蛋花汤</option>
        </optgroup>
    </select>
与js合用

下拉框提交 value属性如果不设置默认提交的就是选中的内容；如果设置提交的就是value的值

另外有：

格式化标签 pre:默认字体为13px ,保留内容缩进和换行 center:内容在父元素中居中显示 br 换行

语义化标签（什么标签放什么内容有利于seo(有自己含义的标签都是语义化标签)eg：h标签放标题 p标签放段落文字）

~历桑

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识总结

块元素独占一行，可以设置宽高。display:block;form表单form验证：<form action="http://www.baidu.com/s">   <input type="text" name="wd" required pattern="\d.
复制链接

扫一扫